echarts曲线图，echarts-gl绘制3d地图+3d柱状图，echarts-liquidfill实现水球图_echarts-gl 3d地图

作者：从前慢现在也慢 | 2024-02-15 08:55:56

踩

echarts-gl 3d地图

Vue环境下进行的代码编写

一、npm安装及版本控制参考路径：echarts与echarts-gl、echarts-liquidfill存在的版本兼容问题

二、Echarts曲线图

echarts折线图

Echarts曲线图对应的代码如下：

this.clearChart(this.surfaceDisplacementMonitorings)	// 清除图表
var chartDom = document.getElementById('surfaceDisplacementMonitoring');
if(chartDom == null) return
this.surfaceDisplacementMonitorings = echarts.init(chartDom);	// 初始化图表
var option = {
    grid:{
        show:false,         // 控制折线上的点
        top:'20%',
        right:'5%',
        bottom:'11.6%',
        left:'5%'
    },
    tooltip: {
        trigger: 'axis'		// 提示框触发方式
    },
    color:['#0000FF','#008000'],    // legend标记颜色
    legend: {         // 控制图例
        padding:[15,0,0,0],
        textStyle: {
            fontSize: 14,
            color: '#fff'
        }
    },
    toolbox: {      // 控制图表右上角的工具
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,  // 两边留白
        axisLine: {
            lineStyle: {
                color: "#fff",
            }
        },
        data: ["20:48:17", '20:38:17', '20:08:17', '20:00:17', '19:52:17', '19:48:17', '19:38:17', '19:00:17', '18:52:17', '18:48:17', '18:38:17', '18:00:17']
    },
    yAxis: {
        name: 'mm',
        type: 'value',
        max: 10,//最大值
        min: -10,//最小值
        interval:5,//间隔
        axisLine: {
            show: false,
            lineStyle: {
                color: "#fff",
            }
        },
        axisLabel: {
            formatter: '{value}'
        }
    },
    series: [
        {
        name: '北位移',
        type: 'line',       // 控制图表类型：line折线图，bar柱状图，pie饼图
        smooth: true,
        data: [0,-1.5, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        lineStyle: {
            color: "#0000FF",
        },
        },
        {
            name: '东位移',
            type: 'line',
            smooth: true,
            data: [0,1.5, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            lineStyle: {
                color: "#008000",
            },
        }
    ]
};
option && this.surfaceDisplacementMonitorings.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

需要其他图表参考Apache Echarts官网

三、echarts-gl 3d地图

Echarts-GL3d地图+3d柱状图

import hunan from '…/assets/json/hunan.json` 导入所需的地理地图信息
免费地理信息地图json文件下载

Echarts-GL 3d地图对应的代码如下：

var that = this
this.clearChart(this.bigMapVisualizations)		// 清除图表对象
// let echarts = require("echarts/lib/echarts");
let bigMapVisualization = document.getElementById("bigMapVisualization")
if(bigMapVisualization == null) return
this.bigMapVisualizations = echarts.init(bigMapVisualization);		// 初始化图表
echarts.registerMap("hunan", hunan);		// 注册导入地理地图信息
this.bigMapVisualizations.hideLoading();	// 隐藏加载图标
//let effectPoints = hunan.features.map((item) => {
//	let obj = {
//        name: item.properties.name,
//        value: [...item.properties.center],
//    };
//    return obj;
//});
let barPoints = hunan.features.map((item) => {
	let obj = {
	    name: item.properties.name,
	    value: [
	        item.properties.center[0] - 0.1,
	        item.properties.center[1] - 0.1,
	        Math.random()*10000,
	    ],
    };
    return obj;
});
// js 渲染地图之前
var domImg = document.createElement("img");
domImg.src = this.dmImg;
// 图表配置项
let option = {
    geo3D: {
        show: true,
        map: "hunan",
        roam: true,
        zlevel: 1,
        left:"0%",
        top:"-20%",
        bottom: '0%',
        boxWidth: 90,
        // shading: `lambert`,
        // colorMaterial: {
        //     detailTexture: domImg, // 纹理贴图 格式支持（string, HTMLImageElement, HTMLCanvasElement）
        //     textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
        // },
        // realisticMaterial:{
        //     detailTexture:domImg,
        // },
        // shading:'realistic',
        // realisticMaterial:{
        //     detailTexture:domImg,
        //     textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
        // },
        itemStyle: {
            color: '#195ED7',
            opacity: 0.8,   //#0090DB
            borderWidth: 1,
            borderColor: "#FFFFFF",
            areaColor: '#fff'
        },
        dataZoom: 0.1,
        viewControl: {
             //     projection: 'orthographic',
            autoRotate: false,
            autoRotateAfterStill: 3,
            distance: 130,  //默认视角距离主体的距离
            alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
            minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            animation: false, // 是否开启动画。[ default: true ]
            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
        },
        emphasis: {
            disabled: true, //是否可以被选中
            label: {
                //移入时的高亮文本
                show: true,
                color: "#333", //显示字体颜色变淡
                fontSize: 18, //显示字体变大
                textStyle: {
                    color: "#333", //显示字体颜色变淡
                    fontSize: 14, //显示字体变大 
                }
            },
            itemStyle: {
                color: "#1E90FF" //显示移入的区块变粉色
            }
        },
        label: {
            show: true,
            position: "bottom",
            color: "#FFFFFF", //地图初始化区域字体颜色
            fontSize: 14,
            lineHeight: 16,
            textStyle: {
              color: "#fff", //地图初始化区域字体颜色
              fontSize: 12,
              opacity: 1,
              backgroundColor: "rgba(0,23,11,0)",
            },
        },
        shading: "lambert",
        light: {	 //光照阴影
            main: {
                // color: "#fff", //光照颜色
                intensity: 1, //光照强度
                //shadowQuality: 'high', //阴影亮度
                shadow: true, //是否显示阴影
                shadowQuality: "medium", //阴影质量 ultra //阴影亮度
                alpha: 55,
                beta: 10
            },
            ambient: {
                intensity: 0.2
            }
        }
    },
    series: [
    {
        type: "bar3D",  // 圆点
        name: "hunan",
        coordinateSystem: "geo3D",
        barSize: 1,    //柱子粗细 bar3D
        bevelSize: 1,
        minHeight: 6,
        data: barPoints,
        stack: 'lambert',
        itemStyle:{
            color: "#02EDA3",
        },
        emphasis: {
            label: {
                show: false,
            },
        },
        label: {
            show: true,
            formatter: (params) =>{
                // console.log(params)
                let cityName = params.data.name
                switch(cityName){
                    case '长沙市':
                        return that.marketObject.changshaCityNum
                        break
                    case '株洲市':
                        return that.marketObject.zhuzhouCityNum
                        break
                    case '湘潭市':
                        return that.marketObject.xiangtanCityNum
                        break
                    case '衡阳市':
                        return that.marketObject.hengyangCityNum
                        break
                    case '邵阳市':
                        return that.marketObject.shaoyangCityNum
                        break
                    case '岳阳市':
                        return that.marketObject.yueyangCityNum
                        break
                    case '常德市':
                        return that.marketObject.changdeCityNum
                        break
                    case '张家界市':
                        return that.marketObject.zhangjiajieCityNum
                        break
                    case '益阳市':
                        return that.marketObject.yiyangCityNum
                        break
                    case '郴州市':
                        return that.marketObject.chenzhouCityNum
                        break
                    case '永州市':
                        return that.marketObject.yongzhouCityNum
                        break
                    case '怀化市':
                        return that.marketObject.huaihuaCityNum
                        break
                    case '娄底市':
                        return that.marketObject.loudiCityNum
                        break
                    case '湘西土家族苗族自治州':
                        return that.marketObject.XiangxiTujiaAndMiaoAutonomousPrefectureNum
                        break
                    default:
                        return 0
                        break
                }
            },
            position: 'right',
            textStyle: {
                color: '#fff',
                fontSize:16,
                fontWeight: 600,
                padding:[10,10,8,10],
                backgroundColor: '#092EAB',
            }
        },
    },
    ],
};
// 图表配置项=》未使用，只作参考
var option2 = {
    // title : {                            // 标题
    //     top : '5%',
    //     text : '湖南省3D地图',
    //     subtext : '',
    //     x : 'center',
    //     textStyle : {
    //         color : '#ccc'
    //     }
    // },
    tooltip: {                            // 提示框
        trigger : 'item',
        formatter : function(params) {
            return params.name;
        }
    },
    series: [{
        type: 'map3D',              // 系列类型
        name: 'map3D',              // 系列名称
        map: 'hunan',           // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)
        // 环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 'auto'，在配置有 light.ambientCubemap.texture 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。
        //  environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{      // 配置为垂直渐变的背景
        //   offset: 0, color: '#00aaff' // 天空颜色           
        // }, {
        //   offset: 0.7, color: '#998866' // 地面颜色
        // }, {
        //   offset: 1, color: '#998866' // 地面颜色
        // }], false),
        label: {                // 标签的相关设置
            show: true,                 // (地图上的城市名称)是否显示标签 [ default: false ]
            //distance: 50,               // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
            //formatter:,               // 标签内容格式器
            textStyle: {                // 标签的字体样式
                color: '#000',                  // 地图初始化区域字体颜色
                fontSize: 8,                    // 字体大小
                opacity: 1,                     // 字体透明度
                backgroundColor: 'rgba(0,23,11,0)'      // 字体背景色
            },
        },
        itemStyle: {            // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
            color: '#195ED7',       // 地图板块的颜色
            opacity: 1,                 // 图形的不透明度 [ default: 1 ]
            borderWidth: 0.5,           // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
            borderColor: '#000'         // 图形描边的颜色。[ default: #333 ]
        },
        emphasis: {             // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式) 
            label: {                // label高亮时的配置
                show: true,
                textStyle: {
                    color: '#fff',      // 高亮时标签颜色变为 白色
                    fontSize: 15,       // 高亮时标签字体 变大
                }
            },
            itemStyle: {            // itemStyle高亮时的配置
                areaColor: '#66ffff',   // 高亮时地图板块颜色改变
            }
        },
        groundPlane: {            // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
            show: false,                // 是否显示地面。[ default: false ]
            color: '#aaa'            // 地面颜色。[ default: '#aaa' ]
        },
        regions: [{                // 可对单个地图区域进行设置
            name: '长沙市',        // 所对应的地图区域的名称
            //regionHeight: '',            // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
            itemStyle: {                // 单个区域的样式设置
                color: '#00FF00',
                opacity: 1,
                borderWidth: 0.4,
                borderColor: '#5F9EA0'
            },
        }],
        //shading: 'lambert',       // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
	    // 'color' 只显示颜色，不受光照等其它因素的影响。
	    // 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
	    // 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
        // realisticMaterial: {}    // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
        // lambertMaterial: {}      // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
        // colorMaterial: {}        // color 材质相关的配置项，在 shading 为'color'时有效。
        light: {                    // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
            main: {                     // 场景主光源的设置，在 globe 组件中就是太阳光。
                color: '#fff',              //主光源的颜色。[ default: #fff ] 
                intensity: 1.2,             //主光源的强度。[ default: 1 ]
                shadow: false,              //主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                //shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                alpha: 55,              // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                beta: 10                    // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
            },
            ambient: {                  // 全局的环境光设置。
                color: '#fff',              // 环境光的颜色。[ default: #fff ]
                intensity: 0.5              // 环境光的强度。[ default: 0.2 ]
            }
        },
        viewControl: {            // 用于鼠标的旋转，缩放等视角控制。
            projection: 'perspective',        // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
            autoRotate: false,                // 是否开启视角绕物体的自动旋转查看。[ default: false ] 
            autoRotateDirection: 'cw',        // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
            autoRotateSpeed: 10,            // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
            autoRotateAfterStill: 3,        // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
            damping: 0,                        // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
            rotateSensitivity: 1,         // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。    rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
            zoomSensitivity: 1,                // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
            panSensitivity: 1,                // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
            panMouseButton: 'left',            // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
            rotateMouseButton: 'left',        // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
            distance: 200,                    // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
            minDistance: 40,                // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
            maxDistance: 400,                // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
            alpha: 40,                         // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
            beta: 15,                        // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
            minAlpha: -360,                  // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            maxAlpha: 360,                  // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            minBeta: -360,                   // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            maxBeta: 360,                    // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            center: [0,0,0],                // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
            animation: true,                // 是否开启动画。[ default: true ]
            animationDurationUpdate: 1000,    // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: 'cubicInOut'        // 过渡动画的缓动效果。[ default: cubicInOut ]
        },
        data: [{                // 可对单个地图区域进行设置
            name: '长沙市',        // 所对应的地图区域的名称
            //regionHeight: '',            // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
            itemStyle: {                // 单个区域的样式设置
                color: '#00FF00',
                opacity: 1,
                borderWidth: 0.4,
                borderColor: '#5F9EA0'
            }, 
        }]
    }]
};

option && this.bigMapVisualizations.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
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

series:{}对象中加入如下代码有尾部轨迹显示，但实测显示耗cpu

// {		// 线 和 点	
//     name: "lines3D",
//     type: "lines3D",
//     coordinateSystem: "geo3D",
//     zlevel: 0, //设置这个才会有轨迹线的小尾巴
//     polyline: false,
//     effect: {
//         show: true,
//         period: 3,     // 尾迹长度
//         constantSpeed: -15, // 移动速度
//         trailLength: 5,
//         trailColor: "#03FEFF",
//         color: "#00FAFD", //流动点颜色
//         symbol: "amarkLinesow",
//         symbolSize: 6,
//     },
//     lineStyle: {
//         normal: {
//             color: "#03FEFF", //线条颜色
//             width: 1.2,
//         },
//     },
//     blendMode: "lighter",
//     data: markLines,
//     silent: true,
// },
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

Echarts-GL官网，含3d地图（地球）、3d柱状图、3d散点图等

Echartss-GL github源码

四、Echarts-liquidfill水球图

Echarts-liquidfill水球图

Echarts-liquidfill水球图代码如下：

var that = this
this.clearChart(this.waterRippleBubbles)	// 清除图表对象
let echarts = require("echarts/lib/echarts");
let waterRippleBubble = document.getElementById('waterRippleBubbles')
if(waterRippleBubble == null) return
this.waterRippleBubbles = echarts.init(waterRippleBubble)		// 初始化图表对象
var option = [{
    series: [{
        type: 'liquidFill',
        data: [{		// 三种颜色的波浪，写法可能有些不足
            value: 0.9,
            itemStyle: {
                color: '#0072E3'
            }
        },{
            value: 0.9,
            itemStyle: {
                color: '#10A85C'
            }
        },{
            value: 0.9,
            itemStyle: {
                color: '#10A85C'
            }
        }],
        // color: ['#10A85C','#10A85C','#0072E3'],
        backgroundStyle: {
            color: '#0090FF',
        },
        radius: '60%',
        center:['30%','23%'],
        label: {
            fontSize: 18,
            formatter: function() {
                return that.reservoirRiskLevelWarning.riskNum;      // 低风险
            },
        },
        name: 'Liquid Fill'
    },{
        type: 'liquidFill',
        data: [{
            value: 0.9,
            itemStyle: {
                color: '#0F7F21'
            }
        },{
            value: 0.9,
            itemStyle: {
                color: '#0164A8'
            }
        },{
            value: 0.9,
            itemStyle: {
                color: '#F27C07'
            }
        }],
        backgroundStyle: {
            color: '#005699',
        },
        radius: '53%',
        center:['78%','60%'],
        label: {
            fontSize: 18,
            formatter: function() {
                return that.reservoirRiskLevelWarning.mediumRiskNum;   // 中风险
            },
        },
        name: 'Liquid Fill2'
    },{
        type: 'liquidFill',
        data: [{
            value: 0.9,
            itemStyle: {
                color: '#0F7F21'
            }
        },{
            value: 0.9,
            itemStyle: {
                color: '#0062AF'
            }
        },{
            value: 0.9,
            itemStyle: {
                color: '#F22629'
            }
        }],
        backgroundStyle: {
            color: '#00579B',
        },
        radius: '46.5%',
        center:['20%','80%'],
        label: {
            fontSize: 18,
            formatter: function() {
                return that.reservoirRiskLevelWarning.highRiskNum;     // 高风险
            },
        },
        name: 'Liquid Fill2'
    }],
    outline: {
        itemStyle: {
            opacity: 0,
        }
    },
    tooltip: {
        show: true
    }
}];
for(let i = 0;i < option.length;i++){
    option[i] && this.waterRippleBubbles.setOption(option[i]);	// 注入设置图表的参数
}
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

npm Echarts-liquidfill网站示例参考

Echarts-liquidfill github源码

五、销毁实例对象

if(chartObj){
    chartObj.clear();//清空当前实例，会移除实例中所有的组件和图表
    chartObj.dispose();//销毁实例，实例销毁后无法再被使用
    chartObj = null
}
1
2
3
4
5

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】