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)"
                    }
                }, {}]
            ]
        }
    }]
}

 

posted on 2019-10-18 14:16  一抹阳光~  阅读(5358)  评论(0编辑  收藏  举报