step1:import

npm install echarts --save

step2:used

<template>
  <div>
    <div ref="lineChart"
         style="width: 800px; height: 400px; background-color: #ffffff; padding: 20px; border-radius: 20px;"></div>
  </div>
</template>
 
<script>
import * as echarts from 'echarts'

export default {
  mounted () {
    this.lineChart = echarts.init(this.$refs.lineChart)
    this.lineChart.setOption({
      title: {
        text: '完成率'
      },
      // 提示框
      tooltip: {
        trigger: 'axis'
      },
      // 图例
      legend: {
        icon: 'circle',
        left: 'center',
        top: 0,
        data: ['完成率', '一般', '差评']
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      // 工具栏
      toolbox: {
        feature: {
          saveAsImage: {
            type: 'png'
          },
          magicType: {
            type: ['line', 'bar', 'stack']
          }
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '完成率',
          type: 'line',
          // smooth: true, // 平滑曲线显示
          data: [0.28, 0.68, 0.48, 0.88, 0.98, 0.98, 0.98, 0.88, 0.88, 0.88, 0.88, 0.88]
        }
      ]
    })
  }
}
</script>

step:run

vue图表chart_ico

end