安装Echart

npm install echarts –save

代码

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
  <a-button @click="add"> 新增</a-button>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'MyChart',
  mounted () {
    this.initChart()
  },
  data () {
    return {
      xAxis: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      seriesData: [5, 20, 36, 10, 10, 20],
      myChart: null
    }
  },
  methods: {
    add () {
      const num = Math.random() * 50
      this.xAxis.push(`${num}`)
      this.seriesData.push(num)
      this.myChart.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxis
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            data: this.seriesData
          }
        ]
      })
    },
    initChart () {
      const chartDom = this.$refs.chart
      this.myChart = echarts.init(chartDom)
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        legend: {
          data: ['Email', 'Union Ads']
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            data: this.seriesData
          },
          {
            name: 'Union Ads',
            type: 'line',
            data: [8, 20, 96, 10, 30, 20]
          }
        ]
      }
      this.myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
/* 添加一些样式以确保图表正确显示 */
</style>

效果