• 基于Echarts实现可视化数据大屏销售大数据分析系统

    前言

    🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。

    本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

    ⚽精彩专栏推荐👇🏻👇🏻👇🏻

    ❤ 【作者主页——🔥获取更多优质源码】

    ❤ 【1000套 毕设项目精品实战案例】

    ❤ 【 20套 VUE+Echarts 大数据可视化源码】

    ❤ 【150套 HTML+ Echarts大数据可视化源码 】

    文章目录

    一、Echart是什么

    ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

    二、ECharts入门教程

    5 分钟上手ECharts

    三、作品演示

    在这里插入图片描述

    四、代码实现

    1.HTML

    
(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        factory(exports, require('echarts'));
    } else {
        factory({}, root.echarts);
    }
}(this, function(exports, echarts) {
    var log = function(msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    };
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    var colorPalette = ['#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487'];
    var theme = {
        color: colorPalette,
        title: {
            textStyle: {
                fontWeight: 'normal'
            }
        },
        visualMap: {
            color: ['#1790cf', '#a2d4e6']
        },
        toolbox: {
            iconStyle: {
                normal: {
                    borderColor: '#06467c'
                }
            }
        },
        tooltip: {
            backgroundColor: 'rgba(0,0,0,0.6)'
        },
        dataZoom: {
            dataBackgroundColor: '#dedede',
            fillerColor: 'rgba(154,217,247,0.2)',
            handleColor: '#005eaa'
        },
        timeline: {
            lineStyle: {
                color: '#005eaa'
            },
            controlStyle: {
                normal: {
                    color: '#005eaa',
                    borderColor: '#005eaa'
                }
            }
        },
        candlestick: {
            itemStyle: {
                normal: {
                    color: '#c12e34',
                    color0: '#2b821d',
                    lineStyle: {
                        width: 1,
                        color: '#c12e34',
                        color0: '#2b821d'
                    }
                }
            }
        },
        graph: {
            color: colorPalette
        },
        map: {
            label: {
                normal: {
                    textStyle: {
                        color: '#c12e34'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: '#c12e34'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#eee',
                    areaColor: '#ddd'
                },
                emphasis: {
                    areaColor: '#e6b600'
                }
            }
        },
        gauge: {
            axisLine: {
                show: true,
                lineStyle: {
                    color: [
                        [0.2, '#2b821d'],
                        [0.8, '#005eaa'],
                        [1, '#c12e34']
                    ],
                    width: 5
                }
            },
            axisTick: {
                splitNumber: 10,
                length: 8,
                lineStyle: {
                    color: 'auto'
                }
            },
            axisLabel: {
                textStyle: {
                    color: 'auto'
                }
            },
            splitLine: {
                length: 12,
                lineStyle: {
                    color: 'auto'
                }
            },
            pointer: {
                length: '90%',
                width: 3,
                color: 'auto'
            },
            title: {
                textStyle: {
                    color: '#333'
                }
            },
            detail: {
                textStyle: {
                    color: 'auto'
                }
            }
        }
    };
    echarts.registerTheme('shine', theme);
}));





    • 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

    2.CSS

    

body {
    background: url("../images/bg.jpg") no-repeat center top #0b1530;
    background-size: 100% auto;
    width: 1920px;
}

.header {}

.header .title {
    font-size: 40px;
    text-align: center;
    color: #ffffff;
    height: 90px;
    line-height: 90px;
}

.main {
    padding: 0 21px;
    margin-top: 15px;
}

.main .box.bg {
    background: url("../images/box-bg.png") no-repeat center top;
    background-size: 100% 100%;
}

.main .box.bg-title {
    background: url("../images/box-bg-title.png") no-repeat center top;
    background-size: 100% 100%;
}

.main .box.center-top-bg {
    background: url("../images/box-bg-center-top.png") no-repeat center top;
    background-size: 100% 100%;
    height: 624px;
}

.main .box.center-bottom-bg {
    background: url("../images/box-bg-center-bottom.jpg") no-repeat center top;
    background-size: 100% 100%;
}

