echarts：按需导入，以及axios获取数据加载echart

目标

vue中，按需导入echarts，以及axios获取数据加载echarts图。echarts官网

步骤

• 1、安装echarts
  npm install echarts --save
• 2、按需导入组件，以下几个示例

  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  // 引入饼图组件
  // require('echarts/lib/chart/pie')
  // 导入折线图
  require('echarts/lib/chart/line')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/graphic')
  require('echarts/lib/component/legend')

• 3、为图表准备一个DOM容器

<!-- vue的话，就在template中准备容器-->
<template>
          <div id="lineChart" style="width:100%;height: 400px;"></div>
</template>

• 4、定义对应的画图方法（这里使用折线图示例）

drawInterface() {
        let barChart = echarts.init(document.getElementById("barChart"));
        // 发送axios请求，获取数据
        this.$axios.get(`${host}/xxx/`)
          .then((response) => {
            let datas = response.data;
            // 获取response的数据，赋值给变量，这些变量用于下面配置图表的option中
            let xAxis = datas.linechart.xAxis;
            let seriesSuccess = datas.linechart.series.success;
            let seriesFailures = datas.linechart.series.failures;
            let seriesError = datas.linechart.series.error;
            let seriesSkipped = datas.linechart.series.skipped;
            // 基于准备好的dom，初始化echarts实例
            let lineChart = echarts.init(document.getElementById("lineChart"));
           // 指定图表的配置项和数据
            let lineOption = {
              // title: {
              //   text: '按类型统计',
              //   top: 'bottom',
              //   left: 'center',
              //   textStyle: {
              //     fontSize: 14,
              //     fontWeight: '',
              //     color: '#333'
              //   },
              // }, //标题

              tooltip: {
                trigger: 'axis'
              },
              color: ['#00ffe9', '#ff6382', '#ff8e72', '#fffca2'], //定义legend的颜色
              legend: {
                x: 'left',
                left: '10px',
                data: ["通过数", "失败数", "错误数", "跳过数"]
              },
              grid: {
                left: '3%',
                right: '5%',
                bottom: '2%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis,  // 从变量中取值
                //设置文本过长超出隐藏...表示
                axisLabel: {
                  margin: 8,
                  formatter: function(params) {
                    var val = "";
                    var show = 8;
                    if (params.length > show) {
                      val = params.substr(0, show) + '...';
                      return val;
                    } else {
                      return params;
                    }
                  }
                },
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                  name: '通过数',
                  smooth: true, //这个是把线变成曲线
                  type: 'line',
                  // stack: '总量',
                  lineStyle: { // 线的样式
                    normal: {
                      color: "#00ffe9"
                    }
                  },
                  data: seriesSuccess  // 从变量中取值
                },
                {
                  name: '失败数',
                  smooth: true, //这个是把线变成曲线
                  type: 'line',
                  // stack: '总量',
                  lineStyle: { // 线的样式
                    normal: {
                      color: "#ff6382"
                    }
                  },
                  data: seriesFailures  // 从变量中取值
                },
                {
                  name: '错误数',
                  smooth: true, //这个是把线变成曲线
                  type: 'line',
                  // stack: '总量',
                  lineStyle: { // 线的样式
                    normal: {
                      color: "#ff8e72"
                    }
                  },
                  data: seriesError  // 从变量中取值
                },
                {
                  name: '跳过数',
                  smooth: true, //这个是把线变成曲线
                  type: 'line',
                  // stack: '总量',
                  lineStyle: { // 线的样式
                    normal: {
                      color: "#fffca2"
                    }
                  },
                  data: seriesSkipped  // 从变量中取值
                }, 

              ]
            };
            // 使用刚指定的配置项和数据显示图表。
            lineChart.setOption(lineOption);
            window.onresize = function() {  // 页面监控宽度的变化
              lineChart.resize(); 
            };

            // 添加点击事件，可以点击每个区域，其中params为每个区相关属性，可以根据该属性写各种事件
            // lineChart.on('click', function(params) {
            //   console.log(params);
            // });
          })
          .catch((error) => {
            if (error.msg == null) {
              this.$message.error('服务器错误');
            } else {
              this.$message.error(error.msg);
            }
          })
      },

5、定义加载时，调用该画图函数

    methods: {
      drawChar() {
        this.drawInterface();
      },

结果：