（系列十三）Vue3+Echarts搭建超好看的系统面板

说明

    该文章是属于OverallAuth2.0系列文章，每周更新一篇该系列文章（从0到1完成系统开发）。
    该系统文章，我会尽量说的非常详细，做到不管新手、老手都能看懂。
    说明：OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。
友情提醒：本篇文章是属于系列文章，看该文章前，建议先看之前文章，可以更好理解项目结构。
qq群：801913255，进群有什么不懂的尽管问，群主都会耐心解答。
有兴趣的朋友，请关注我吧(*^▽^*)。

关注我，学不会你来打我
实现功能
　　1、系统登录后的可视化面板页面
　　原本不想写这篇文章，因为它和我们的系统权限、框架没有实质性的关系，但耐不住群友的软磨硬泡，便答应了下来。

　　我起初的设想，这块功能直接上传到码云上，群友可以根据自己搭建的系统，酌情修改。
安装echarts
　　npm install echarts --save
搭建面板页面
在panel文件夹，打开index页面，编写布局代码

1. <template>
2.   
3.    
4.       
5.         
6.         
7.         
8.          2
9.         
10.       
11.       
12.        3
13.       
14.       
15.         4
16.       
17.    
18.    
19.       
20.         特色功能
21.       
22.       关于作者
23.    
24.   
25. </template>
29.    

复制代码

布局样式如下

填充盒子1的内容
在api文件夹下，创建一个文件夹panel，然后再该文件夹下创建一个echarts.ts的文件，编写如下代码

1. export const echartsOne = {
2.     title: {
3.       text: "系统六芒星图",
4.     },
5.     color: ['#67F9D8'],
6.     //backgroundColor: "#013954",  //背景样式
7.     radar: {
8.       // 雷达图的指示器，表示多个变量的标签
9.       indicator: [
10.         { name: "好用", max: 5 },
11.         { name: "易懂", max: 5 },
12.         { name: "简单", max: 5 },
13.         { name: "通用", max: 5 },
14.         { name: "灵活", max: 5 },
15.         { name: "学习", max: 5 },
16.       ],
17.       splitArea: {
18.         areaStyle: {
19.           color: ['#adbecf','#77EADF', '#26C3BE', '#64AFE9', '#428BD4','#2177cd'],
20.           shadowColor: 'rgba(0, 0, 0, 0.2)',
21.           shadowBlur: 10
22.         }
23.       },
24.       axisName: {
25.         formatter: '【{value}】',
26.         color: '#428BD4'
27.       },
28.     },
29.     series: [
30.       {
31.         type: "radar",
32.         // 雷达图的数据
33.         data: [
34.           {
35.             value: [5, 5, 5, 5, 5, 5],
36.           },
37.         ],
38.       },
39.     ],
40.   };

复制代码

该代码是echarts的雷达图代码。
回到页面，我们把盒子1里的内容替换成
 　　然后再setup下添加如下代码

1.   onMounted(() => {
2.       GetEchartsOneData();
3.     });
4.     function GetEchartsOneData() {
5.       var myChart = echarts.init(document.getElementById("echarts-one"));
6.       myChart.setOption(echartsOne);
7.     }

复制代码

注意这里的onMounted钩子函数需要添加引用，echartsOne也需要导入。点击vue的提示即可。
完成以上代码，我们预览看下效果

照葫芦画瓢，我们开始编写盒子2、3、4的内容
在echarts.ts中添加

