Vue | 使用 ECharts 绘制折线图

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  name: 'LineChart',
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      chart.setOption({
        title: {
          text: '折线图示例'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.chartData.categories
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.chartData.values,
          type: 'line'
        }]
      });
    }
  }
};
</script>

这个简单的Vue组件使用ECharts绘制了一个折线图。它接受一个包含类别（categories）和值（values）的chartData属性，并在被挂载到DOM后初始化ECharts实例，设置图表的选项，最终渲染折线图。