https://lingyuzhao.top/js/echartsImage.js

1/**
2 * 将数据可视化成为一个 南丁格尔玫瑰图 此函数依赖 echarts
3 * @param chartDom 需要被做为图的元素控件
4 * @param titleName1 图的大标题
5 * @param titleName2 图的小标题
6 * @param dataJson {
7 *     {}
8 * } 图的数据 里面key是数据的 name value 是数据的值
9 * @param useDark 使用暗色主题
10 * @param radius 内环和外环的尺寸 这是一个 list 第一个数值是内环尺寸 第二个是外环
11 * @param echartsObj 当已经在外界实例化出来一个图表后 可以在这里执行被实例化好的对象 这样数据的改变操作将会有动态的效果
12 * @param optionJson 图表的配置数据 如果已经在外界示例化成功 可以在这里传递旧的配置数据 在原基础上修改一部分数据 性能更好
13 * @return [] 图表对象 以及其中的配置参数 [myChart, option]
14 */
15function Nightingale(chartDom, dataJson, titleName1 = "Nightingale", titleName2 = "Nightingale charts", useDark = false, radius = [15, 80], echartsObj = undefined, optionJson = undefined) {
16
17    if (chartDom === null || dataJson === null) {
18        console.error("发生了错误哦，原因：chartDom === ", chartDom, "dataJson === ", dataJson)
19    }
20
21    // 构建数据
22
23    const keys = []
24    const data_list = []
25    for (const nameKey in dataJson) {
26        keys.push(nameKey);
27        data_list.push(
28            {value: dataJson[nameKey], name: nameKey}
29        )
30    }
31
32    console.log("图表可视化数据载入完毕!!!", keys, data_list)
33
34    if (echartsObj !== undefined && optionJson !== undefined) {
35        optionJson.series[0].data = data_list;
36        optionJson.legend.data = keys;
37        echartsObj.setOption(optionJson)
38        return [echartsObj, optionJson];
39    }
40
41    const myChart = useDark ? echarts.init(chartDom, 'dark') : echarts.init(chartDom);
42    let option = {
43        animation: true,
44        title: {
45            text: titleName1,
46            subtext: titleName2,
47            left: 'center'
48        },
49        tooltip: {
50            trigger: 'item',
51            formatter: '{a} <br/>{b} : {c} ({d}%)'
52        },
53        legend: {
54            left: 'center',
55            top: 'bottom',
56            data: keys
57        },
58        toolbox: {
59            show: true,
60            feature: {
61                mark: {show: true},
62                dataView: {show: true, readOnly: false},
63                restore: {show: true},
64                saveAsImage: {show: true}
65            }
66        },
67        series: [
68            {
69                name: '此文章热度比例',
70                type: 'pie',
71                // 这个参数分别是内环和外环的尺寸
72                radius: radius,
73                center: ['50%', '50%'],
74                roseType: 'radius',
75                itemStyle: {
76                    borderRadius: 5
77                },
78                label: {
79                    show: true
80                },
81                emphasis: {
82                    label: {
83                        show: true
84                    }
85                },
86                data: data_list
87            }
88        ]
89    };
90
91    option && myChart.setOption(option);
92    return [myChart, option];
93}
94
95
96/**
97 * 将数据可视化成为一个 仪表板 此函数依赖 echarts
98 * @param chartDom 需要被做为图的元素控件
99 * @param titleName1 图的大标题
100 * @param titleName2 图的副标题
101 * @param dataJson {{max:int,nowValue:int}}
102 * @param useDark 使用暗色主题
103 * @param echartsObj 当已经在外界实例化出来一个图表后 可以在这里执行被实例化好的对象 这样数据的改变操作将会有动态的效果
104 * @param optionJson 图表的配置数据 如果已经在外界示例化成功 可以在这里传递旧的配置数据 在原基础上修改一部分数据 性能更好
105 * @param backGroundColor 图表的背景色
106 * @return [] 图表对象 以及其中的配置参数 [myChart, option]
107 */
108function instrumentPanel(chartDom, dataJson, titleName1 = "仪表板标题", titleName2 = "上方标题", useDark = false, echartsObj = undefined, optionJson = undefined, backGroundColor = undefined) {
109
110    if (chartDom === null || dataJson === undefined) {
111        console.error("发生了错误哦，原因：chartDom === ", chartDom, "dataJson === ", dataJson)
112        return
113    }
114
115    const option = {
116        tooltip: {
117            formatter: '{a} <br/>{b} : {c}人'
118        },
119        series: [
120            {
121                name: titleName2,
122                type: 'gauge',
123                progress: {
124                    show: true
125                },
126                min: 0,

127                max: dataJson.max,
128                detail: {
129                    valueAnimation: true,
130                    formatter: '{value}'
131                },
132                axisLine: {
133                    shadowBlur: 20,
134                    shadowColor: "#9f50ff",
135                },
136                data: [
137                    {
138                        value: dataJson.nowValue,
139                        name: titleName2
140                    }
141                ]
142            }
143        ],
144        title: {
145            text: titleName1
146        }
147    };
148    if (backGroundColor !== undefined) {
149        option['backgroundColor'] = backGroundColor;
150    }
151
152    if (echartsObj !== undefined && optionJson !== undefined) {
153        for (let optionJsonKey in optionJson) {
154            option[optionJsonKey] = optionJson[optionJsonKey]
155        }
156        echartsObj.setOption(option)
157        return [echartsObj, option];
158    }
159
160    const myChart = useDark ? echarts.init(chartDom, 'dark', {
161        renderer: 'canvas',
162        useDirtyRect: false
163    }) : echarts.init(chartDom, null, {
164        renderer: 'canvas',
165        useDirtyRect: false
166    });
167
168    option && myChart.setOption(option);
169
170    return [myChart, option];
171}
172
173/**
174 * 将数据可视化成为一个 渐变面积图 此函数依赖 echarts
175 * @param chartDom 需要被做为图的元素控件
176 * @param dataJson {
177 *     {
178 *           xAxis:[string],
179 *           name : string,
180 *           data : [
181 *              {
182 *              labelName : string,
183 *              labelColor: [string, string],
184 *              legendDataName:string,
185 *              value:[int]
186 *              }
187 *          ]
188 *     }
189 * }
190 * @param useDark 使用暗色主题
191 * @param echartsObj 当已经在外界实例化出来一个图表后 可以在这里执行被实例化好的对象 这样数据的改变操作将会有动态的效果
192 * @param optionJson 图表的配置数据 如果已经在外界示例化成功 可以在这里传递旧的配置数据 在原基础上修改一部分数据 性能更好
193 * @param backGroundColor 背景图
194 * @return [] 图表对象 以及其中的配置参数 [myChart, option]
195 */
196function GradientStackedAreaChart(chartDom, dataJson, useDark = false, echartsObj = undefined, optionJson = undefined, backGroundColor = undefined) {
197
198    if (chartDom === null || dataJson === undefined) {
199        console.error("发生了错误哦，原因：chartDom === ", chartDom, "dataJson === ", dataJson)
200        return
201    }
202
203    const myChart = echartsObj !== undefined ? echartsObj : useDark ? echarts.init(chartDom, 'dark', {
204        renderer: 'canvas',
205        useDirtyRect: false
206    }) : echarts.init(chartDom, null, {
207        renderer: 'canvas',
208        useDirtyRect: false
209    });
210
211    // 构建 color 和 legendDataName 和 name/dataMat
212    const colorList = [], legendDataName = []
213    for (let i = 0; i < dataJson.data.length; i++) {
214        const dataJsonElement1 = dataJson.data[i];
215        colorList.push(dataJsonElement1.labelColor[0]);
216        legendDataName.push(dataJsonElement1.legendDataName);
217    }
218
219    // 构建 series 的 list
220    const seriesList = []
221    for (let i = 0; i < dataJson.data.length; i++) {
222        const now = dataJson.data[i];
223        seriesList.push(
224            {
225                name: now.labelName,
226                type: 'line',
227                stack: 'Total',
228                smooth: true,
229                lineStyle: {
230                    width: 0
231                },
232                showSymbol: false,
233                areaStyle: {
234                    opacity: 0.8,
235                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
236                        {
237                            offset: 0,
238                            color: now.labelColor[0]
239                        },
240                        {
241                            offset: 1,
242                            color: now.labelColor[1]
243                        }
244                    ])
245                },
246                emphasis: {
247                    focus: 'series'
248                },
249                data: now.value
250            }
251        )
252    }
253
254    let option;
255    option = {
256        color: colorList,
257        title: {
258            text: dataJson.name
259        },
260        tooltip: {
261            trigger: 'axis',
262            axisPointer: {
263                type: 'cross',
264                label: {
265                    backgroundColor: '#6a7985'
266                }
267            }
268        },
269        legend: {
270            data: legendDataName
271        },
272        toolbox: {
273            feature: {
274                saveAsImage: {}
275            }
276        },
277        grid: {
278            left: '3%',
279            right: '4%',
280            bottom: '3%',
281            containLabel: true
282        },
283        xAxis: [
284            {
285                type: 'category',
286                boundaryGap: false,
287                data: dataJson.xAxis
288            }
289        ],
290        yAxis: [
291            {
292                type: 'value'
293            }
294        ],
295        series: seriesList
296    };
297    if (backGroundColor !== undefined) {
298        option['backgroundColor'] = backGroundColor;
299    }
300    option && myChart.setOption(option);
301    return [myChart, myChart.getOption()]
302}
303