Echarts折线图分段用不同颜色显示

你的名字 2022-12-24 01:00 409阅读 0赞

json格式是数组的时候

[
        ["2000-06-05", 116],
        ["2000-06-06", 129],
        ["2000-06-07", 135],
        ["2000-06-08", 86],
        ["2000-06-09", 73],
        ["2000-06-10", 85],
        ["2003-11-29", 159],
        ["2003-11-30", 147],
        ["2003-12-01", 153],
        ["2003-12-02", 135],
        ["2003-12-03", 99],
        ["2003-12-04", 92],
        ["2003-12-05", 109],
        ["2003-12-06", 99], 
        ["2003-12-07", 300],
        ["2003-12-08", 330],
        ["2003-12-09", 33],
        ["2003-12-10", 32],
        ["2003-12-11", 31],
        ["2015-02-24", 207]
    ]

代码：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        </head>
        <body>
            
            <div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>
            <script>
                $.get('test.json', function (data) {
                    var myChart = echarts.init(document.getElementById("main"));
                    myChart.setOption(option = {
                        title: {
                            text: 'Beijing AQI'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            data: data.map(function (item) {
                                return item[0];
                            })
                        },
                        yAxis: {
                            splitLine: {
                                show: false
                            }
                        },
                        toolbox: {
                            left: 'center',
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        dataZoom: [{
                            startValue: '2014-06-01'
                        }, {
                            type: 'inside'
                        }],
                        visualMap: {
                            top: 10,
                            right: 10,
                            pieces: [{
                                gt: 0,
                                lte: 50,
                                color: '#096'
                            }, {
                                gt: 50,
                                lte: 100,
                                color: '#ffde33'
                            }, {
                                gt: 100,
                                lte: 150,
                                color: '#ff9933'
                            }, {
                                gt: 150,
                                lte: 200,
                                color: '#cc0033'
                            }, {
                                gt: 200,
                                lte: 300,
                                color: '#660099'
                            }, {
                                gt: 300,
                                color: '#7e0023'
                            }],
                            outOfRange: {
                                color: '#999'
                            }
                        },
                        series: {
                            name: 'Beijing AQI',
                            type: 'line',
                            data: data.map(function (item) {
                                return item[1];
                            }),
                            markLine: {
                                silent: true,
                                data: [{
                                    yAxis: 50
                                }, {
                                    yAxis: 100
                                }, {
                                    yAxis: 150
                                }, {
                                    yAxis: 200
                                }, {
                                    yAxis: 300
                                }]
                            }
                        }
                    });
                });
            </script>
        </body>
    </html>

![52a7e45953c7dc78ce9433af4fae13f1.png][]

[52a7e45953c7dc78ce9433af4fae13f1.png]: /images/20221120/eac4505ec3874ce5b24c9c663c9b788d.png