.main .box.right-bottom-bg {
    background: url("../images/box-bg-right-bottom.png") no-repeat center top;
    background-size: 100% 100%;
}

.main .box .title {
    font-size: 24px;
    text-align: center;
    color: #fefeff;
    height: 49px;
    line-height: 49px;
}

.main .main-left {
    width: 499px;
}

.main .main-center {
    width: 840px;
    margin-left: 20px;
    margin-right: 20px;
}

.main .main-right {
    width: 499px;
}

/* 投诉排名 */

.main .main-left .ranking {}

.main .main-left .ranking .title2 {
    color: #ffffff;
    font-size: 29px;
    padding: 25px 0 0 15px;
}

.main .main-left .ranking .content {
    padding: 30px 20px;
}

.main .main-left .ranking .content ul li {
    height: 22px;
    line-height: 22px;
    margin-top: 35px;
}

.main .main-left .ranking .content ul li .label {
    color: #ffffff;
    font-size: 20px;
}

.main .main-left .ranking .content ul li .percentage {
    color: #0de0e5;
    font-size: 16px;
}

.main .main-center {}

.main .main-center .center-bottom {
    margin-top: 11px;
}

.main .main-center .center-bottom .title2 {
    height: 50px;
    line-height: 50px;
    color: #91a1e0;
    font-size: 22px;
    padding-left: 15px;
}

.main .main-center .center-bottom .content thead {
    height: 38px;
    line-height: 38px;
    color: #ffffff;
    background-color: #1759c7;
    font-size: 18px;
    text-align: center;
    font-weight: normal;
}

.main .main-center .center-bottom .content tr td {
    height: 38px;
    line-height: 38px;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    font-weight: normal;
}

.main .main-center .center-bottom .content tr:nth-of-type(odd) {
    background: #142960;
}

/*奇数行*/

.main .main-center .center-bottom .content tr:nth-of-type(even) {
    background: #163c87;
}

/*偶数行*/

/* 3D旋转缺素材，暂搁置，有兴趣的可以在html页面中放开 */

.ball-box {
    width: 377px;
    height: 395px;
    margin: 0 auto;
    padding-top: 64px;
    /* width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px; */
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    -webkit-perspective: 3000px;
    -moz-perspective: 3000px;
    -ms-perspective: 3000px;
    -o-perspective: 3000px;
    perspective: 3000px;
}

@-webkit-keyframes rotate3d {
    0% {
        -webkit-transform: rotateZ(0) rotateY(0deg);
        -moz-transform: rotateZ(0) rotateY(0deg);
        -ms-transform: rotateZ(0) rotateY(0deg);
        -o-transform: rotateZ(0) rotateY(0deg);
        transform: rotateZ(0) rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateZ(0) rotateY(360deg);
        -moz-transform: rotateZ(0) rotateY(360deg);
        -ms-transform: rotateZ(0) rotateY(360deg);
        -o-transform: rotateZ(0) rotateY(360deg);
        transform: rotateZ(0) rotateY(360deg);
    }
}

@-moz-keyframes rotate3d {
    0% {
        -webkit-transform: rotateZ(0) rotateY(0deg);
        -moz-transform: rotateZ(0) rotateY(0deg);
        -ms-transform: rotateZ(0) rotateY(0deg);
        -o-transform: rotateZ(0) rotateY(0deg);
        transform: rotateZ(0) rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateZ(0) rotateY(360deg);
        -moz-transform: rotateZ(0) rotateY(360deg);
        -ms-transform: rotateZ(0) rotateY(360deg);
        -o-transform: rotateZ(0) rotateY(360deg);
        transform: rotateZ(0) rotateY(360deg);
    }
}

