Vue——Echarts的使用

vuecli中在main.js进行引入

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

在自定义组件中进行引入使用

<div id="myChart" :style="{width: '800px', height: '300px'}"></div>

mounted() {
    this.drawLine();
  },
  methods: {
    drawLine(){
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      var colors = ['#007dff', '#4adbed', '#dcdd49','#7f9897',];
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          x: '40px',
          y: '270px',
          data: ['货车', '轿车', '客车', '其他']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['00:00', '03:00', '08:00', '09:00', '12:00', '15:00', '18:00','21:00','24:00']
          }
        ],
        yAxis: [
          {
            type:'value',
            name: '车辆数',
            min: 0,
            max: 10,
            position: 'left',
            axisLine: {
              // show: true,
              lineStyle: {
                color: colors[1]
              }
            },
          },
          {
            type:'value',
            name: '延误时长',
            min: 0,
            max: 10,
            position: 'right',
            axisLine: {
              // show: true,
              lineStyle: {
                color: colors[1],
              },
            },
          },

        ],
        series: [
          {
            name: '轿车',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: [1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,],
            itemStyle: {
              color: colors[0]
            },//自定义柱子颜色
          },
          {
            name: '货车',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: [2, 3, 1, 3,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,],
            itemStyle: {
              color: colors[1]
            },
          },
          {
            name: '客车',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data:  [2, 3, 1, 3,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,],
            itemStyle: {
              color: colors[2]
            },
          },
          {
            name: '其他',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data:  [2, 3, 1, 3,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,1.2, 1.4, 0.9, 1.9,],
            itemStyle: {
              color: colors[3]
            },
          },
        ]
      });
    }
  }