image.png

  
    var params = {
      value: 61,//數(shù)值
      title: "當(dāng)前溫度"
    }
 
    var TP_value = params.value;
    var kd = [];
    var Gradient = [];
    var leftColor = '';
    var boxPosition = [65, 0];
    var TP_txt = ''
    // 刻度使用柱狀圖模擬元镀，短設(shè)置1，長的設(shè)置3霎桅；構(gòu)造一個數(shù)據(jù)
    for (let i = 0, len = 110; i <= len; i ++) {
        if (i < 10) {
            kd.push('');
        } else if ((i - 10) % 10 === 0) {
            kd.push('3');
        } else {
            kd.push('1');
        }
    }
    //中間線的漸變色和文本內(nèi)容
    if (TP_value > 50) {
      TP_txt = '';
      Gradient.push({
        offset: 0,
        color: '#93FE94'
      }, {
        offset: 0.5,
        color: '#E4D225'
      }, {
        offset: 1,
        color: '#E01F28'
      })
    } else if (TP_value >= 35) {
      TP_txt = '';
      Gradient.push({
        offset: 0,
        color: '#93FE94'
      }, {
        offset: 1,
        color: '#E4D225'
      })
    } else {
      TP_txt = '';
      Gradient.push({
        offset: 1,
        color: '#93FE94'
      })
    }
 
    leftColor = Gradient[Gradient.length - 1].color;
    // 因?yàn)橹鶢畛跏蓟癁?栖疑，溫度存在負(fù)值，所以加上負(fù)值60和空出距離10
    var option = {
      title: {
        text: params.value + '℃',
        subtext: params.title,
        left: "20%",
        top: "center",
        textStyle: {
          fontSize: 30,
          color: '#fff'
        },
        subtextStyle: {
          fontSize: 20,
          color: '#fff'
        }
      },
      grid: { // 控制圖的大小滔驶，調(diào)整下面這些值就可以遇革，
        left: "30%",
        top: "3%",
        bottom: "14%",
      },
      yAxis: [{
        show: false,
        data: [],
        min: 0,
        max: 110,
        axisLine: {
          show: false
        }
      }, {
        show: false,
        min: 0,
        max: 100,
      }, {
        type: 'category',
        data: ['', '', '', '', '', '', '', '', '', ''],
        position: 'left',
        offset: -80,
        axisLabel: { // 單位
          fontSize: 10,
          color: 'black'
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      }],
 
      xAxis: [{
        show: false,
        min: -10,
        max: 80,
        data: []
      }, {
        show: false,
        min: -10,
        max: 80,
        data: []
      }, {
        show: false,
        min: -10,
        max: 80,
        data: []
      }, {
        show: false, // 刻度線
        min: -20,
        max: 80,
 
      }],
      series: [{
        name: '條',
        type: 'bar',
        // 對應(yīng)上面XAxis的第一個對象配置
        xAxisIndex: 0,
        data: [{
          value: (TP_value + 10),//這個改那個顏色刻度的
        }],
 
        barWidth: 18,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)
          }
        },
        z: 2
      }, {
        name: '白框',
        type: 'bar',
        xAxisIndex: 1,
        barGap: '-100%',
        data: [109],
        barWidth: 18,
        itemStyle: {
          normal: {
            color: '#0C2E6D',
            barBorderRadius: 50,
          }
        },
        z: 1
      }, {
        name: '外框',
        type: 'bar',
        xAxisIndex: 2,
        barGap: '-100%',
        data: [110],
        barWidth: 28,
        itemStyle: {
          normal: {
            color: '#4577BA',
            barBorderRadius: 50,
          }
        },
        z: 0
      }, {
        name: '圓',
        type: 'scatter',
        hoverAnimation: false,
        data: [0],
        xAxisIndex: 0,
        symbolSize: 38,
        itemStyle: {
          normal: {
            color: '#93FE94',
            opacity: 1,
          }
        },
        z: 2
      }, {
        name: '白圓',
        type: 'scatter',
        hoverAnimation: false,
        data: [0],
        xAxisIndex: 1,
        symbolSize: 50,
        itemStyle: {
          normal: {
            color: '#0C2E6D',
            opacity: 1,
          }
        },
        z: 1
      }, {
        name: '外圓',
        type: 'scatter',
        hoverAnimation: false,
        data: [0],
        xAxisIndex: 2,
        symbolSize: 60,
        itemStyle: {
          normal: {
            color: '#4577BA',
            opacity: 1,
          }
        },
        z: 0
      }, {
        name: '刻度',
        type: 'bar',
        yAxisIndex: 0,
        xAxisIndex: 3,
        label: {
          normal: {
            show: true,
            position: 'right',
            distance: 5, // 刻度數(shù)據(jù)位置
            color: '#eee',// 刻度數(shù)字顏色
            fontSize: 14,
            formatter: function (params) {
              if (params.dataIndex > 110 || params.dataIndex < 10) {
                return '';
              } else {
                if ((params.dataIndex - 10) % 10 === 0) {
                  return params.dataIndex - 10;//這個改刻度的，當(dāng)減70的時候刻度是從-60開始不是從零開始
                } else {
                  return '';
                }
              }
            }
          }
        },
        barGap: '-100%',
        data: kd,
        barWidth: 1,
        itemStyle: {
          normal: {
            color: '#eee', // 刻度線顏色
            barBorderRadius: 120,
          }
        },
        z: 0
      }]
    };
 

參考文章：https://blog.csdn.net/focusmickey/article/details/109159832
https://blog.csdn.net/ying456baby/article/details/125068477