1小时做的echarts柱形图(不同类不同颜色、图例、自动隐藏单独显示)


echarts绘制柱图如何改变每个柱子的颜色（不同类，不同颜色）
echarts X轴强制全部显示配置
Echarts调整X轴字体大小
legend
legend显示
legend例子
在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!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 type="text/javascript" src="//i2.wp.com/cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
<script type="text/javascript" src="//i2.wp.com/cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="//i2.wp.com/cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
<script type="text/javascript" src="//i2.wp.com/cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="//i2.wp.com/cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
<script type="text/javascript" src="//i2.wp.com/cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
<script type="text/javascript" src="//i2.wp.com/api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="//i2.wp.com/cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {<!-- -->};
    //var color = ['#003366','#4cabce', '#e5323e']
    option = null;
    option = {<!-- -->
        title: {<!-- -->
            text: '每日伪基站发送的垃圾信息数量',
            subtext: '(2017-02-23至2017-04-26)'
        },
        legend: {<!-- -->
            data: ['2月', '3月','4月']
        },
        xAxis: {<!-- -->
            type: 'category',
            axisLabel :{<!-- -->
                interval:0,
                fontSize:'14'
            },
            data: [
                '1','2','3','4','5','6','7','8','9',
                '10','11','12','13','14','15','16','17','18','19',
                '20','21','22','23','24','25','26','27','28','29',
                '30','31']
        },
        yAxis: {<!-- -->
            type: 'value'
        },
        series: [
            {<!-- -->
                name: '2月',
                type: 'bar',
                data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,144121, 56277, 45420, 51751, 25166, 67594],
                itemStyle:{<!-- -->
                    normal: {<!-- -->
                        color: '#003366'
                    }
                }
            }, {<!-- -->
                name: '3月',
                type: 'bar',
                data: [43889, 30344, 39255, 281854, 133672, 24693, 19135, 23386,
                      17024, 21532, 17292, 14900, 15254, 14086, 13532, 28642,
                      33121, 31019, 39865, 46824, 55214, 70324, 63905, 87531,
                      41784, 46541, 75593, 68908, 70322, 57339, 56828],
                itemStyle:{<!-- -->
                    normal: {<!-- -->
                        color: '#4cabce'
                    }
                }
            }, {<!-- -->
                name: '4月',
                type: 'bar',
                data: [55230, 19494, 15818, 16426, 43331, 55753, 60860, 45072,
                    45762, 67472, 68586, 65249, 73999, 75482, 47259, 51324,
                    86717, 77395, 73766, 77073, 65322, 34892, 33237, 47555,
                    47261, 34383],
                itemStyle: {<!-- -->
                    normal: {<!-- -->
                        color: '#e5323e'
                    }
                }
            }],
            // type: 'bar',
            // showBackground: true,
            // backgroundStyle: {<!-- -->
            //     color: 'rgba(220, 220, 220, 0.8)'
            // }
            // itemStyle:{<!-- -->
            //
            //     // color:function(p){<!-- -->
            //     //     if(p.dataIndex<=5)
            //     //         return color[0]
            //     //     else if(p.dataIndex>5&&[p.dataIndex]<=36)
            //     //         return color[1]
            //     //     else return color[2]
            //     //
            //     // }
            //
            //
            // }
        };
    ;
    if (option && typeof option === "object") {<!-- -->
        myChart.setOption(option, true);
    }
</script>
</body>
</html>