Echarts分段折线图图例样式visualMap颜色修改

Myth丶恋晨 2022-12-24 01:00 724阅读 0赞

![ff8909a3e2d0e1e37b1b0ade3000e455.png][]

textStyle: { //图例文字的样式
                                color: '#fff',
                                fontSize: 16
    },

<!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>
                // 折线图
                $.ajax({
                    url: "test.json",
                    data: {},
                    type: 'GET',
                    success: function(data) {
                        console.log(JSON.stringify(data))
                        hrFun(data.echatX, data.echatY);
                    },
                });
    
    
                var myChart = echarts.init(document.getElementById("main"));
    
                function hrFun(x_data, y_data) {
                    myChart.setOption(option = {
                        title: {
                            text: 'Beijing AQI'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            data: x_data
                        },
                        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,
                            textStyle: { //图例文字的样式
                                color: '#fff',
                                fontSize: 16
                            },
                            pieces: [{
                                gt: 0,
                                lte: 1,
                                label: '活动',
                                color: '#096'
                            }, {
                                gt: 1,
                                lte: 2,
                                label: '浅睡',
                                color: '#ffde33'
                            }, {
                                gt: 2,
                                lte: 3,
                                label: '深睡',
                                color: '#ff9933'
                            }, {
                                gt: 3,
                                lte: 4,
                                label: '熟睡',
                                color: '#cc0033'
                            }],
                            outOfRange: {
                                color: '#999'
                            }
                        },
                        series: {
                            name: '睡眠状态',
                            type: 'line',
                            data: y_data,
                            //虚线
                            // markLine: {
                            //     silent: true,
                            //     data: [{
                            //         yAxis: 1
                            //     }, {
                            //         yAxis: 2
                            //     }, {
                            //         yAxis: 3
                            //     }, {
                            //         yAxis: 4
                            //     }]
                            // }
                        }
                    });
                }
            </script>
        </body>
    </html>

json数据  
格式是数组对象的时候

{
        "echatX": ["2020-11-17 14:47:18", "2020-11-17 14:49:44", "2020-11-17 14:52:11", "2020-11-17 14:54:36",
            "2020-11-17 14:57:01", "2020-11-17 14:59:28", "2020-11-17 15:01:55", "2020-11-17 15:04:23", "2020-11-17 15:06:51",
            "2020-11-17 15:09:20", "2020-11-17 15:11:44", "2020-11-17 15:14:10", "2020-11-17 15:16:38", "2020-11-17 15:19:01",
            "2020-11-17 15:21:26", "2020-11-17 15:23:53", "2020-11-17 15:26:20", "2020-11-17 15:28:47", "2020-11-17 15:31:14",
            "2020-11-17 15:33:41", "2020-11-17 15:36:09", "2020-11-17 15:38:38", "2020-11-17 15:41:07", "2020-11-17 15:43:35",
            "2020-11-17 15:46:01", "2020-11-17 15:48:25", "2020-11-17 15:50:52", "2020-11-17 15:53:20", "2020-11-17 15:55:55",
            "2020-11-17 15:58:35", "2020-11-17 16:01:04", "2020-11-17 16:01:19", "2020-11-17 16:03:49", "2020-11-17 16:04:05",
            "2020-11-17 16:06:34", "2020-11-17 16:06:50", "2020-11-17 16:09:17", "2020-11-17 16:09:32", "2020-11-17 16:11:56",
            "2020-11-17 16:12:13", "2020-11-17 16:14:38", "2020-11-17 16:14:54", "2020-11-17 16:17:20", "2020-11-17 16:17:37",
            "2020-11-17 16:20:02", "2020-11-17 16:20:18", "2020-11-17 16:22:51", "2020-11-17 16:23:10", "2020-11-17 16:25:43",
            "2020-11-17 16:26:00", "2020-11-17 16:28:26", "2020-11-17 16:28:43", "2020-11-17 16:31:07", "2020-11-17 16:31:24",
            "2020-11-17 16:33:58", "2020-11-17 16:34:17"
        ],
        "echatY": [1, 1, 1, 1, 1, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
            3, 2, 2, 2, 2, 2, 2, 4, 4, 4, 4, 4, 4, 3, 3, 4, 4, 4, 4
        ],
        "echatY2": null
    }

![e59a46fa4e580c423d495f54cd94ad7b.png][]

[ff8909a3e2d0e1e37b1b0ade3000e455.png]: /images/20221120/7a21f76f3da94d29839bfc4cfbf93e07.png
[e59a46fa4e580c423d495f54cd94ad7b.png]: /images/20221120/00c1fdc619d94a9e83dcd81be5847889.png