@-ms-keyframes rotate3d {
    0% {
        -webkit-transform: rotateZ(0) rotateY(0deg);
        -moz-transform: rotateZ(0) rotateY(0deg);
        -ms-transform: rotateZ(0) rotateY(0deg);
        -o-transform: rotateZ(0) rotateY(0deg);
        transform: rotateZ(0) rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateZ(0) rotateY(360deg);
        -moz-transform: rotateZ(0) rotateY(360deg);
        -ms-transform: rotateZ(0) rotateY(360deg);
        -o-transform: rotateZ(0) rotateY(360deg);
        transform: rotateZ(0) rotateY(360deg);
    }
}

@-o-keyframes rotate3d {
    0% {
        -webkit-transform: rotateZ(0) rotateY(0deg);
        -moz-transform: rotateZ(0) rotateY(0deg);
        -ms-transform: rotateZ(0) rotateY(0deg);
        -o-transform: rotateZ(0) rotateY(0deg);
        transform: rotateZ(0) rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateZ(0) rotateY(360deg);
        -moz-transform: rotateZ(0) rotateY(360deg);
        -ms-transform: rotateZ(0) rotateY(360deg);
        -o-transform: rotateZ(0) rotateY(360deg);
        transform: rotateZ(0) rotateY(360deg);
    }
}

@keyframes rotate3d {
    0% {
        -webkit-transform: rotateZ(0) rotateY(0deg);
        -moz-transform: rotateZ(0) rotateY(0deg);
        -ms-transform: rotateZ(0) rotateY(0deg);
        -o-transform: rotateZ(0) rotateY(0deg);
        transform: rotateZ(0) rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateZ(0) rotateY(360deg);
        -moz-transform: rotateZ(0) rotateY(360deg);
        -ms-transform: rotateZ(0) rotateY(360deg);
        -o-transform: rotateZ(0) rotateY(360deg);
        transform: rotateZ(0) rotateY(360deg);
    }
}

.ball {
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: rotate3d 30s linear infinite;
    -moz-animation: rotate3d 30s linear infinite;
    -ms-animation: rotate3d 30s linear infinite;
    -o-animation: rotate3d 30s linear infinite;
    animation: rotate3d 30s linear infinite;
}

/* .ball:after{
    display: block;
    content: '';
    width: 1px;
    height: 500px;
    background-color: #ff0;
    position: absolute;
    top: -100px;
    left: 150px;
} */

.ball>div {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../images/earth.png") no-repeat;
    /* border: 1px #ffffff solid;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%; */
}

