echarts图表，利用仪表盘类型变换成环形渐变图

 使用仪表盘类型图表type:"gauge"变换成以上图片样式，实现环形图的渐变以及背景环

1.计算当前数据占总数的比例，从而得出当前环开始角度和结束角度，目前上图中开始角度都是0，结束角度通过数据占比得到 当前数据/三个数和*360 得到结束角度

2.利用角度计算出环形的渐变参数

代码过程：

1.新建vue文件gauge.vue

html:

<template>
  <div ref="chart" :id=chartID></div>
</template>

js代码：

export default {
  props: {
    id: {type: String, default: "gauge_line"}, // id名称
    processData: {
      type: Object, default: function () {
        return {
          tieleFontSize: 22,//标题文字大小
          labelfontSize: 22,//lable标签文字大小
          name:'',
          value:0,
          valueColor:'#ffffff',
          colorArr: [
            [
              {offset: 0, color: "#C0CDFF"},
              {offset: 1, color: "#156BFF"},

            ],
            [
              {offset: 0, color: "rgba(243,237,153,0)"},
              {offset: 1, color: "rgba(243,237,153,1)"}
            ],
            [
              {offset: 0, color: "rgba(140,181,255,0)"},
              {offset: 1, color: "rgba(140,181,255,1)"}
            ],
            [
              {offset: 0, color: "rgba(140,181,255,0)"},
              {offset: 1, color: "rgba(140,181,255,1)"}
            ],

          ],
        }
      }
    },
    max: {type: Number, default: 100}, // 最大值,也就是三个数据的和
  },
  data () {
    return {
      chartID: this.id + "_chart",
      myChart: null
    }
  },
  mounted () {

    //this.myChart.setOption(this.option)
  },
  methods:{
    initChart() {
      this.myChart = this.$echarts.init(document.getElementById(this.chartID));
      var angle = this.processData.value / this.max * 360;  // 计算当前数据项对应的角度
      let direction = this.getCoordinates(0, angle)
      let color = {
        type: 'linear',
        /*x:0,
        x1:0,
        y:0,
        y1:0,*/
        ...direction,
        colorStops: this.processData.colorArr[0]
      }
      this.myChart.setOption({
        series: [
          {
            type: 'gauge',
            splitNumber: 1,
            startAngle: 0,
            endAngle:360,
            max:this.max,
            radius: "100%",
            color:[color],
            center: ['50%', '50%'],
            progress: {
              show: true,
              roundCap:true,
              width: 20
            },
            axisLine: {
              lineStyle: {
                color: [[1, '#F2F6FB']],
                width: 20,
                opacity: 0.1,
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 20,
              distance: -20,
              lineStyle: {
                width: 2
              }
            },
            axisLabel: {
              show: false
            },
            anchor: {
              show: false
            },
            pointer: {
              show: false
            },
            title: {
              show: true,
              color: "#fff",
              fontSize: this.processData.tieleFontSize,
              fontFamily:"微软雅黑",
              offsetCenter: [0, '30%'],
            },
            detail: {
              valueAnimation: true,
              fontSize: 40,
              color: "#BCCAFF",
              fontFamily:"AGENCYB",
              offsetCenter: [0, "-10%"],
              //formatter: "{value}%",
              //formatter: "{a|value}{b|件}",
              formatter:function (param) {
                return "{a|"+param+"}{b|件}"
              },
              rich: {
                a: {
                  fontSize: this.processData.labelfontSize,
                  fontFamily:"AGENCYB",
                  color: this.processData.valueColor,
                },
                b: {
                  fontSize: 16,
                  fontFamily:"AGENCYB",
                  color: "#BED2FF",
                },}
            },
            data: [{
              value: this.processData.value,
              name: this.processData.name
            }]
          }
        ]
      })

    },
    getCoordinates(startArc, endArc) {
      const posi = [
        Math.sin(startArc),
        -Math.cos(startArc),
        Math.sin(endArc),
        -Math.cos(endArc)
      ]
      const dx = posi[2] - posi[0]
      const dy = posi[3] - posi[1]
      return this.getLocation(dx, dy)
    },
    getLocation(dx, dy) {
      const tanV = dx / dy
      const directSign = Math.abs(tanV) < 1
      const t = directSign ? tanV : 1 / tanV

      const sign1 = t > 0 ? 1 : -1
      const sign2 = dx > 0 ? 1 : -1
      const sign = directSign ? sign1 * sign2 : sign2

      const group1 = [0.5 - sign * t / 2, 0.5 + sign * t / 2]
      const group2 = sign > 0 ? [0, 1] : [1, 0]
      const group = [...group1, ...group2]
      const keys = directSign ? ['x', 'x2', 'y', 'y2'] : ['y', 'y2', 'x', 'x2']

      let res = {}
      keys.forEach((k, idx) => {
        res[k] = group[idx]
      })
      return res
    },
  },
  beforeDestroy() {
    if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
      this.myChart.dispose();
    }
    this.myChart=null
  },
  
}

2.将以上文件引入需要使用的页面

 import gaugeComponent from "./components/gauge";

<gaugeComponent ref="stageCaseGauge1" style="flex-grow:1;flex-basis:0;" :processData=stageCase_processData1  :id="'gauge1'" :max="gaugeMax"></gaugeComponent>

<gaugeComponent ref="stageCaseGauge2" style="flex-grow:1;flex-basis:0;" :processData=stageCase_processData2 :id="'gauge2'" :max="gaugeMax"></gaugeComponent>

<gaugeComponent ref="stageCaseGauge3" style="flex-grow:1;flex-basis:0;" :processData=stageCase_processData3 :id="'gauge3'" :max="gaugeMax"></gaugeComponent>

使用文件中data定义以下图表参数

stageCase_processData1:{
        tieleFontSize: 26,//标题文字大小
        labelfontSize: 40,//lable数字大小
        name:'测试1', //仪表盘 name 会被放在title位置
        value:981,
        valueColor:'#BCCAFF',
        colorArr: [
          [
            {offset: 0, color: "#156BFF"},
            {offset:1, color: "#C0CDFF"},
          ],
         ]
      },
      stageCase_processData2:{
        title: "",  //标题
        tieleFontSize: 26,//标题文字大小
        labelfontSize: 40,//lable数字大小
        name:'测试2',
        value:1921,
        valueColor:'#EEFBF9',
        colorArr: [
          [
            {offset: 0, color: "#009984"},
            {offset: 1, color: "#F9FFFE"},
          ],
        ]
      },
      stageCase_processData3:{
        tieleFontSize: 26,//标题文字大小
        labelfontSize: 40,//lable数字大小
        name:"测试3",
        value:1213,
        valueColor:'#EFFFC3',
        colorArr: [
          [
            {offset: 0, color: "#56E400"},
            {offset: 1, color: "#F6FFC8"},
          ],
        ]
      },

 gaugeMax参数为三个数据的和用来作为圆环的最大值 

3.执行初始化函数

this.$refs.stageCaseGauge1.initChart()
this.$refs.stageCaseGauge2.initChart()
this.$refs.stageCaseGauge3.initChart()