<!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>