说一千道一万,图标样式在【series】中修改,边距在【grid】中修改,鼠标指向显示数据在【tooltip】中修改

JS引用:

1
<script src="js/echarts.min.js" charset="utf-8" type="text/javascript"></script>

  

HTML:

1
<div id="ry_char" style="height:100%;width:90%;margin-left:12%;margin-top:0.5%"></div>

 

方形立体柱状图-------JS

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<script type="text/javascript">
  function cc(){
       var myChart = echarts.init(document.getElementById('ry_char'));
        const data = [220, 182, 191, 234]
 
        // 指定图表的配置项和数据
        var option = {
            roam: false, // 禁止滚轮事件
            tooltip: {
                show: false,
            },
            grid: {
                x: '0%', //距离左边
                x2: '0%', //距离右边
                y: '15%', // 上距离
                y2: '15%', // 下距离
            },
            xAxis: {
                axisLabel: {
                    interval: 0, //横轴信息全部显示
                    rotate: 0, //0度角倾斜显示
                    show: true,
                    textStyle: {
                        color: '#333333'
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: '#B6C1C4',
                    },
                },
                axisTick: {
                    show: false,
                },
                data: ['1日', '2日', '3日', '4日']
            },
            yAxis: {
                show: false,
            },
 
            series: [{
                name: 'a',
                tooltip: {
                    show: false
                },
                data: data,
 
                type: 'bar',
                barWidth: 10,
                barGap: 200,
                barCategoryGap: 200,
                // 基准线
                markLine: {
                    silent: true, // 不响应鼠标事件
                    symbol: ['none', 'none'],
                    position: 'top',
                    label: {
                        show: false,
                    },
                    lineStyle: {
                        normal: {
                            color: '#D3D3D3' // 这儿设置安全基线颜色
                        }
                    },
                    data: [{
                        name: '平均线',
                        // 支持 'average', 'min', 'max'
                        type: 'average'
                    }, ],
                },
                label: {
                    show: true, // 柱子顶部的数值
                    position: 'top',
                    top: 0,
                    fontSize: 6,
                    offset: [0, -10],
                    formatter: function(params) {
                        let num = params.value;
                        if (num > 1024) {
                            return (num / 1024).toFixed(2) + 'GB'
                        } else if (num < 1024 && num > 0) {
                            return num.toFixed(2) + 'MB'
                        } else {
                            return '';
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#4729FB" // 0% 处的颜色
                        }, {
                            offset: 0.5,
                            color: "#3077F7" // 50% 处的颜色
                        }, {
                            offset: 1,
                            color: "#1FB0F4" // 100% 处的颜色
                        }], false)
                    }
                },
                // barGap: 0
            }, {
                type: 'bar',
                barWidth: 4,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#235DFF" // 0% 处的颜色
                        }, {
                            offset: 0.5,
                            color: "#59ACF7" // 50% 处的颜色
                        }, {
                            offset: 1,
                            color: "#71CAFF" // 100% 处的颜色
                        }], false)
                    }
                },
                barGap: 0,
                data: data.map(item => item + 4.5)
            }, {
                name: 'b',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    borderWidth: 0,
                    borderColor: '#47A6FF',
                    color: '#1AC0F4',
 
                },
                symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
                symbolSize: ['13', '3'],
                symbolOffset: ['-1', '-2'], // 左右 ,上下
                symbolRotate: 0,
                symbolPosition: 'end',
                data: data,
                z: 3
            }],
 
            // 可左右滑动
            dataZoom: [{
                show: false,
                realtime: true,
                start: 30,
                end: 50
            }, {
                type: 'inside',
                realtime: false,
                start: 30,
                end: 50,
                zoomOnMouseWheel: false, // 禁用滚轮
            }],
        };
         myChart.setOption(option);
}
</script>

 圆形立体柱状图--js

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
function render(){
            myChart1 = echarts.init(document.getElementById('ry_char'));
            var xData2 = ["容城", "雄县", "安新", "雄县"];
            var data1 = [30, 20, 30, 20];
            option = {
                //backgroundColor: '#021132',
                grid: {
                    //left: 100,
                    //bottom: 100
                },
                xAxis: {
                    data: xData2,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                        margin: 10, //刻度标签与轴线之间的距离。
                    },
 
                },
                yAxis: {
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        // textStyle: {
                        //     color: '#fff',
                        //     fontSize: 20,
                        // },
                        //不显示Y轴数值
                        formatter: function () {
                            return "";
                        }
                    }
                },
                series: [
                    //数据低下的圆片
                    {
                        name: "",
                        type: "pictorialBar",
                        symbolSize: [25, 15],
                        symbolOffset: [0, 10],
                        z: 12,
                        itemStyle: {
                            opacity: 1,
                            color: function (params) {
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#25B2E0' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#25B2E0' // 100% 处的颜色
                                }], false)
                            },
                            barBorderRadius: 10,
                            borderWidth: 10,
                        },
                        data: [1, 1, 1, 1]
                    },
                    //数据的柱状图
                    {
                        name: '',
                        type: 'bar',
                        barWidth: 25,
                        barGap: '-100%',
                        itemStyle: { //lenged文本
                            opacity: 1, //这个是 透明度
                            color: function (params) {
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#33ADE0' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#33ADE0' // 100% 处的颜色
                                }], false)
                            }
                        },
 
                        data: data1
                    },
                    //替代柱状图 默认不显示颜色,是最下方柱图(邮件营销)的value值 - 20
                    {
                        type: 'bar',
                        barWidth: 25,
                        barGap: '-100%',
                        stack: '',
                        itemStyle: {
                            color: 'transparent'
                        },
                        data: data1
                    },
                    //数据顶部的样式
                    {
                        name: "",
                        type: "pictorialBar",
                        symbolSize: [25, 15],
                        symbolOffset: [0, -8],
                        //barWidth: 20,
                        //showBackground: true,
                        //barMaxWidth: 20,
                        //barMinWidth: 5,
                        z: 10,
                        itemStyle: {
                            normal: {
                                opacity: 1,
                                color: function (params) {
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#0D487E' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#229AD2' // 100% 处的颜色
                                    }], false)
                                },
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'green',
                                        fontSize: 14,
                                        top: 100,
                                    },
                                    formatter: function (param) {
                                        return param.data
                                    }
 
                                }
                            }
                        },
                        symbolPosition: "end",
                        data: data1
                    },
 
                    //阴影的顶部
                    {
                        name: "", //头部
                        type: "pictorialBar",
                        symbolSize: [25, 15],
                        symbolOffset: [0, -10],
                        z: 10,
                        symbolPosition: "end",
                        itemStyle: {
                            color: '#0B2869',
                            opacity: 1,
                        },
                        data: [100, 100, 100, 100]
                    },
                    //后面的背景
                    {
                        name: '2019',
                        type: 'bar',
                        barWidth: 25,
                        barGap: '-100%',
                        z: 0,
                        itemStyle: {
                            color: '#0B2869',
                            opacity: .7,
                        },
 
                        data: [100, 100, 100, 100]
                    }
 
 
                ]
            };
            myChart1.setOption(option);
        }

  渐变图js

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
function loadmain3() {
            var cba = cbsr; var cbb = cbsc; var cbc = cbgn; var cbd = cbyc;
            myChart3 = echarts.init(document.getElementById('cb_char'));
            var option3 = {
                title: {
                    // text: 'Rainfall vs Evaporation',
                    // subtext: 'Fake Data'
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    top: '10%',
                    // left: '10%',
                    // right: '10%',
                    bottom: '0.5%',
                    height: '80%',
                    containLabel: true
                },
                // calculable: true,
                xAxis: [
                    {
                        // type: 'category',
                        // prettier-ignore
                        data: ['驶入', '驶出', '港内', '重点'],
                        axisLabel: {
                            show: true,
                            color: '#fff'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }
 
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                    },
                ],
                series: [
                    {
                        name: '总数量',
                        type: 'bar',
                        data: [cba, cbb, cbc, cbd],
                        barWidth: 20,
                        showBackground: true,
                        barMaxWidth: 20,
                        barMinWidth: 5,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 1, color: '#00555a' },
                                { offset: 0.5, color: '#01a3ad' },
                                { offset: 0, color: '#01eefe' },
                            ])
                        },
                        // markPoint: {
                        //     data: [
                        //     { type: 'max', name: 'Max' },
                        //     { type: 'min', name: 'Min' }
                        //     ]
                        // },
                        markLine: {
                            label: {
                                show: true,
                                color: '#fff',//气泡中字体颜色
                            },
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    }
                ]
            };
            myChart3.setOption(option3);
        }

  

 

posted on   我的梦想是开个小店  阅读(596)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示