vue-echarts图表使用

1.安装 echarts vue-echarts

npm i echarts@5.1.2 vue-echarts@6.2.3

2.main引入

// 引入vue-echarts
import VueECharts from 'vue-echarts'
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts
Vue.component('v-chart', VueECharts)

3.页面使用

<template>
  <div class="chart-page">
    <v-chart
      class="fill-chart"
      ref="eventTimeChart"
      :option="Options"
      autoresize
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      Options: {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '20%',
          left: '20%',
          bottom: '20%',
          right: '20%'
        },
        xAxis: [{
          type: 'category',
          data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#DDD'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#333'
            }
          },
          nameTextStyle: {
            color: '#999'
          },
          splitArea: {
            show: false
          }
        }],
        series: [{
          name: '课时',
          type: 'line',
          data: [23, 60, 20, 36, 23, 85],
          lineStyle: {
            normal: {
              width: 8,
              color: {
                type: 'linear',

                colorStops: [{
                  offset: 0,
                  color: '#A9F387' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#48D8BF' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(72,216,191, 0.3)',
              shadowBlur: 10,
              shadowOffsetY: 20
            }
          },
          itemStyle: {
            normal: {
              color: '#fff',
              borderWidth: 10,
              /* shadowColor: 'rgba(72,216,191, 0.3)',
                shadowBlur: 100, */
              borderColor: '#A9F387'
            }
          },
          smooth: true
        }]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.chart-page,
.fill-chart {
  width: 100%;
  height: 100%;
}
</style>

效果展示

可查看案例 https://www.makeapie.cn/echarts
官方案例 https://echarts.apache.org/examples/zh/index.html