echarts+jq Web实现大屏数据可视化展示效果
vue+echarts大屏数据可视化展示参见 点击进入
需求原因，做了一套数据可视化页面的展示效果demo。主要使用了echarts里面的纵向和横向柱状图，区域地图，以及环状图和折线图。基本满足部分场景的需求。下面看效果（技术栈echarts+jq）。
一、效果展示图
二、目录结构
三、页面功能的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}设备一共有
{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);
})
炫酷模板展示：更多炫酷数据可视化项目点击进入