vue3+ts实现折线图

以下是使用Vue3和TypeScript实现折线图的步骤：

1.安装echarts和vue-echarts依赖：

npm install echarts vue-echarts@5.0.0-beta.3

2.在Vue组件中引入依赖：

import { defineComponent } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { EChartsOption } from 'echarts/types/dist/shared'
import VueECharts from 'vue-echarts'

use([CanvasRenderer, LineChart, GridComponent, TooltipComponent])

3.定义数据和配置项：

const data = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
}

const options: EChartsOption = {
  title: {
    text: '折线图示例'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['销量']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} 件'
    }
  },
  series: [{
    name: '销量',
    type: 'line',
    data: [120, 132, 101, 134, 90, 230, 210]
  }]
}

4.在Vue组件中使用VueECharts组件：

export default defineComponent({
  components: {
    VueECharts
  },
  data() {
    return {
      data,
      options
    }
  },
  template: `
    <div>
      <vue-echarts :options="options" :data="data" />
    </div>
  `
})