<!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%', '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>