ECharts在vue中的使用方式,动态获取数据并重新渲染.

1.话不多说,先上示图(以折线图为例): 更多案例,请移步ECharts官网.

2.主体步骤及对应可能出现的常见问题解决:

2-1:安装ECharts依赖(这里需注意的是,安装后有可能因为ECharts的版本过高导致报init未定义等的问题,故可降低版本重新安装即可).

//常规安装

npm install echarts --save


//如若按官网的上述依赖安装后报init未定义的话,那可能是由于所安装的当前ECharts版本过高导致,请安装以下
版本

npm uninstall echarts --save   //卸载当前安装的ECahrts依赖

npm install [email protected] --save     //重新安装低版ECahrts依赖

2-1-1:如若按以上步骤还是未解决,那么在执行以上步骤后在main.js中引入时需按这种方式引入即可解决.  import * as echarts from 'echarts';

2-2:依赖安装成功后在 main.js中引入并注入.

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;    //该项目内的组件页面使用都要用this.$echarts

2-3: 在需使用的组件中定义: 

2-3-1: 在模板中定义容器,注意是以id类名定义.

2-3-2: 在该组件内的methods中定义初始化ECharts(附上主要代码).(如若:resize()不生效,可使用clear()重绘.)

setEchartsOptions() {   //生成ECharts
      var myChart = this.$echarts.init(document.getElementById("box"));
      myChart.setOption(this.options);
      myChart.resize(); //重绘,动态获取options时不会出现渲染异常
    } 

2-3-3:该组件内的data中定义ECharts的option(附上主要代码,该部分按实际需求自行定义内部数据和样式等,更多详情请移步ECharts官网).

options: {
        title: {
          //总标题
          text: "", //总标题文字
          textStyle: {
            //总标题样式
            fontSize: 14,
            color: "rgb(37,150,212)",
          },
          padding: [
            20, // 上
            10, // 右
            5, // 下
            300, // 左
          ],
        },
        grid: {
          // x: "25%", //x 偏移量
          // y: "25%", // y 偏移量
          // width: "80%", // 宽度
          // height: "65%", // 高度
        },
        xAxis: {
          name: "日期", //x轴标题文字
          nameTextStyle: {
            //x轴标题样式
            color: "#ccc",
          },
          type: "category",
          data: [],
          axisTick: {
            //刻度线
            show: false,
          },
          axisLine: {
            //x坐标轴
            show: false,
          },
        },
        yAxis: {
          name: "流量/M", //y轴标题文字
          nameTextStyle: {
            //y轴标题样式
            color: "#ccc",
          },
          type: "value",
          axisTick: {
            //刻度线
            show: false,
          },
          axisLine: {
            //y坐标轴
            show: false,
          },
          axisLabel: {
            //y轴文字
            formatter: "{value}",
            textStyle: {
              color: "rgb(169,169,169)",
            },
          },
          splitLine: {
            //y轴分割线
            show: true,
            lineStyle: {
              type: "solid",
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "rgb(254,158,56)",
            },
          },
        },
        series: [
          {
            type: "line",
            name: "",
            data: [
              "10",
              "20",
              "5",
              "15",
              "12",
              "18",
              "23",
              "6",
              "56",
              "18",
              "20",
              "9",
              "27",
              "4",
              "16",
              "8",
              "23",
              "3",
            ],
            color: ["rgb(136,221,239)"], //折线颜色
            areaStyle: {}, //折线区域开启
            itemStyle: { normal: { label: { show: true } } },
          },
        ],
      },

2-3-4: 定义异步获取动态数据方法和对应的ECharts动态赋值,重新渲染操作. 

3.友情链接：ECharts案例大全，满足大部分需求。传送门