- A+
所属分类：Web前端
前言
这段时间一直在做可视化，在我的项目中有一部分是电力巡检的数据可视化。其中的数据看板比较简单，我将其单独抽离出来形成一个demo，为保密demo中数据非真实数据。先看效果。
具体效果
链接相关
- 浏览链接：http://xisite.top/original/data-board/index.html#/
- 项目链接(觉得有用的记得star哦)：https://gitee.com/xi1213/data-board
实现目标
- 可根据项目切换不同看板数据。
- 数据的展现形式包括：折线图，柱状图、饼图、环图、进度图、轮播图。
- 包含一个可控制的3d球体，球面打点具体数据。
具体实现
数据切换
没啥技术含量，demo数据我是写死，要使用的可以直接拿去替换为自己的接口数据。
projectPtions: [ { value: '1', label: '四川项目', sphereData: [ { position: [102, 30], pointName: "成都", value: 31889355 }, { position: [102, 27],//经度，纬度 pointName: "西昌", value: 13578453 }, { position: [107, 31],//经度，纬度 pointName: "达州", value: 7854541453 }, ], msg: { distance: 12245,//巡检距离 towerNum: 85345,//杆塔数量 defectNum: 208//缺陷数量 }, lineData: [ [140, 232, 101, 264, 90, 340, 250], [120, 282, 111, 234, 220, 340, 310], [320, 132, 201, 334, 190, 130, 220] ],//折线图数据 pieData: [234, 124, 156, 178],//饼图数据 ringData: [100, 120, 104, 140, 160],//环图数据 histData: { xAxisData: ['成都', '南充', '宜宾', '西昌', '眉山', '乐山', '攀枝花'], seriesData: [635, 880, 1165, 135, 342, 342, 524] },//柱状图数据 proData: [29, 67, 90],//进度图数据 }, { value: '2', label: '西藏项目', sphereData: [ { position: [91.11, 29.97],//经度，纬度 pointName: "拉萨", value: 78453 }, { position: [80, 32],//经度，纬度 pointName: "阿里", value: 13578453 }, { position: [88, 29],//经度，纬度 pointName: "日喀则", value: 7854541453 }, ], msg: { distance: 20018,//巡检距离 towerNum: 87624,//杆塔数量 defectNum: 126189//缺陷数量 }, lineData: [ [14, 22, 100, 164, 200, 140, 250], [120, 22, 111, 24, 220, 240, 310], [10, 132, 201, 334, 190, 30, 220] ],//折线图数据 pieData: [134, 154, 156, 198],//饼图数据 ringData: [120, 180, 114, 120, 110],//环图数据 histData: { xAxisData: ['拉萨', '日喀则', '昌都', '林芝', '山南', '那曲', '阿里'], seriesData: [100, 280, 467, 956, 345, 111, 61] },//柱状图数据 proData: [69, 37, 50],//进度图数据 }, { value: '3', label: '浙江项目', sphereData: [ { position: [119, 27],//经度，纬度 pointName: "温州", value: 78453 }, { position: [120, 29],//经度，纬度 pointName: "宁波", value: 13578453 }, { position: [120, 30],//经度，纬度 pointName: "嘉兴", value: 7854541453 }, ], msg: { distance: 18722,//巡检距离 towerNum: 122334,//杆塔数量 defectNum: 127895//缺陷数量 }, lineData: [ [104, 122, 200, 164, 20, 140, 250], [220, 22, 111, 24, 120, 40, 10], [130, 32, 201, 34, 190, 30, 200] ],//折线图数据 pieData: [134, 174, 156, 108],//饼图数据 ringData: [190, 110, 174, 130, 110],//环图数据 histData: { xAxisData: ['杭州', '宁波', '温州', '嘉兴', '湖州', '金华', '舟山'], seriesData: [1035, 100, 565, 435, 142, 842, 124] },//柱状图数据 proData: [89, 37, 60],//进度图数据 }, ], 数组中的每一个对象代表一个项目。
切换项目时直接使用element的el-select切换即可。由于图表组件是区分了组件的，每次切换数据时需要根据不同数据重绘图表。
折线图
图中可以看到一共只有九个图表。比较简单，直接使用echarts配置即可。这是折线图。
可能会感觉奇怪，折线图咋会这样呢？那是因为在配置中设置了areaStyle与smooth，使折线图变成了平滑的堆叠面积图，本质还是折线图。areaStyle中的color可以接受echarts.graphic.LinearGradient，使其具有渐变的颜色，LinearGradient的前四个参数分别为渐变色的起始点与终止点的x值与y值，后面的值为颜色值。
let option = { color: [], title: { text: '项目执行情况', top: "5%", left: 'center', textStyle: { color: "#fff" } }, tooltip: { trigger: 'axis', axisPointer: { label: { backgroundColor: '#6a7985' } } }, grid: { top: "20%", left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: [], axisLabel: { color: "#fff", }, axisLine: { lineStyle: { color: this.dataVColor[1] } } } ], yAxis: [ { type: 'value', axisLabel: { color: "#fff", }, axisLine: { lineStyle: { color: this.dataVColor[1] } }, splitLine: { show: true,//网格设置 lineStyle: { color: "#70707033", width: 1, type: "dotted",//虚线 }, }, } ], series: [] }; option.xAxis[0].data = chartData.xAxisData; chartData.seriesData.forEach(s => { option.color.unshift(this.dataVColor[1]);//注意颜色添加的顺序 option.series.push( { animationDuration: 3000,//动画时间 animationEasing: "cubicInOut",//动画类型 name: s.name, type: 'line', smooth: true, stack: 'Total', lineStyle: { width: 1 }, showSymbol: false, areaStyle: { opacity: 0.8, //使用线性渐变颜色(x1,y1,x2,y2,渐变数组) color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [ { offset: 0, color: this.dataVColor[0] }, { offset: 1, color: "#fff" } ]) }, emphasis: { focus: 'series' }, data: s.data } ) }); await (option && this.lineChart.setOption(option));//设置数据 饼图
饼图我一样在itemStyle的color中设置了渐变色。饼图的尺寸是通过series中的radius来控制的，位置是center来控制的。
let option = { title: { text: '任务类型占比', top: "5%", left: 'center', textStyle: { color: "#fff" } }, tooltip: { trigger: 'item' }, series: [ { type: 'pie', animationDuration: 3000, radius:"60%", animationEasing: "cubicInOut", center: ["50%", "60%"],//饼图位置 label: { color: "#fff" }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold' } }, data: [], } ] }; chartData.seriesData.forEach(s => { option.series[0].data.push( { value: s.value, name: s.name, itemStyle: { color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [ { offset: 0, color: this.dataVColor[0] }, { offset: 1, color: "#fff" } ]) } } ) }); await (option && this.pieChart.setOption(option));//设置数据 环图
环图其实就是饼图的变形。将series中的radius设置为两个元素的数组即可，数值为内外环的半径比。
let option = { title: { text: '缺陷类型', top: "5%", left: 'center', textStyle: { color: "#fff" } }, tooltip: { trigger: 'item' }, series: [ { type: 'pie', animationDuration: 3000, animationEasing: "cubicInOut", radius: ['30%', '60%'],//内外环半径比 center: ["50%", "60%"],//饼图位置 label: { color: "#fff" }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold' } }, data: [] } ] }; chartData.seriesData.forEach(s => { option.series[0].data.push( { value: s.value, name: s.name, itemStyle: { color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [ { offset: 0, color: this.dataVColor[0] }, { offset: 1, color: "#fff" } ]) } } ) }); await (option && this.ringChart.setOption(option));//设置数据 柱状图
柱状图也一样设置了渐变色。每个柱子后面的阴影是通过series中的showBackground设置的。
let option = { title: { text: '缺陷分布', top: "5%", left: 'center', textStyle: { color: "#fff" } }, tooltip: { trigger: 'item' }, grid: { left: '3%', top: "20%", right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: [], axisLabel: { color: "#fff", interval: 0, rotate: 20, }, }, yAxis: { type: 'value', axisLabel: { color: "#fff", }, splitLine: { show: true,//网格设置 lineStyle: { color: "#70707033", width: 1, type: "dotted",//虚线 }, }, }, series: [ { type: 'bar', animationDuration: 3000, animationEasing: "cubicInOut", showBackground: true, label: { color: "#fff" }, data: [], color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 1, color: this.dataVColor[0] }, { offset: 0, color: "#ffffff" } ]) } ] }; option.xAxis.data = chartData.xAxisData; chartData.seriesData.forEach(s => { option.series[0].data.push(s); }); await (option && this.histogramChart.setOption(option));//设置数据 关系图
本来想用3d力导向图插件3d-force-graph的，但后面发现echarts自己也有类似的功能graph，直接设置series的layout即可，它有三种值：none(无任何布局)，circular(环形布局)、force(力引导布局)。我用了circular，只有点，没有连线。
let option = { title: { text: '巡检工作待办', top: "1%", left: 'center', textStyle: { color: "#fff" } }, // tooltip: { // trigger: 'item' // }, series: [{ type: 'graph', layout: 'circular',//环形布局 scaleLimit: { min: .5,//缩放限制 max: 2 }, zoom: .7, roam: false, label: { normal: { color: "#fff", show: true, position: 'inside', fontSize: 14, fontStyle: '900', } }, data: [] }] }; chartData.seriesData.forEach(s => { option.series[0].data.push( { name: s.name, value: s.value, symbolSize: Math.round((s.value / maxSymbolSize) * 100),//尺寸 draggable: true,//允许拖拽 itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, color: this.dataVColor[0] }, { offset: 1, color: "#fff" } ]) } } ) }); await (option && this.atlasChart.setOption(option));//设置数据 轮播图
这是直接用了element的走马灯组件，自己添加图片即可。
<el-carousel :height="carouselHeight" indicator-position="outside" arrow="never" :autoplay="true" :interval="2000"> <el-carousel-item v-for="item in defectImgList" :key="item.name"> <img :src="item.img" fit="fill"> </el-carousel-item> </el-carousel> 进度仪表图
这是具体配置：
let option = { title: { text: 'n{a|' + chartData.name + '}', x: 'center', y: '65%', bottom: "0", textStyle: { color: "#ffffff", rich: { a: { fontSize: 15, fontWeight: 900 }, } } }, series: [ { type: 'gauge', radius: '86%',//仪表盘半径 center: ['50%', '45%'],//仪表盘位置 splitNumber: 5, animationDuration: 3000, animationEasing: "cubicInOut", axisLine: { lineStyle: { width: 15, color: [ [1, new echarts.graphic.LinearGradient(1, 1, 0, 1, [ { offset: 0, color: this.dataVColor[1] }, { offset: 1, color: "#aaa" } ])] ] } }, //指针 pointer: { width: 3, length: '70%', }, //小刻度 axisTick: { length: 5, lineStyle: { color: '#fff', width: 1 } }, //大刻度 splitLine: { show: false, length: 10, lineStyle: { color: '#fff', width: 2 } }, //刻度标签 axisLabel: { color: '#fff', distance: 5, fontSize: 8, fontWeight: 900, }, detail: { valueAnimation: false, formatter: '{value}%', color: '#fff', fontSize: 15, fontWeight: 900, padding: [30, 0, 0, 0] }, data: [ { value: chartData.value } ] } ] }; await (option && this.progressChart.setOption(option));//设置数据 图表信息框动画
图表信息框自己显示轮播，其实是利用的echartsAutoTooltip.js这个东西，东西不大，这是他的源码：
export const autoToolTip = (chart, chartOption, options) => { var defaultOptions = { interval: 2000, loopSeries: false, seriesIndex: 0, updateData: null, }; if (!chart || !chartOption) { return {}; } var dataIndex = 0; // 数据索引，初始化为-1，是为了判断是否是第一次执行 var seriesIndex = 0; // 系列索引 var timeTicket = 0; var seriesLen = chartOption.series.length; // 系列个数 var dataLen = 0; // 某个系列数据个数 var chartType; // 系列类型 var first = true; // 不循环series时seriesIndex指定显示tooltip的系列，不指定默认为0，指定多个则默认为第一个 // 循环series时seriesIndex指定循环的series，不指定则从0开始循环所有series，指定单个则相当于不循环，指定多个 // 要不要添加开始series索引和开始的data索引？ if (options) { options.interval = options.interval || defaultOptions.interval; options.loopSeries = options.loopSeries || defaultOptions.loopSeries; options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex; options.updateData = options.updateData || defaultOptions.updateData; } else { options = defaultOptions; } // 如果设置的seriesIndex无效，则默认为0 if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) { seriesIndex = 0; } else { seriesIndex = options.seriesIndex; } function autoShowTip() { function showTip() { // 判断是否更新数据 if ( dataIndex === 0 && !first && typeof options.updateData === "function" ) { options.updateData(); chart.setOption(chartOption); } var series = chartOption.series; chartType = series[seriesIndex].type; // 系列类型 dataLen = series[seriesIndex].data.length; // 某个系列的数据个数 var tipParams = { seriesIndex: seriesIndex }; switch (chartType) { case "map": case "pie": case "chord": tipParams.name = series[seriesIndex].data[dataIndex].name; break; case "radar": // 雷达图 tipParams.seriesIndex = seriesIndex; tipParams.dataIndex = dataIndex; break; default: tipParams.dataIndex = dataIndex; break; } if ( chartType === "pie" ||//饼图 chartType === "radar" || chartType === "map" || chartType === "scatter" || chartType === "line" ||//折线图 chartType === "bar" ||//柱状图 chartType === "graph" ) { // 取消之前高亮的图形 chart.dispatchAction({ type: "downplay", seriesIndex: options.loopSeries ? seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1 : seriesIndex, dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1, }); // 高亮当前图形 chart.dispatchAction({ type: "highlight", seriesIndex: seriesIndex, dataIndex: dataIndex, }); } // 显示 tooltip tipParams.type = "showTip"; chart.dispatchAction(tipParams); dataIndex = (dataIndex + 1) % dataLen; if (options.loopSeries && dataIndex === 0 && !first) { // 数据索引归0表示当前系列数据已经循环完 seriesIndex = (seriesIndex + 1) % seriesLen; } first = false; } showTip(); timeTicket = setInterval(showTip, options.interval); } // 关闭轮播 function stopAutoShow() { if (timeTicket) { clearInterval(timeTicket); timeTicket = 0; if ( chartType === "pie" || chartType === "radar" || chartType === "map" || chartType === "scatter" || chartType === "line" || chartType === "bar" || chartType === "graph" ) { // 取消高亮的图形 chart.dispatchAction({ type: "downplay", seriesIndex: options.loopSeries ? seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1 : seriesIndex, dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1, }); } } } var zRender = chart.getZr(); function zRenderMouseMove(param) { if (param.event) { // 阻止canvas上的鼠标移动事件冒泡 param.event.cancelBubble = true; } stopAutoShow(); } // 离开echarts图时恢复自动轮播 function zRenderGlobalOut() { if (!timeTicket) { autoShowTip(); } } // 鼠标在echarts图上时停止轮播 chart.on("mousemove", stopAutoShow); zRender.on("mousemove", zRenderMouseMove); zRender.on("globalout", zRenderGlobalOut); autoShowTip(); return { clearLoop: function () { if (timeTicket) { clearInterval(timeTicket); timeTicket = 0; } chart.off("mousemove", stopAutoShow); zRender.off("mousemove", zRenderMouseMove); zRender.off("globalout", zRenderGlobalOut); }, }; }; 球体实现
球体是用了three.js来实现的，具体可以看我之前的疫情可视化文章(https://www.cnblogs.com/xi12/p/16690119.html)，实现原理是一样，直接创建宇宙、绘制球体、球面打点，一气呵成。
数值动画
这几个数值是有递增动画的，我项目整体风格使用的dataV(http://datav.jiaminghi.com/guide/)实现的，dataV里面也有数值增加动画。但我没用那个，可以利用vue的数据响应式很方便即可实现。
<!--数字增加动画组件--> <template> <span class="num-span" :data-time="time" :data-value="value">{{ addNum }}</span> </template> <script> export default { props: { //动画时间 time: { type: Number, default: 2 }, //停止时的值 value: { type: Number, default: 0 }, //千位的逗号 thousandSign: { type: Boolean, default: () => false } }, data() { return { oldValue: 0, addNum: 0,//响应式的数值 }; }, watch: { value(val) { this.oldValue = 0; this.addNum = 0;//响应式的数值 this.startAnimation();//值改变时开始动画 } }, mounted() { this.startAnimation(); }, methods: { startAnimation() { let value = this.value - this.oldValue; let step = (value * 10) / (this.time * 100); let current = 0; let start = this.oldValue; //定时器 let t = setInterval(() => { start += step; if (start > value) { clearInterval(t); start = value; t = null; } if (current === start) { return; } current = Math.floor(start);//取整 this.oldValue = current; if (this.thousandSign) { this.addNum = current.toString().replace(/(d)(?=(?:d{3}[+]?)+$)/g, '$1,');//添加千位符 } else { this.addNum = current.toString();//无千位符 } }, 10) } }, }; </script> <style scoped lang='scss'> .num-span { /*开启gpu加速*/ transform: translateZ(0); } </style> 特效背景
我比较懒，背景可不是我自己写的，我直接一个iframe，把别人代码一扔，他就出来了⊙﹏⊙∥。源码在我项目的这个路径下:
背景颜色可以通过Victor.js文件下的Victor方法里的diffuse值调节。
结语
感觉可视化项目难度不大(当然这只是对于我这种只会用轮子的懒人加缝合怪来说)，无非就是熟练利用echarts配置，但麻烦的是效果需要自己仔细调节。