1. //南丁格尔玫瑰图
2. export const echartsTWO = {
3.     title: {
4.         text: "模块访问占比",
5.     },
6.     toolbox: {
7.         show: true,
8.     },
9.     legend: {
10.         bottom: "10",
11.     },
12.     // backgroundColor: "#013954",  //背景样式
13.     series: [
14.         {
15.             name: "Nightingale Chart",
16.             type: "pie",
17.             radius: [25, 80],
18.             center: ["50%", "50%"],
19.             roseType: "area",
20.             // itemStyle: {
21.             //   borderRadius: 8,
22.             // },
23.             data: [
24.                 { value: 40, name: "菜单权限" },
25.                 { value: 38, name: "角色权限" },
26.                 { value: 32, name: "列权限" },
27.                 { value: 30, name: "行权限" },
28.                 { value: 28, name: "按钮权限" },
29.                 { value: 18, name: "接口权限" },
30.                 { value: 26, name: "流程" },
31.                 { value: 22, name: "表单" },
32.             ],
33.         },
34.     ],
35. };
37. //中国地图
38. export const chinaGeoCoordMap = ref({
39.     黑龙江: [127.9688, 45.368],
40.     内蒙古: [110.3467, 41.4899],
41.     吉林: [125.8154, 44.2584],
42.     北京市: [116.4551, 40.2539],
43.     辽宁: [123.1238, 42.1216],
44.     河北: [114.4995, 38.1006],
45.     天津: [117.4219, 39.4189],
46.     山西: [112.3352, 37.9413],
47.     陕西: [109.1162, 34.2004],
48.     甘肃: [103.5901, 36.3043],
49.     宁夏: [106.3586, 38.1775],
50.     青海: [101.4038, 36.8207],
51.     新疆: [87.9236, 43.5883],
52.     西藏: [91.11, 29.97],
53.     四川: [103.9526, 30.7617],
54.     重庆: [108.384366, 30.439702],
55.     山东: [117.1582, 36.8701],
56.     河南: [113.4668, 34.6234],
57.     江苏: [118.8062, 31.9208],
58.     安徽: [117.29, 32.0581],
59.     湖北: [114.3896, 30.6628],
60.     浙江: [119.5313, 29.8773],
61.     福建: [119.4543, 25.9222],
62.     江西: [116.0046, 28.6633],
63.     湖南: [113.0823, 28.2568],
64.     贵州: [106.6992, 26.7682],
65.     云南: [102.9199, 25.4663],
66.     广东: [113.12244, 23.009505],
67.     广西: [108.479, 23.1152],
68.     海南: [110.3893, 19.8516],
69.     上海: [121.4648, 31.2891],
70. });
71. export const chinaDatas = [
72.     [
73.         {
74.             name: "黑龙江",
75.             value: 0,
76.         },
77.     ],
78.     [
79.         {
80.             name: "内蒙古",
81.             value: 0,
82.         },
83.     ],
84.     [
85.         {
86.             name: "吉林",
87.             value: 0,
88.         },
89.     ],
90.     [
91.         {
92.             name: "辽宁",
93.             value: 0,
94.         },
95.     ],
96.     [
97.         {
98.             name: "河北",
99.             value: 0,
100.         },
101.     ],
102.     [
103.         {
104.             name: "天津",
105.             value: 0,
106.         },
107.     ],
108.     [
109.         {
110.             name: "山西",
111.             value: 0,
112.         },
113.     ],
114.     [
115.         {
116.             name: "陕西",
117.             value: 0,
118.         },
119.     ],
120.     [
121.         {
122.             name: "甘肃",
123.             value: 0,
124.         },
125.     ],
126.     [
127.         {
128.             name: "宁夏",
129.             value: 0,
130.         },
131.     ],
132.     [
133.         {
134.             name: "青海",
135.             value: 0,
136.         },
137.     ],
138.     [
139.         {
140.             name: "新疆",
141.             value: 0,
142.         },
143.     ],
144.     [
145.         {
146.             name: "西藏",
147.             value: 0,
148.         },
149.     ],
150.     [
151.         {
152.             name: "四川",
153.             value: 0,
154.         },
155.     ],
156.     [
157.         {
158.             name: "重庆",
159.             value: 0,
160.         },
161.     ],
162.     [
163.         {
164.             name: "山东",
165.             value: 0,
166.         },
167.     ],
168.     [
169.         {
170.             name: "河南",
171.             value: 0,
172.         },
173.     ],
174.     [
175.         {
176.             name: "江苏",
177.             value: 0,
178.         },
179.     ],
180.     [
181.         {
182.             name: "安徽",
183.             value: 0,
184.         },
185.     ],
186.     [
187.         {
188.             name: "湖北",
189.             value: 0,
190.         },
191.     ],
192.     [
193.         {
194.             name: "浙江",
195.             value: 0,
196.         },
197.     ],
198.     [
199.         {
200.             name: "福建",
201.             value: 0,
202.         },
203.     ],
204.     [
205.         {
206.             name: "江西",
207.             value: 0,
208.         },
209.     ],
210.     [
211.         {
212.             name: "湖南",
213.             value: 0,
214.         },
215.     ],
216.     [
217.         {
218.             name: "贵州",
219.             value: 0,
220.         },
221.     ],
222.     [
223.         {
224.             name: "广西",
225.             value: 0,
226.         },
227.     ],
228.     [
229.         {
230.             name: "海南",
231.             value: 0,
232.         },
233.     ],
234.     [
235.         {
236.             name: "上海",
237.             value: 1,
238.         },
239.     ],
240. ];
241. var convertData = function (data: string | any[]) {
242.     var res = [];
243.     for (var i = 0; i < data.length; i++) {
244.         var dataItem = data[i];
245.         var fromCoord = chinaGeoCoordMap.value[dataItem[0].name];
246.         var toCoord = [103.9526, 30.7617];
247.         if (fromCoord && toCoord) {
248.             res.push([
249.                 {
250.                     coord: fromCoord,
251.                     value: dataItem[0].value,
252.                 },
253.                 {
254.                     coord: toCoord,
255.                 },
256.             ]);
257.         }
258.     }
259.     return res;
260. };
261. export const series: {
262.     type: string;
263.     zlevel: number;
264.     coordinateSystem: string;
265.     effect: {
266.         show: boolean;
267.         period: number; //箭头指向速度，值越小速度越快
268.         trailLength: number; //特效尾迹长度[0,1]值越大，尾迹越长重
269.         symbol: string; //箭头图标
270.         symbolSize: number;
271.         brushType: string;
272.         scale: number
273.     };
274.     rippleEffect:any;
275.     label: {},
276.     symbol: string;
277.     symbolSize: {},
278.     itemStyle: {},
279.     lineStyle: {
280.         normal: {
281.             width: number; //尾迹线条宽度
282.             opacity: number; //尾迹线条透明度
283.             curveness: number; //尾迹线条曲直度
284.         };
285.     };
286.     data: any
287. }[] = [];
288. [["四川", chinaDatas as any]].forEach(function (item, i) {
289.     series.push(
290.         {
291.             type: "lines",
292.             coordinateSystem: "geo",
293.             zlevel: 2,
294.             rippleEffect:[],
295.             effect: {
296.                 show: true,
297.                 period: 4, //箭头指向速度，值越小速度越快
298.                 trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
299.                 symbol: "arrow", //箭头图标
300.                 symbolSize: 5, //图标大小
301.                 brushType: "",
302.                 scale: 0
303.             },
304.             label: [],
305.             symbol: "",
306.             symbolSize: [],
307.             itemStyle: [],
308.             lineStyle: {
309.                 normal: {
310.                     width: 1, //尾迹线条宽度
311.                     opacity: 1, //尾迹线条透明度
312.                     curveness: 0.3, //尾迹线条曲直度
313.                 },
314.             },
315.             data: convertData(item[1]),
316.         },
317.         {
318.             type: "effectScatter",
319.             coordinateSystem: "geo".toString(),
320.             zlevel: 2,
321.             effect:{} as any,
322.             rippleEffect: {
323.                 //涟漪特效
324.                 period: 4, //动画时间，值越小速度越快
325.                 brushType: "stroke", //波纹绘制方式 stroke, fill
326.                 scale: 4,
327.                 show: false,
328.                 trailLength: 0,
329.                 symbol: "",
330.                 symbolSize: 0
331.             },
332.             label: {
333.                 normal: {
334.                     show: true,
335.                     position: "right", //显示位置
336.                     offset: [5, 0], //偏移设置
337.                     formatter: function (params: { data: { name: any } }) {
338.                         //圆环显示文字
339.                         return params.data.name;
340.                     },
341.                     fontSize: 13,
342.                 },
343.                 emphasis: {
344.                     show: true,
345.                 },
346.             },
347.             symbol: "circle",
348.             symbolSize: function (val: number[]) {
349.                 return 5 + val[2] * 5; //圆环大小
350.             },
351.             itemStyle: {
352.                 normal: {
353.                     show: false,
354.                     color: "#f00",
355.                 },
356.             },
357.             lineStyle: {
358.                 normal: {
359.                     width: 1, //尾迹线条宽度
360.                     opacity: 1, //尾迹线条透明度
361.                     curveness: 0.3, //尾迹线条曲直度
362.                 },
363.             },
364.             data: item[1].map(function (
365.                 dataItem: {
366.                     name: any;
367.                     value: any;
368.                 }[]
369.             ) {
370.                 return {
371.                     name: dataItem[0].name,
372.                     value: chinaGeoCoordMap.value[dataItem[0].name].concat([dataItem[0].value]),
373.                 };
374.             }),
375.         },
376.         //被攻击点
377.         {
378.             type: "scatter",
379.             coordinateSystem: "geo",
380.             zlevel: 2,
381.             rippleEffect:{} as any,
382.             effect: {
383.                 period: 4,
384.                 brushType: "stroke",
385.                 scale: 4,
386.                 show: false,
387.                 trailLength: 0,
388.                 symbol: "",
389.                 symbolSize: 0
390.             },
391.             label: {
392.                 normal: {
393.                     show: true,
394.                     position: "right",
395.                     //offset:[5, 0],
396.                     color: "#0f0",
397.                     formatter: "{b}",
398.                     textStyle: {
399.                         color: "#0f0",
400.                     },
401.                 },
402.                 emphasis: {
403.                     show: true,
404.                     color: "#f60",
405.                 },
406.             },
407.             symbol: "pin",
408.             symbolSize: 50,
409.             itemStyle: [],
410.             lineStyle: '' as any,
411.             data: [
412.                 {
413.                     name: item[0],
414.                     value: chinaGeoCoordMap.value[item[0].toString()].concat([10]),
415.                 },
416.             ],
417.         }
418.     );
419. });
420. export const echartsThree = {
421.     title: {
422.         text: "各省访问数量",
423.     },
424.     tooltip: {
425.       trigger: "item",
426.       backgroundColor: "rgba(166, 200, 76, 0.82)",
427.       borderColor: "#FFFFCC",
428.       showDelay: 0,
429.       hideDelay: 0,
430.       enterable: true,
431.       transitionDuration: 0,
432.       extraCssText: "z-index:100",
433.       formatter: function (
434.         params: { name: any; value: { [x: string]: any }; seriesIndex: number },
435.         ticket: any,
436.         callback: any
437.       ) {
438.         //根据业务自己拓展要显示的内容
439.         var res = "";
440.         var name = params.name;
441.         var value = params.value[params.seriesIndex + 1];
442.         res =
443.           "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
444.         return res;
445.       },
446.     },
447.     //backgroundColor: "#013954",
448.     visualMap: {
449.       //图例值控制
450.       min: 0,
451.       max: 1,
452.       calculable: true,
453.       show: true,
454.       color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],
455.       textStyle: {
456.         color: "#fff",
457.       },
458.     },
459.     geo: {
460.       map: "china",
461.       zoom: 1.2,
462.       label: {
463.         emphasis: {
464.           show: false,
465.         },
466.       },
467.       roam: false, //是否允许缩放
468.       itemStyle: {
469.         normal: {
470.           color: "rgba(51, 69, 89, .5)", //地图背景色
471.           borderColor: "#516a89", //省市边界线00fcff 516a89
472.           borderWidth: 1,
473.         },
474.         emphasis: {
475.           color: "rgba(37, 43, 61, .5)", //悬浮背景
476.         },
477.       },
478.     },
479.     series: series,
480.   };
482.   //堆叠图
483.   export const echartsFour = {
484.     title: {
485.       text: "系统访问量走势图",
486.     },
487.    // backgroundColor: "#6a7985",  //背景样式
488.     tooltip: {
489.       trigger: "axis",
490.       axisPointer: {
491.         type: "cross",
492.         label: {
493.           backgroundColor: "#6a7985",
494.         },
495.       },
496.     },
497.     legend: {
498.       data: ["菜单权限", "角色权限", "按钮权限", "行权限", "列权限"],
499.     },
500.     toolbox: {
501.       // feature: {
502.       //   saveAsImage: {},
503.       // },
504.     },
505.     grid: {
506.       left: "3%",
507.       right: "4%",
508.       bottom: "3%",
509.       containLabel: true,
510.     },
511.     xAxis: [
512.       {
513.         type: "category",
514.         boundaryGap: false,
515.         data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"],
516.       },
517.     ],
518.     yAxis: [
519.       {
520.         type: "value",
521.       },
522.     ],
523.     series: [
524.       {
525.         name: "菜单权限",
526.         type: "line",
527.         stack: "Total",
528.         areaStyle: {},
529.         emphasis: {
530.           focus: "series",
531.         },
532.         data: [120, 132, 101, 134, 90, 230, 210],
533.       },
534.       {
535.         name: "角色权限",
536.         type: "line",
537.         stack: "Total",
538.         areaStyle: {},
539.         emphasis: {
540.           focus: "series",
541.         },
542.         data: [220, 182, 191, 234, 290, 330, 310],
543.       },
544.       {
545.         name: "按钮权限",
546.         type: "line",
547.         stack: "Total",
548.         areaStyle: {},
549.         emphasis: {
550.           focus: "series",
551.         },
552.         data: [150, 232, 201, 154, 190, 330, 410],
553.       },
554.       {
555.         name: "行权限",
556.         type: "line",
557.         stack: "Total",
558.         areaStyle: {},
559.         emphasis: {
560.           focus: "series",
561.         },
562.         data: [320, 332, 301, 334, 390, 330, 320],
563.       },
564.       {
565.         name: "列权限",
566.         type: "line",
567.         stack: "Total",
568.         label: {
569.           show: true,
570.           position: "top",
571.         },
572.         areaStyle: {},
573.         emphasis: {
574.           focus: "series",
575.         },
576.         data: [820, 932, 901, 934, 1290, 1330, 1320],
577.       },
578.     ],
579.   };

