Vue按需引入Echart折线图堆叠

1. npm 安装依赖包

npm install echarts -S

2. html内容
   <div class="chart_wrap" id="main_chart"></div>
3. 根据项目使用图标的频率选择全局引入还是按需引入，在此我选择按需引入
   按需引入，其实只要查看echart文档即可，有完整的示例代码可以直接搬过去使用，然后根据项目的需求修改一下title标题内容与位置、legend，grid调整图表大小、toolBox调整保存按钮的位置、series系列的name对应legend的data里面的值.
   script内容

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

挂载的时候初始化一次，并且要监听窗口变化时重新渲染图表

  mounted() {
    this.initChart()
    window.addEventListener('resize', this.initChart)
  },

methods里定义初始化函数
监听窗口变化而更新图表需要加上clear()与resize()方法

initChart() {
  var chartDom = document.getElementById('main_chart');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    title: {
      text: '上称数据',
      left: 20,
      top: 10
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['体重', '体脂率', '体水分率', '肌肉量', 'BMI']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      },
      padding: 20,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '体重',
        type: 'line',
        stack: 'Total',
        data: [80, 82, 86, 88, 90, 99, 85]
      },
      {
        name: '体脂率',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '体水分率',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '肌肉量',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'BMI',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
  myChart.clear()//
  myChart.resize()//
  option && myChart.setOption(option);
},

效果图：