| Echarts 做的温度计 | 您所在的位置：网站首页 › 体温检测统计图怎么画 › Echarts 做的温度计 |
Echarts 做的温度计
|
这个是参考的：https://blog.csdn.net/soldierofyou/article/details/82661263 这位大神是首发，谢谢了！我做了小小的调整 温度计 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main11')); var TP_value = 95; var kd = []; var Gradient = []; var leftColor = ''; var showValue = ''; var boxPosition = [65, 0]; var TP_txt = '' // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据 for(var i = 0, len = 135; i 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 > 80) { TP_txt = '温度偏高'; Gradient.push({ offset: 0, color: '#93FE94' }, { offset: 0.5, color: '#E4D225' }, { offset: 1, color: '#E01F28' }) } else if(TP_value > 10) { 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 var option = { backgroundColor: '#098', title: { text: '温度计', show: false }, yAxis: [{ show: false, data: [], min: 0, max: 135, axisLine: { show: false } }, { show: false, min: 0, max: 50, }, { type: 'category', data: ['', '', '', '', '', '', '', '', '', '', '°C'], position: 'left', offset: -80, axisLabel: { fontSize: 10, 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: (TP_value + 10),//这个改那个颜色刻度的 label: { normal: { show: true, position: boxPosition, /*backgroundColor: { image: 'plugin/subway_beijing/images/power/bg5Valuebg.png',//文字框背景图 },*/ width: 40, height: 100, formatter: '{back| ' + TP_value + ' }{unit|°C}\n{downTxt|' + TP_txt + '}', rich: { back: { align: 'center', lineHeight: 50, fontSize: 40, fontFamily: 'digifacewide', color: leftColor }, unit: { fontFamily: '微软雅黑', fontSize: 15, lineHeight: 50, color: leftColor }, downTxt: { lineHeight: 50, fontSize: 25, align: 'center', color: '#fff' } } } } }], barWidth: 18, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient) } }, z: 2 }, { name: '白框', type: 'bar', xAxisIndex: 1, barGap: '-100%', data: [134], barWidth: 28, itemStyle: { normal: { color: '#0C2E6D', barBorderRadius: 50, } }, z: 1 }, { name: '外框', type: 'bar', xAxisIndex: 2, barGap: '-100%', data: [135], barWidth: 38, itemStyle: { normal: { color: '#4577BA', barBorderRadius: 50, } }, z: 0 }, { name: '圆', type: 'scatter', hoverAnimation: false, data: [0], xAxisIndex: 0, symbolSize: 48, itemStyle: { normal: { color: '#93FE94', opacity: 1, } }, z: 2 }, { name: '白圆', type: 'scatter', hoverAnimation: false, data: [0], xAxisIndex: 1, symbolSize: 60, itemStyle: { normal: { color: '#0C2E6D', opacity: 1, } }, z: 1 }, { name: '外圆', type: 'scatter', hoverAnimation: false, data: [0], xAxisIndex: 2, symbolSize: 70, itemStyle: { normal: { color: '#4577BA', opacity: 1, } }, 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 if((params.dataIndex - 10) % 20 === 0) { return params.dataIndex - 10;//这个改刻度的，当减70的时候刻度是从-60开始不是从零开始 } else { return ''; } } } } }, barGap: '-100%', data: kd, barWidth: 1, itemStyle: { normal: { color: 'white', barBorderRadius: 120, } }, z: 0 }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); **1.温度计的刻度 目前不需要负数 该如何修改？** if(params.dataIndex > 130 || params.dataIndex ; 10) { return ''; } else { if((params.dataIndex - 10) === 0) { return params.dataIndex - 70; } else { return ''; } } }把-70改成-10，就是从0开始的刻度了 2.你要改上面的东西对应的这里要改 series: [{ name: '条', type: 'bar', // 对应上面XAxis的第一个对)象配置 xAxisIndex: 0, data: [{ value: (TP_value + 10),//这个改那个颜色刻度的 label: { normal: { show: true,我把上面的那个data里的value:(showValue + 10)改为value:(TP_value + 10) 了就可以控制那个刻度上升了，还有就是我把showValue 相关的注释了 这个是参考的：https://blog.csdn.net/soldierofyou/article/details/82661263 这位大神是首发，谢谢了！我做了小小的调整 |
这是我的项目中的截图：
【本文地址】
公司简介
联系我们