复制代码

在页面添加
把盒子2所在的地方替换成把盒子3所在的地方替换成把盒子4所在的地方替换成

1. onMounted(() => {
2.       GetEchartsOneData();
3.       GetEchartsTwoData();
4.       GetEchartsThreeData();
5.       GetEchartsFourData();
6.     });
8.     //六芒星图
9.     function GetEchartsOneData() {
10.       var myChart = echarts.init(document.getElementById("echarts-one"));
11.       myChart.setOption(echartsOne);
12.     }
14.     //南丁格尔玫瑰图
15.     function GetEchartsTwoData() {
16.       var myChart = echarts.init(document.getElementById("echarts-tow"));
17.       myChart.setOption(echartsTWO);
18.     }
20.     //中国地图
21.     function GetEchartsThreeData() {
22.       var myChart = echarts.init(document.getElementById("echarts-three"));
23.       echarts.registerMap("china", chinaJson as any); //注册可用的地图
24.       myChart.setOption(echartsThree);
25.     }
27.     //堆叠图
28.     function GetEchartsFourData() {
29.       var myChart = echarts.init(document.getElementById("echarts-four"));
30.       myChart.setOption(echartsFour);
31.     }

复制代码

特别注意
　　1、在添加中国地图时，需要下载一个中国地图的json包，放在项目中（我是放在和echarts.ts同级目录下）。下载地址：https://datav.aliyun.com/portal/school/atlas/area_selector
　　2、在tsconfig.json文件中需要添加"resolveJsonModule": true,的配置，该配置可以让系统允许导入json。
预览

