echarts 超过预警值后节点变红预警
16lz
2021-04-22
<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script src="echarts.js" type="text/javascript"></script> <script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};var option;var actualData = [17, 8, 9, 10, 16, 15, 7]; //实际值var warningData = [10, 10, 10, 10, 10, 10, 10]; //预警值option = { tooltip: { trigger: 'axis', }, grid: [{ top: '10%', left: '30%', width: '50%', height: '40%', containLabel: false, }], xAxis: [{ type: 'category', name: '日期', data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], }], yAxis: [{ type: 'value', name: '温度', }], series: [{ name: '温度', type: 'line', symbolSize: 9, symbol: 'circle', //设定为实心点barWidth: 40, itemStyle: { normal: {//这里必须加normal,否者不显示夜色变化color: function(params) {//超过预警值显示红色if (actualData[params.dataIndex] > warningData[params.dataIndex]) {return 'red'; } else {return 'green'; } }, lineStyle: { color: 'green' //改变折线颜色 } } }, data: actualData } ] };if (option && typeof option === 'object') { myChart.setOption(option); }</script> </body></html>更多相关文章
- 情报研判可视化分析平台开发解决方案
- 控制流程系列教材 （二）- java的switch语句
- 红帽认证RHCE顺利通过，学习笔记多图预警！
- Python爬取酷狗音乐-详解(多图预警)
- Docker | 多图预警 | 配置Docker下Python开发环境
- HTML中表格和表单的应用实例 (MD)
- HTML中表格和表单的应用实例
- 第二天作业(课程表)
- php学习日记——课程表