Vue项目中引入Echarts

1. 安装Echats

npm install echarts --save

2. 项目按需引入形式

// 页面文件，如index.vue
<template>
  <div>
    <div id="main" class="main_con"></div>
  </div>
</template>
<script>
// 按需引入echarts折线图
  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
  ]);
 
export default {
  data() {
    return {}
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById("main"));
        // 绘制图表
        myChart.setOption({
          title: {
            text: 'Ltv表单'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['06-01', '06-02', '06-03', '06-04', '06-05', '06-06', '06-07']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['LV1', 'LV2', 'LV3', 'LV4', 'LV5', 'LV6', 'LV7']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '06-01',
              type: 'line',
              data: [0, 120, 132, 101, 134, 230, 210]
            },
            {
              name: '06-02',
              type: 'line',
              data: [0, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '06-03',
              type: 'line',
              data: [0, 12, 191, 242, 290, 30, 10]
            },
            {
              name: '06-04',
              type: 'line',
              data: [0, 121, 191, 241, 29, 30, 10]
            },
            {
              name: '06-05',
              type: 'line',
              data: [0, 12, 191, 24, 20, 30, 10]
            },
            {
              name: '06-06',
              type: 'line',
              data: [0, 12, 191, 240, 290, 30, 10]
            },
            {
              name: '06-07',
              type: 'line',
              data: [0, 12, 191, 214, 290, 30, 10]
            },
          ],
        });
        // echarts生成图表后随屏幕大小改变自适应 在setoption之后添加
        window.onresize = function() {
          myChart.resize();
        };
      },
    },
  },
}
</script>
<style>
.main_con {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
</style>