vue echarts绘制各种统计图（一）

1.npm 安装 ECharts

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

 2.在div中插入ecahrts

3.在methods中引入echarts模块,并初始化

 

4. 绘制统计图（以折线图为例），类似的统计图可参考https://www.echartsjs.com/examples/zh/index.html

 

drawLineChart() {
      const echarts = require('echarts');
      let myChart = echarts.init(document.getElementById('chartLine'));
      myChart.setOption(
          {
            title: {
              text: '销量趋势图',
              x: 'center'
            },
            tooltip: {
              trigger: 'axis'

            },
            legend: {
              data: ['销量'],
              x: 'right'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['A','B','C','D','E','F','G']
            },
            yAxis: {
              type: 'value'
            },
            series:
                [{
                  name: '销量',
                  type: 'line',
                  // 设置折线图颜色
                  itemStyle: {
                    normal: {
                      lineStyle: {
                        color: '#4876FF'
                      }
                    }
                  },
                  stack: '总量',
                  data: [1,2,3,4,5,6,7]
                }]
          }
      );
    }

5.最最最重要的一步！！！

一定要在mounted中执行绘制统计图方法！ 

一定要在mounted中执行绘制统计图方法！ 

一定要在mounted中执行绘制统计图方法！