vue+echarts大屏数据可视化展示点击进入
写在前面：
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
一、效果展示图
二、目录结构
因为是原生写的不涉及到任何前端框架，所页面目录也很简单，基本上就这些。
三、页面功能的echarts实现
（1）功能点（地图实现js代码）
// 地图相关配置
$(function(){
//使用echarts.init()方法初始化一个Echarts实例，在init方法中传入echarts map的容器 dom对象
var mapChart = echarts.init(document.getElementById('map-wrap'));
// mapChart的配置
var option = {
title:{
text: '北京各区设备',
left:'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}设备一共有<br/>{c} (个)'
},
toolbox: {
show: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 0,
max: 2000,
text:['高','低'],
realtime: false,
calculable: true,
inRange: {
color: ['#268DFB','#2E2E58', '#23E8C7']
// #2E2E58
}
},
series:[
{
name: '北京各区设备',
type: 'map',//type必须声明为 map 说明该图标为echarts 中map类型
map: '北京', //这里需要特别注意。如果是中国地图，map值为china，如果为各省市则为中文。这里用北京
aspectScale: 0.75, //长宽比. default: 0.75
zoom: 1.1,
// roam: true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [
{name:'东城区', value: 1800},
{name:'西城区', value: 1700},
{name:'朝阳区', value: 1600},
{name:'丰台区', value: 1400},
{name:'石景山区', value: 1200},
{name:'海淀区', value: 1000},
{name:'门头沟区', value: 800},
{name:'房山区', value: 600},
{name:'通州区', value: 400},
{name:'顺义区', value: 200},
{name:'昌平区', value: 100},
{name:'大兴区', value: 300},
{name:'怀柔区', value: 500},
{name:'平谷区', value: 700},
{name:'密云县', value: 900},
{name:'延庆县', value: 1100}
]
}
]
};
//设置图表的配置项
mapChart.setOption(option);
})
2）横向柱状图js代码
//横向柱状图
$(function () {
var myChart3 = echarts.init(document.getElementById('infeed'));
//初始化数据
var category = ['杭州市', '北京市', '天津市', '上海市', '重庆市', '河北省', '陕西省','辽宁省','山东省'];
var barData = [3100, 2142, 1218, 581, 431, 383, 800,106,200];
var option3 = {
textStyle: {
fontWeight: "normal",
color: "#fff",
fontSize: 14
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {show: false},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
yAxis: {
type: 'category',
data: category,
splitLine: {show: false},
axisLine: {
show: false
},
axisTick: {
show: false
},
offset: 10,
nameTextStyle: {
fontSize: 15
}
},
series: [
{
labelLine: {
normal: {
show: false
}
},
name: '数量',
type: 'bar',
data: barData,
barWidth: 14,
barGap: 10,
smooth: true,
label: {
normal: {
show: true,
position: 'right',
offset: [5, -2],
textStyle: {
color: '#24A9CC',
fontSize: 13
}
}
},
itemStyle: {
emphasis: {
barBorderRadius: 7
},
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#3977E6'},
{offset: 1, color: '#37BBF8'}
]
)
}
}
}
]
};
myChart3.setOption(option3);
})
四、实现方式
这种数据可视化页面一般都是单页面在大厅的大屏上面展示，偶尔也会融合到后台管理系统中的某个模块展示，一般这种页面都是基于16：9自适应开发。这些特效的效果依靠echarts官网提供的实例不做配置是远远不够的，一个炫酷的图表配置才能撑起整个页面的颜值。
要想快速开发需要一些模板，已经配置好的炫酷图表直接使用就可以提高开发效率，全方位覆盖多场景，基本适用于多个业务类型的大屏展示。
项目目录如下图：
