vue——在vue项目中使用echarts-CFANZ编程社区

说明：本例子基于vue-cli脚手架搭建

首先，安装echarts依赖

npm install echarts -S

注：安装NodeJS之后，使用npm来安装包使用的是国外的地址，经常会出现超时错误，这时可以通过修改为国内的淘宝镜像来加速安装。

//淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

在main.js中全局引入

//引入echarts
import echarts from 'echarts'
//vue全局注入echarts
Vue.prototype.$echarts = echarts;

example.vue中

html部分

<template>
  <div id="container">
    <!--图表容器-->
    <div id="newCharts"></div>
  </div>
</template>

css部分

<style lang="scss" scoped>
  #container {
    width: 100%;
    height: 100vh;
    padding-top: 100px;
    #newCharts{
      margin: 0 auto;
      width: 800px;
      height: 800px;
    }
  }
</style>

js部分

注释：如果下面的折线图setOption配置项里头的很多属性，包括很多没有写上去的属性，大家想要有一个更加清晰的了解的话，可以点击下面链接详情查看。
echarts绘制图表中，setOption配置项手册

<script>
  export default {
    name: "example",
    data() {
      return {
			formatter:'￥{value}',
		}
    },
    mounted() {
      this.showCharts();
    },
    methods: {
      // 展示折线图
      showCharts(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('newCharts'));//也可以通过$refs.newCharts的方式去获取到dom实例。
        // 绘制图表
        myChart.setOption({
          title: { text: '在vue中使用echarts绘制图表' },//图标的标题
          // X轴
          xAxis: [{
            type: 'category',//坐标轴类型,类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据
            //坐标轴刻度相关设置
            axisTick: {
              alignWithLabel: true,//为true时，可以让刻度跟底部的标签内容对齐
            },
            data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],//X轴的刻度数据
            name: "时间",//坐标轴名称
            nameLocation: "start",//坐标轴名称显示位置
            //坐标轴名称的文字样式
            nameTextStyle: {
              align: "center",//文字水平对齐方式，默认自动
              verticalAlign: "top",//文字垂直对齐方式，默认自动
              lineHeight: 28,//行高
              fontSize: 10,//字体大小
              color: "rgba(0, 0, 0, 1)"//字体颜色
            },
            //坐标轴刻度标签的相关设置
            axisLabel: {
              interval: 'auto'//坐标轴刻度标签的显示间隔，在类目轴中有效。可以设置成 0 强制显示所有标签,如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示『隔两个标签显示一个标签』，以此类推。
            }
          }],
          // Y轴
          yAxis: {
            type: 'value',//坐标轴类型,'value' 数值轴，适用于连续数据
            //坐标轴刻度标签的相关设置
            axisLabel: {
              formatter: this.formatter//刻度标签的内容格式器，支持字符串模板和回调函数两种形式。简单讲就是可以自己格式化标签的内容。
            },
          },
          //直角坐标系内绘图网格,简单理解指的就是这个折线图。
          grid: {
            left: 50//grid 组件离容器左侧的距离
          },
          // 数据
          series: [
            {
              data: [155,45,87,123,89,116,173],//折线图要展示的数据
              type: 'line'//数据以什么样的类型展示。line为折线图
            }
          ]
        })
      }
    }
  }
</script>

注意：这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用的。

当我们例子写好后，一运行，哎，很多人要开始骂我了，什么鬼，怎么报错了，折线图呢？
不要急，我还没讲完呢，且听我细听分说。
当我们运行项目，打开游览器之后，就会发现控制台报了一个错误，如下图所示：
在这里插入图片描述
解决办法：

//引入echarts
import * as echarts from 'echarts'//在import的后面，echarts的前面加一个 * as
//vue全局注入echarts
Vue.prototype.$echarts = echarts;

改完之后，运行，结果如下：
在这里插入图片描述
这样，一个简单的折线图例子就出来了，但是我在这里有必要提醒大家，上面全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需引入的比较好。

按需引入

在main.js中按需引入

//引入 ECharts 主模块
let echarts = require('echarts/lib/echarts');
//按需引入echart折线图等组件
require('echarts/lib/chart/line');
//vue全局注入echarts
Vue.prototype.$echarts = echarts;