兼容性调整
　　对应echarts来说，每个图表，它是固定的，就算设置的是百分比，也不随着窗体的大小而自适应屏幕，如下图

要解决以上问题，我们只需要添加一个方法即可

1. //图标兼容性调整
2.     function resizeEchart(myChart:any)
3.     {
4.       //监听窗口大小变化(适用于一个页面多个图形)
5.       window.addEventListener('resize',()=>{myChart.resize();})
6.     }

复制代码

然后再myChart.setOption()方法后面添加resizeEchart(myChart);即可解决兼容性问题，如图

1.   //堆叠图
2.     function GetEchartsFourData() {
3.       var myChart = echarts.init(document.getElementById("echarts-four"));
4.       myChart.setOption(echartsFour);
5.       resizeEchart(myChart);
6.     }

复制代码

结语
我们的OverallAuth2.0项目也正式迈入功能开发阶段，可能文章内容逐渐开始复杂化，如果你感兴趣的话，也有跟着博主从0到1搭建权限管理系统的兴趣。
那么请加qq群：801913255，进群有什么不懂的尽管问，群主都会耐心解答。
后端WebApi 预览地址：http://139.155.137.144:8880/swagger/index.html
前端vue 预览地址：http://139.155.137.144:8881
关注公众号：发送【权限】，获取前后端代码
有兴趣的朋友，请关注我微信公众号吧(*^▽^*)。

关注我：一个全栈多端的宝藏博主，定时分享技术文章，不定时分享开源项目。关注我，带你认识不一样的程序世界

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！