基于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实现数据可视化大屏展示相关推荐

前端使用echarts实现数据可视化大屏展示
1.vue中如何使用echarts完成大屏展示:移步到这里 2.原生js项目中如何使用echarts完成大屏展示:移步到这里
Vue中如何进行数据可视化大屏展示
Vue中如何进行数据可视化大屏展示在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环.通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策.在Vue ...
Qt制作大数据可视化大屏展示电子看板
Qt制作大数据可视化大屏展示电子看板解决当前最火的大数据可视化大屏展示,整个项目通过Qt开发,集成了QML/QChart/ECharts及自定义控件等模块,所有的可视化控件都可以集成到其中.可以随意 ...
基于vue+echarts 数据可视化大屏展示[附源码]
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您 ...
【echarts画数据可视化大屏】
目录前言一.数据清洗 1.去除重复值 2.处理缺失值 3.处理异常值二.数据处理(将数据打包成绘制需要的格式) 1.条形图数据处理 2.折线图数据处理 3.玫瑰图数据处理 4.柱状图数据处理 5 ...
html多图自动展示,基于echarts+html+css+jq的数据可视化大屏展示炫酷看板
默认你已经具备前端基础 html,css,js,jq这些基本知识都已经掌握. 什么是echarts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动 ...
基于WebGL的三维数据可视化大屏开发流 ThingJS
三维数据大屏可视化系统包含多源数据连接.生成二维/三维视图.构建可视化大屏.大屏功能应用等一体化服务,基于多年可视化项目经验,ThingJS平台得出从数据源上传到可视化大屏应用的完整流程,供参考. 多 ...
[Pyecharts]数据可视化大屏展示
[Pyecharts]大屏展示-练习前言 1.条件: 2.代码及展示时间序列曲线图时间轮播 24小时轮播 1:2:3 拥堵路段词云图拥堵榜.通畅榜水球图标题<交通流量预测可视化大屏& ...
100+套Axure数据可视化大屏展示原型模板
内置多种实用美观的可视化组件库及行业模板库,行业模板涵盖:金融.教育.医疗.政府.交通.制造等多个行业,提供设计参考. 随着大数据的发展,可视化大屏在各行各业得到越来越广泛的应用.可视化大屏不再只是电 ...

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

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

最新文章

热门文章