vue项目中echarts绘制环形图，每块区域实现渐变色，并自定义tooltips

echarts绘制环形图，每块区域实现渐变色，并自定义tooltips

第一步：安装echarts插件

npm install echarts --save

第二步：引入ECharts

import * as echarts from 'echarts';

第三步：基于准备好的dom，初始化echarts实例

<div id="main" style="width: 670px;height: 240px;"></div>

 methods: {
     initMyEchart(){
         let myChart = echarts.init(document.getElementById('main'));
     }
 }

第四步：绘制图表

data(){
    return {
        myChart:null,
    }
}
 methods: {
     initMyEchart(){
          this.myChart = echarts.init(
        document.getElementById('main')
      )
      let testArr=[{
        name:'测试1',
        value:10,
        colorList: ['#00E2D2', '#00DBC4']
      },{
        name:'测试2',
        value:20,
        colorList: ['#6BCFFF', '#328BFF']
      }
    ]
      let data = []
      let data2 = []
      for (var i = 0; i < testArr.length; i++) {
        data.push({
          value: testArr[i].value,
          name: testArr[i].name,
          itemStyle: {
            borderWidth: this.fontSize(0.16),
            // shadowBlur: 20,
            borderRadius: this.fontSize(0.4),
            borderColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: testArr[i].colorList[0]
              }, {
                offset: 1, color: testArr[i].colorList[1]
              }],
              global: false

            }
            // shadowColor: ''
          }
        }, {
          value: 1,
          name: '',
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0
          }
        }
        )
        data2.push({
          value: testArr[i].value,
          name: testArr[i].name,
        },
          {
            value: 1,
            name: '',
            itemStyle: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
              opacity: 0.2
            }
          }
        )
      }
      const option = {
        backgroundColor: 'transparent',
        color: testArr[0].colorList,
        grid: {
          top: '0%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          //是否将 tooltip 框限制在图表的区域内。
          borderWidth: 0, // 设置边框宽度为0，即去掉边框
          axisPointer: {
            lineStyle: {
              color: '#ff7b50'
            }
          },
          confine: true,
          // borderWidth: 0,
          trigger: 'item',
          showContent: true,
          padding: this.fontSize(0.3),
          className: 'echarts-tooltip echarts-tooltip-dark',
          backgroundColor: 'rgba(50,50,50,0.0)', // 提示框浮层的背景颜色
          textStyle: {
            color: '#fff',
          },
          formatter: function (params) {
            console.log(params, '---')
            // 提示框箭头添加
            let triangle = `<div style='position: absolute;transform: rotate(25deg); width: 0;height: 0;border-top: 34px solid #ff7c50;border-right: 15px solid transparent;border-left: 15px solid transparent;left: -21px;bottom: -63%;z-index: -1;'></div>`

            let tempStr = `<div style='font-size:10px;color:#fff;font-family: PF;font-weight: 500;position: relative;'>`
            let tempStrT = `<div style='font-size:12px;'>${params.name}</div>`
            let str = ''
            // str += `<div><span style='margin-right:20px'>成本金额</span><span style="font-family: DIN;">${params.value.toFixed(2)}</span></div>`
            str += `<div><span style='margin-right:45px'>占比</span><span style="font-family: DIN;">${((params.percent )).toFixed(2) + '%'}</span></div>`
            str = str + `</div>`
            // return tempStr+triangle + tempStrT + str;
            return tempStr + tempStrT + str
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['87%', '82%'],
            //  hoverAnimation: false,
            center: ['44%', '50%'],
            top: '0%',
            bottom: '0%',
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              }
            },
            data: data
          },
        ]
      }
      option && this.myChart.setOption(option)
      window.addEventListener('resize', this.handle)    
    },
  handle() {
      this.myEChart.resize()
    },
      //获取屏幕宽度并计算比例 适配echarts图表
    fontSize(res) {
      let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      if (!clientWidth) return
      let fontSize = 100 * (clientWidth / 750)
      return res * fontSize
    },
 }, 
beforeDestroy() {
    if (this.myEChart) {
      this.myEChart.dispose()
      this.myEChart = null
    }