vue父子传值 echarts图的应用

实现的效果图

 条线图

代码解析

 接口取值

 渲染

    initChart() {
      if (this.$refs.lineCharts) {
        //echarts销毁实例
        echarts.dispose(this.$refs.lineCharts)
      }
      this.chart = echarts.init(this.$refs.lineCharts)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.days,   //获得x轴得数据
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '发送总量',
          type: 'line',
          stack: 'vistors',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: '#188df0' }
            ])
          },
          data: this.smsNum,    //获得y轴得数据
          animationDuration: 2000
        }]
      }
      this.chart.setOption(option)
    },

圆型图

条形图

饼图