echarts绘制自定义提示的环形图、折线图及y轴柱状图

1、自定义提示的环形图

 效果：

      this.ring_dom = this.$refs.ring
      const myRing = this.$echarts.init(this.ring_dom)
      let total
      this.total < 10 ? (total = ' ' + this.total) : (total = this.total)
      const option = {
        //显示在环形内的文字
        title: {
          text: total + '%', //主标题文本
          //偏移位置
          left: '73%',
          top: '40%',
          textStyle: {
            fontSize: 24,
            fontFamily: 'Source Han Sans CN',
            color: '#2E2E2E',
            align: 'center'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '15%',
          orient: 'vertical',
          left: 'left',
          show: false
        },
        series: [
          {
            type: 'pie',
            //定义环的大小
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            color: this.cardColor,
            //自定义提示设置
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>SKU：{c}个<br/>占比：{d}%',
              backgroundColor: '#677181',
              textStyle: {
                fontSize: 14,
                fontWeight: 300,
                color: '#FFFFFF',
                lineHeight: 14
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '13',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.ringData,
            center: ['80%', '50%']
          }
        ]
      }
      option && myRing.se