数据看板可视化
前言
这段时间一直在做可视化，在我的项目中有一部分是电力巡检的数据可视化。其中的数据看板比较简单，我将其单独抽离出来形成一个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配置，但麻烦的是效果需要自己仔细调节。