Echarts实现量度计

最新推荐文章于 2024-09-14 16:14:50 发布

原创最新推荐文章于 2024-09-14 16:14:50 发布 · 413 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #js

使用Echarts实现简单的量度计

样式没调好，勉强有点样子吧。
在这里插入图片描述效果图(效果不太好/(ㄒoㄒ)/~~)

代码

下面直接上代码

var value = 42.0;
var kd = [];
// 刻度使用柱状图模拟，短设置2，长的设置4；构造一个数据
for (var i = 0, len = 130; i <= len; i++) {
    if (i > 100 || i < 30) {
        kd.push('0')
    } else {
        if (i % 5 === 0) {
            kd.push('4');
        } else {
            kd.push('2');
        }
    }
}
console.log(kd)
// 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
function getData(value) {
    return [value + 30];
}
var data = getData(value);
var mercuryColor = '#fd4d49';
var borderColor = '#fd4d49';

option = {
    title: {
        text: '温度计',
        show: false
    },
    yAxis: [{
        show: false,
        min: 0,
        max: 130,
    }, {
        show: false,
        data: [],
        min: 0,
        max: 130,
    }],
    xAxis: [{
        show: false,
        data: []
    }, {
        show: false,
        data: []
    }, {
        show: false,
        data: []
    }, {
        show: false,
        min: -110,
        max: 100,

    }],
    series: [{
        name: '条',
        type: 'bar',
        // 对应上面XAxis的第一个对象配置
        xAxisIndex: 1,
         yAxisIndex: 1,
        data: data,
        barWidth: 10,
        itemStyle: {
            normal: {
                color: mercuryColor,
                barBorderRadius: 0,
            }
        },
        label: {
            normal: {
                show: true,
                position: 'top',
                formatter: function(param) {
                    // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
                    return param.value - 30 + '°C';
                },
                textStyle: {
                    color: '#ccc',
                    fontSize: '10',
                }
            }
        },
        z: 2
    }, {
        name: '框',
        type: 'bar',
        yAxisIndex: 1,
        xAxisIndex:2 ,
        barGap: '100%',
        data: [130],
        barWidth: 35,
        itemStyle: {
            normal: {
                color: 'rgba(96,161,255,0.5)',
                barBorderRadius:0,
            }
        },
        z: 1
    },
    {
        name: '刻度',
        type: 'bar',
        yAxisIndex: 1,
        xAxisIndex: 3,
        label: {
            normal: {
                show: true,
                position: 'right',
                distance: 5,
                color: '#525252',
                fontSize: 10,
                formatter: function(params) {
                    // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
                    if (params.dataIndex > 100 || params.dataIndex < 30) {
                        return '';
                    } else {
                        if (params.dataIndex % 5 === 0) {
                            return params.dataIndex - 30;
                        } else {
                            return '';
                        }
                    }
                }
            }
        },
        barGap: '100%',
        data: kd,
        barWidth:1,
        itemStyle: {
            normal: {
                color: "#ffffff",
                barBorderRadius: 10,
            }
        },
        z: 0
    }]
};

这里是参考：https://www.makeapie.com/editor.html?c=xHJkoiH-_G

第二个

在这里插入图片描述效果

代码

var TP_value = 10;  // 温度
var kd = [];        // 刻度
var Gradient = [];  // 存放颜色的数组
var leftColor = ''; // 显示文本的颜色
var showValue = ''; // 显示内容 温度数字
var boxPosition = [65, 0];  // 显示内容的定位
var TP_txt = '';    // 显示内容 文本

// 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
for (var i = 0, len = 135; i <= len; i++) {
  if (i < 10 || i > 130) {
    kd.push('')
  } 
  else {
    if ((i - 10) % 20 === 0) {
      kd.push('-3');
    } 
    else if ((i - 10) % 4 === 0) {
      kd.push('-1');
    } 
    else {
      kd.push('');
    }
  }
}

//中间线的渐变色和文本内容
if (TP_value > 20) {
  TP_txt = '温度偏高';
  Gradient.push({
    offset: 0,
    color: '#93FE94'
  }, {
    offset: 0.5,
    color: '#E4D225'
  }, {
    offset: 1,
    color: '#E01F28'
  })
} 
else if (TP_value > -20) {
  TP_txt = '温度正常';
  Gradient.push({
    offset: 0,
    color: '#93FE94'
  }, {
    offset: 1,
    color: '#E4D225'
  })
} 
else {
  TP_txt = '温度偏低';
  Gradient.push({
    offset: 1,
    color: '#93FE94'
  })
}
if (TP_value > 62) {
  showValue = 62
} 
else {
  if (TP_value < -60) {
    showValue = -60
  } 
  else {
    showValue = TP_value
  }
}
// 避免温度过低 右侧指示内容出界
if (TP_value < -10) {
  boxPosition = [65, -120];
}

leftColor = Gradient[Gradient.length - 1].color;
// 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10


option = {

  title: {
    text: '温度计',
    show: true,
    textStyle: {
      color: '#fff'
    }
  },
  yAxis: [
    {
      show: false,
      data: [],
      min: 0,
      max: 135,
      axisLine: {
        show: false
      }
    }, 
    {
      show: false,
      min: 0,
      max: 50,
    }, 
    {
      type: 'category',
      data: ['', '', '', '', '', '', '', '', '', '', '°C'],
      position: 'left',
      offset: -150,
      axisLabel: {
        fontSize: 18,
        color: 'white'
      },
      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: -5,
      max: 80,
    }
  ],
  series: [{
    name: '条/温度计柱',
    type: 'bar',
    // 对应上面XAxis的第一个对象配置
    xAxisIndex: 0,
    data: [{
      value: (showValue + 70),
      label: {
        normal: {
          show: true,
          position: boxPosition,
            rich: {
            back: {
              align: 'right',
              lineHeight: 36,
              fontSize: 24,
              fontFamily: '微软雅黑',
              color: leftColor
            },
            unit: {
              align: 'right',
              fontFamily: '微软雅黑',
              fontSize: 14,
              lineHeight: 36,
              color: '#fff'
            },
            downTxt: {
              lineHeight: 36,
              fontSize: 24,
              align: 'right',
              color: leftColor
            }
          }
        }
      }
    }],
    barWidth: 20,
    itemStyle: {
      normal: {
        color: "#fd4d49",
        barBorderRadius: 0,
      }
    },
    z: 2
  }, {
    name: '外框',
    type: 'bar',
    xAxisIndex: 2,
    barGap: '-100%',
    data: [135],
    barWidth: 78,
    itemStyle: {
      normal: {
        color: 'rgba(96,161,255,0.4)',
        barBorderRadius: 0,
      }
    },
    z: 0
  },  
  {
    name: '刻度',
    type: 'bar',
    yAxisIndex: 0,
    xAxisIndex: 3,
    label: {
      normal: {
        show: true,
        position: 'left',
        distance: 10,
        color: 'white',
        fontSize: 14,
        formatter: function(params) {
          if (params.dataIndex > 130 || params.dataIndex < 10) {
            return '';
          } else {
            if ((params.dataIndex - 10) % 20 === 0) {
              return params.dataIndex - 70;
            } else {
              return '';
            }
          }
        }
      }
    },
    barGap: '-100%',
    data: kd,
    barWidth: 1,
    itemStyle: {
      normal: {
        color: 'white',
        barBorderRadius: 120,
      }
    },
    z: 0
  }]
};

> 这里是参考：https://www.makeapie.com/editor.html?c=xcOnRX6MzY