• echarts中markArea中文字现实的配置(见注释)


    echarts中markArea中文字现实的配置(见注释):

    option = {
        "tooltip": {
            "trigger": "axis",
            "axisPointer": {
                "type": "cross",
                "label": {
                    "backgroundColor": "#283b56"
                }
            }
        },
        "grid": {
            "top": "5%",
            "left": "5%",
            "right": "5%",
            "bottom": "25%"
        },
        "xAxis": [{
            "type": "category",
            "data": ["04-17", "04-18", "04-19", "04-20", "04-21", "04-22"],
            "axisLine": {
                "lineStyle": {
                    "color": "#fff"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#333"
                }
            }
        }, {
            "show": false,
            "type": "category",
            "data": ["2019-04-17 09", "2019-04-17 10", "2019-04-17 11", "2019-04-17 12", "2019-04-17 13", "2019-04-17 14", "2019-04-17 15", "2019-04-17 16", "2019-04-17 17", "2019-04-17 18", "2019-04-17 19", "2019-04-17 20", "2019-04-17 21", "2019-04-17 22", "2019-04-17 23", "2019-04-18 00", "2019-04-18 01", "2019-04-18 02", "2019-04-18 03", "2019-04-18 04", "2019-04-18 05", "2019-04-18 06", "2019-04-18 07", "2019-04-18 08", "2019-04-18 09", "2019-04-18 10", "2019-04-18 11", "2019-04-18 12", "2019-04-18 13", "2019-04-18 14", "2019-04-18 15", "2019-04-18 16", "2019-04-18 17", "2019-04-18 18", "2019-04-18 19", "2019-04-18 20", "2019-04-18 21", "2019-04-18 22", "2019-04-18 23", "2019-04-19 00", "2019-04-19 01", "2019-04-19 02", "2019-04-19 03", "2019-04-19 04", "2019-04-19 05", "2019-04-19 06", "2019-04-19 07", "2019-04-19 08", "2019-04-19 09", "2019-04-19 10", "2019-04-19 11", "2019-04-19 12", "2019-04-19 13", "2019-04-19 14", "2019-04-19 15", "2019-04-19 16", "2019-04-19 17", "2019-04-19 18", "2019-04-19 19", "2019-04-19 20", "2019-04-19 21", "2019-04-19 22", "2019-04-19 23", "2019-04-20 00", "2019-04-20 01", "2019-04-20 02", "2019-04-20 03", "2019-04-20 04", "2019-04-20 05", "2019-04-20 06", "2019-04-20 07", "2019-04-20 08", "2019-04-20 09", "2019-04-20 10", "2019-04-20 11", "2019-04-20 12", "2019-04-20 13", "2019-04-20 14", "2019-04-20 15", "2019-04-20 16", "2019-04-20 17", "2019-04-20 18", "2019-04-20 19", "2019-04-20 20", "2019-04-20 21", "2019-04-20 22", "2019-04-20 23", "2019-04-21 00", "2019-04-21 01", "2019-04-21 02", "2019-04-21 03", "2019-04-21 04", "2019-04-21 05", "2019-04-21 06", "2019-04-21 07", "2019-04-21 08", "2019-04-21 09", "2019-04-21 10", "2019-04-21 11", "2019-04-21 12", "2019-04-21 13", "2019-04-21 14", "2019-04-21 15", "2019-04-21 16", "2019-04-21 17", "2019-04-21 18", "2019-04-21 19", "2019-04-21 20", "2019-04-21 21", "2019-04-21 22", "2019-04-21 23", "2019-04-22 00", "2019-04-22 01", "2019-04-22 02", "2019-04-22 03", "2019-04-22 04", "2019-04-22 05", "2019-04-22 06", "2019-04-22 07", "2019-04-22 08", "2019-04-22 09"]
        }],
        "yAxis": {
            "type": "value",
            "name": "(万KW)",
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#333"
                }
            },
            "axisTick": {
                "show": false
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": "#fff",
                    "width": 2
                }
            },
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#9DAAD5",
                    "width": 2
                }
            }
        },
        "visualMap": [{
            "show": false,
            "dimension": 0,
            "seriesIndex": 0,
            "pieces": [{
                "lte": 2,
                "color": "rgba(255, 153, 153, 1)"
            }, {
                "gt": 2,
                "lte": 8,
                "color": "rgba(1, 149, 211, 1)"
            }]
        }, {
            "show": false,
            "dimension": 0,
            "seriesIndex": 1,
            "pieces": [{
                "lte": 72,
                "color": "rgba(255, 153, 153, 1)"
            }, {
                "gt": 72,
                "lte": 192,
                "color": "rgba(1, 149, 211, 1)"
            }]
        }],
        "series": [{
            "name": "AQI",
            "type": "bar"
        }, {
            "xAxisIndex": 1,
            "data": ["66", "61", "60", "59", "61", "59", "72", "74", "73", "63", "61", "74", "85", "87", "90", "93", "93", "95", "95", "92", "88", "89", "93", "102", "89", "77", "66", "61", "60", "56", "58", "74", "87", "70", "77", "82", "77", "65", "62", "60", "62", "68", "68", "73", "72", "65", "60", "55", "33", "55", "66", "-", "-", "-", "-", "88", "50", "60", "60", "70", "55", "100", "111", "122", "33", "213", "122", "56", "78", "88", "67", "77", "22", "33", "56", "55", "78", "87", "56", "33", "79", "93", "66", "88", "99", "200", "33", "66", "35", "67", "89", "93", "77", "", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"],
            "type": "line",
            "smooth": true,
            "markArea": {
                "data": [
                    [{
                        "name": "测试markArea001",
                        "itemStyle": {
                            "color": "rgba(255, 0, 0, 0.05)"
                        },
                        "label":{
                            "show": true,
                            "position": "insideBottom", // markArea中文字(name)位置
                            "offset": [0, -40], // markArea中文字(name)显示在位置基础上x、y轴偏移
                            "color": "#ff0000" // markArea中文字(name)颜色
                        }
                    }, {
                        "xAxis": "2019-04-19 09"
                    }],
                    [{
                        "name": "测试markArea002",
                        "xAxis": "2019-04-19 09",
                        "itemStyle": {
                            "color": "rgba(51, 153, 255, 0.05)"
                        }
                    }, {}]
                ]
            }
        }]
    }
  • 相关阅读:
    夺命雷公狗---node.js---2node.js中的npm的常用命令
    nginx安装目录
    linux下安装nginx
    mui实现推送功能
    SpringBoot WebSocket实现
    发送短信验证码
    Vue在HTML页面中的脚手架
    SpringBoot邮件发送功能
    毕业设计功能
    毕业设计数据库
  • 原文地址:https://www.cnblogs.com/qtx-/p/11698049.html
Copyright © 2020-2023  润新知