vue3使用echarts折线图

内容：

vue3使用echarts的折线图实现数据统计功能

1、下载echarts:npm i echarts.

2、main.js中引用import echarts from ‘echarts’，也可以在需要用到的页面单独引用。

3、实现代码：

html：
<div id="recordAreaStaff" style="width: 100%;height:calc(100%);"></div>

js：
 let areaPam = echarts.init(document.getElementById('recordAreaStaff'));// 指定图表的配置项和数据
 let option = {
        title: {
          text: title,
          left:"center",
          top:20
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            // 启用鼠标悬浮时的十字准线
          }
        },
        legend: {
          data: [],
          top:450,//指定图例功能区域top值
        },
        // 图像的上下左右距离
        grid: {
          left: '3%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: []
      };
    
    // x坐标的数据
	option.xAxis.data = [];
	// 图列：就是你有多少种数据就有多少个图例
    option.legend.data = ['系列1', '系列2'];
	let data1 = {
        name: '系列1',
        type: 'line',
        stack: '总量' + 1,
        data: [],// 系列1的数据
        itemStyle: {
          color: '#afd8f8' // 设置系列1的颜色
        }
    }
    // 这里stack 后面加上数字是因为不希望数据堆叠显示，如果需要堆叠就不加
	let data2 = {
        name: '系列2',
        type: 'line',
        stack: '总量' + 2,
        data: [],// 系列2的数据
        itemStyle: {
          color: '#000' // 设置系列2的颜色
        }
    }

	// 最后把数据放到echarts对象上就可以了
	option.series = [data1 ,data2];
	areaPam?.setOption(option);