.ball .line1 {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.ball .line2 {
    -webkit-transform: rotateY(36deg);
    -moz-transform: rotateY(36deg);
    -ms-transform: rotateY(36deg);
    -o-transform: rotateY(36deg);
    transform: rotateY(36deg);
}

.ball .line3 {
    -webkit-transform: rotateY(72deg);
    -moz-transform: rotateY(72deg);
    -ms-transform: rotateY(72deg);
    -o-transform: rotateY(72deg);
    transform: rotateY(72deg);
}

.ball .line4 {
    -webkit-transform: rotateY(108deg);
    -moz-transform: rotateY(108deg);
    -ms-transform: rotateY(108deg);
    -o-transform: rotateY(108deg);
    transform: rotateY(108deg);
}

.ball .line1 {
    -webkit-transform: rotateY(144deg);
    -moz-transform: rotateY(144deg);
    -ms-transform: rotateY(144deg);
    -o-transform: rotateY(144deg);
    transform: rotateY(144deg);
}




    • 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
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336

    3.JavaScript

    

function leftTopChartsBak() {

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart1'));

    var colorList = [{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
                    offset: 0,
                    color: 'rgba(51,192,205,0.01)' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: 'rgba(51,192,205,0.57)' // 100% 处的颜色
                }
            ],
            globalCoord: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                    offset: 0,
                    color: 'rgba(115,172,255,0.02)' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: 'rgba(115,172,255,0.67)' // 100% 处的颜色
                }
            ],
            globalCoord: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [{
                    offset: 0,
                    color: 'rgba(158,135,255,0.02)' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: 'rgba(158,135,255,0.57)' // 100% 处的颜色
                }
            ],
            globalCoord: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
                    offset: 0,
                    color: 'rgba(252,75,75,0.01)' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: 'rgba(252,75,75,0.57)' // 100% 处的颜色
                }
            ],
            globalCoord: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 1,
            y: 1,
            x2: 1,
            y2: 0,
            colorStops: [{
                    offset: 0,
                    color: 'rgba(253,138,106,0.01)' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#FDB36ac2' // 100% 处的颜色
                }
            ],
            globalCoord: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
                    offset: 0,
                    color: 'rgba(254,206,67,0.12)' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#FECE4391' // 100% 处的颜色
                }
            ],
            globalCoord: false // 缺省为 false
        }
    ]
    var colorLine = ['#33C0CD', '#73ACFF', '#9E87FF', '#FE6969', '#FDB36A', '#FECE43']

    function getRich() {
        let result = {}
        colorLine.forEach((v, i) => {
            result[`hr${i}`] = {
                backgroundColor: colorLine[i],
                borderRadius: 3,
                width: 3,
                height: 3,
                padding: [3, 3, 0, -12]
            }
            result[`a${i}`] = {
                padding: [8, -60, -20, -20],
                color: colorLine[i],
                fontSize: 12
            }
        })
        return result
    }
    let data = [{
        'name': '北京',
        'value': 25
    }, {
        'name': '上海',
        'value': 20
    }, {
        'name': '广州',
        'value': 18
    }, {
        'name': '深圳',
        'value': 15
    }, {
        'name': '未知',
        'value': 13
    }, {
        'name': '海外',
        'value': 9
    }].sort((a, b) => {
        return b.value - a.value
    })
    data.forEach((v, i) => {
        v.labelLine = {
            lineStyle: {
                width: 1,
                color: colorLine[i]
            }
        }
    })
    option = {
        // 图例
        legend: {
            orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
            // 'horizontal' ¦ 'vertical'
            x: 'center', // 水平安放位置，默认为全图居中，可选为：
            // 'center' ¦ 'left' ¦ 'right'
            // ¦ {number}（x坐标，单位px）
            y: 'bottom', // 垂直安放位置，默认为全图顶端，可选为：
            // 'top' ¦ 'bottom' ¦ 'center'
            // ¦ {number}（y坐标，单位px）
            backgroundColor: 'rgba(0,0,0,0)',
            borderColor: '#ccc', // 图例边框颜色
            borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
            padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
            // 接受数组分别设定上右下左边距，同css
            itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
            // 横向布局时为水平间隔，纵向布局时为纵向间隔
            itemWidth: 20, // 图例图形宽度
            itemHeight: 14, // 图例图形高度
            textStyle: {
                color: '#fff', // 图例文字颜色
                fontSize: 18, // 图例文字大小
            }
        },
        series: [{
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            clockwise: true,
            avoidLabelOverlap: true,
            label: {
                show: true,
                position: 'outside',
                formatter: function(params) {
                    const name = params.name
                    const percent = params.percent + '%'
                    const index = params.dataIndex
                    return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n')
                },
                rich: getRich()
            },
            itemStyle: {
                normal: {
                    color: function(params) {
                        return colorList[params.dataIndex]
                    }
                }
            },
            data,
            roseType: 'radius'
        }]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

}





    • 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
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221

    五、更多干货

    1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

    2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！

    3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

  • 相关阅读:
    centos7 配置coreboot编译环境 以及编译问题解决
    机器学习_10、集成学习-随机森林
    CSS的基础
    LitCTF2023 - Reverse方向 全WP
    使用结构体指针作为参数赋值传递时的注意点
    PHP教学质量评估系统Dreamweaver开发mysql数据库web结构php编程计算机网页代码
    python大数据 pycharm中的面向对象-文件读写-异常
    1.4.17 实验17：ASBR
    echarts+vue实现柱状图分页显示
    引用
  • 原文地址：https://blog.csdn.net/bigwhiteshark/article/details/126344384