image.png

  
    var params = {
      value: 61,//数值
      title: "当前温度"
    }
 
    var TP_value = params.value;
    var kd = [];
    var Gradient = [];
    var leftColor = '';
    var boxPosition = [65, 0];
    var TP_txt = ''
    // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
    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');
        }
    }
    //中间线的渐变色和文本内容
    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;
    // 因为柱状初始化为0，温度存在负值，所以加上负值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: { // 控制图的大小，调整下面这些值就可以，
        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',
        // 对应上面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, // 刻度数据位置
            color: '#eee',// 刻度数字颜色
            fontSize: 14,
            formatter: function (params) {
              if (params.dataIndex > 110 || params.dataIndex < 10) {
                return '';
              } else {
                if ((params.dataIndex - 10) % 10 === 0) {
                  return params.dataIndex - 10;//这个改刻度的，当减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