基于js+echarts实现数据可视化大屏展示

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.75zoom: 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官网提供的实例不做配置是远远不够的，一个炫酷的图表配置才能撑起整个页面的颜值。
要想快速开发需要一些模板，已经配置好的炫酷图表直接使用就可以提高开发效率，全方位覆盖多场景，基本适用于多个业务类型的大屏展示。
项目目录如下图：

基于js+echarts实现数据可视化大屏展示

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.75zoom: 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官网提供的实例不做配置是远远不够的，一个炫酷的图表配置才能撑起整个页面的颜值。
要想快速开发需要一些模板，已经配置好的炫酷图表直接使用就可以提高开发效率，全方位覆盖多场景，基本适用于多个业务类型的大屏展示。
项目目录如下图：