vue echarts 多条折线图

在Vue.js中使用ECharts创建多条折线图通常涉及到以下几个步骤：

1. **安装依赖**：
首先需要在项目中安装Vue和ECharts。可以使用npm或yarn进行安装：

   npm install vue echarts --save

2. **导入组件**：
在`main.js`或组件文件中引入ECharts Vue插件：

   import * as ECharts from 'echarts';
   import { EChart } from 'vue-echarts/components/EChart';

3. **实例化ECharts**：
创建一个新的Vue组件并注入ECharts实例：

   <template>
     <div ref="chart"></div>
   </template>

   <script>
   export default {
     components: {
       EChart,
     },
     data() {
       return {
         chartInstance: null,
       };
     },
     mounted() {
       this.createChart();
     },
     methods: {
       createChart() {
         const myChart = this.$refs.chart;
         this.chartInstance = ECharts.init(myChart);
         // 初始化配置项，例如数据、选项等...
       },
     },
   };
   </script>

4. **配置图表**：
添加折线图的数据和选项，假设我们有两条折线分别代表数据A和数据B：

   createdChart() {
     const option = {
       xAxis: {
         type: 'category',
         data: ['A', 'B', 'C', 'D', 'E'],
       },
       yAxis: {},
       series: [
         {
           name: 'Data A',
           type: 'line',
           data: [5, 20, 36, 10, 10],
         },
         {
           name: 'Data B',
           type: 'line',
           data: [15, 10, 20, 30, 40],
         },
       ],
     };

     this.chartInstance.setOption(option);
   }

5. **动态添加数据**：
如果你需要在运行时添加更多的折线，可以在适当的时候调用`setOption`方法更新选项。