-
基于Echarts实现可视化数据大屏大数据可视化
前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【150套 HTML+ Echarts大数据可视化源码 】
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
三、作品演示
四、代码实现
1.HTML
doctype html> <html> <head> doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>大数据可视化title> <link type="text/css" href="css/public.css" rel="stylesheet"> <link type="text/css" href="css/icon.css" rel="stylesheet"> <link type="text/css" href="css/index.css" rel="stylesheet"> <script type="text/javascript"> document.documentElement.style.fontSize = document.documentElement.clientWidth /768*100 + 'px'; script> <script src="js/echarts.min.js">script> head> <style> .abc{ } style> <body> <div class="bg"> <div class="title">大数据可视化div> <div class="leftMain"> <div class="leftMain_top"> <div class="leftMain_topIn"> <ul> <li> <div class="liIn"> <h3>这里是标题1h3> <p class="shu"><span class="shu1">6890.69span><i>元i>p> <div class="zi"><span class="span1">小标题：文字span><span>小标题：文字span>div> <span class="border_bg_leftTop">span> <span class="border_bg_rightTop">span> <span class="border_bg_leftBottom">span> <span class="border_bg_rightBottom">span> div> li> <li> <div class="liIn"> <h3>这里是标题2h3> <p class="shu"><span class="shu2">6090.99span><i>元i>p> <div class="zi"><span class="span1">小标题：文字span><span>小标题：文字span>div> <span class="border_bg_leftTop">span> <span class="border_bg_rightTop">span> <span class="border_bg_leftBottom">span> <span class="border_bg_rightBottom">span> div> li> <li> <div class="liIn"> <h3>这里是标题3h3> <p class="shu"><span class="shu3">2890.39span><i>元i>p> <div class="zi"><span class="span1">小标题：文字span><span>小标题：文字span>div> <span class="border_bg_leftTop">span> <span class="border_bg_rightTop">span> <span class="border_bg_leftBottom">span> <span class="border_bg_rightBottom">span> div> li> <li> <div class="liIn"> <h3>这里是标题4h3> <p class="shu"><span class="shu4">7590.15span><i>元i>p> <div class="zi"><span class="span1">小标题：文字span><span>小标题：文字span>div> <span class="border_bg_leftTop">span> <span class="border_bg_rightTop">span> <span class="border_bg_leftBottom">span> <span class="border_bg_rightBottom">span> div> li> ul> div> div> <div class="leftMain_middle"> <div class="leftMain_middle_left"> <div class="leftMain_middle_leftIn"> <h3>这里是标题h3> <div class="biaoge" style="width:100%; height:25vh" id="chartmain">div> <script type="text/javascript"> //window.onload = function () { //指定图表的配置项和数据 var dataAxis = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日']; var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200]; var yMax = 500; var dataShadow = []; for (var i = 0; i < data.length; i++) { dataShadow.push(yMax); } option = { title: { text: '', subtext: '' }, grid:{ x:40, y:40, x2:20, y2:20, }, xAxis: { data: dataAxis, axisLabel: { /*inside: true,*/ interval:0, textStyle: { color: '#fff', fontSize: 12 } }, axisTick: { show: false, }, axisLine: { show: true, symbol:['none', 'arrow'], symbolOffset: 12, lineStyle:{ color: '#fff', } }, z: 10 }, yAxis: { type: 'value', name: '单位：元', axisLine: { show: true, symbol: ['none', 'arrow'], symbolOffset: 12, lineStyle:{ color: '#fff', } }, axisTick: { show: false }, axisLabel: { textStyle: { color: '#fff', fontSize: 12 } } }, dataZoom: [ { type: 'inside' } ], series: [ { // For shadow type: 'bar', itemStyle: { color: 'rgba(0,0,0,0.05)' }, barGap: '-100%', barCategoryGap: '40%', data: dataShadow, animation: false }, { type: 'bar', itemStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#0efdff'}, {offset: 0.5, color: '#188df0'}, {offset: 1, color: '#188df0'} ] ) }, emphasis: { itemStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#2378f7'}, {offset: 0.7, color: '#2378f7'}, {offset: 1, color: '#0efdff'} ] ) } }, data: data } ] }; // Enable data zoom when user click bar. /*var zoomSize = 6; myChart.on('click', function (params) { console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]); myChart.dispatchAction({ type: 'dataZoom', startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)] }); });*/ //获取dom容器 var myChart = echarts.init(document.getElementById('chartmain')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //}; script> <span class="border_bg_leftTop">span> <span class="border_bg_rightTop">span> <span class="border_bg_leftBottom">span> <span class="border_bg_rightBottom">span> div> div> <div class="leftMain_middle_right"> <div class="leftMain_middle_rightIn"> <h3>这里是标题h3> <div class="biaoge biaoge_pai" style="width:100%; height:25vh"> <div class="biaoge_paiIn"> <ul> <li> <div class="liIn"> <div class="liIn_left"><span class="bot">span><span class="zi">第一名span>div> <div class="liIn_line"><div class="line_lineIn" style="width:98.5%;">div>div> <p class="num">98.5%p> div> li> <li> <div class="liIn liIn2"> <div class="liIn_left"><span class="bot">span><span class="zi">第二名span>div> <div class="liIn_line"><div class="line_lineIn" style="width:88.5%;">div>div> <p class="num">88.5%p> div> li> <li> <div class="liIn liIn3"> <div class="liIn_left"><span class="bot">span><span class="zi">第三名span>div> <div class="liIn_line"><div class="line_lineIn" style="width:68.5%;">div>div> <p class="num">68.5%p> div> li> <li> <div class="liIn liIn4"> <div class="liIn_left"><span class="bot">span><span class="zi">第四名span>div> <div class="liIn_line"><div class="line_lineIn" style="width:40.5%;">div>div> <p class="num">40.5%p> div> li> <li> <div class="liIn liIn5"> <div class="liIn_left"><span class="bot">span><span class="zi">第五名span>div> <div class="liIn_line"><div class="line_lineIn" style="width:22.5%;">div>div> <p class="num">22.5%p> div> li> <li> <div class="liIn liIn6"> <div class="liIn_left"><span class="bot">span><span class="zi">第六名span>div> <div class="liIn_line"><div class="line_lineIn" style="width:10.5%;">div>div> <p class="num">10.5%p> div> li> ul> div> div> <span class="border_bg_leftTop">span> <span class="border_bg_rightTop">span> <span class="border_bg_leftBottom">span> <span class="border_bg_rightBottom">span> div> div> div> <div class="leftMain_middle"> <div class="leftMain_middle_left"> <div class="leftMain_middle_leftIn"> <h3>这里是标题h3> <div class="biaoge" style="width:100%; height:25vh" id="chartmain_zhe">div> <script type="text/javascript"> //window.onload = function (){ //指定图表的配置项和数据 option = { title: { text: '' }, tooltip: { trigger: 'axis' }, legend: { textStyle: { color: '#fff', fontSize: 12, }, right:'10%', data: ['折线一', '折线二'] }, grid:{ x:40, y:40, x2:20, y2:20, }, toolbox: { feature: { //saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, axisLabel: { /*inside: true,*/ interval:0, textStyle: { color: '#fff', fontSize: 12 } }, axisTick: { show: false, }, axisLine: { show: true, symbol:['none', 'arrow'], symbolOffset: 12, lineStyle:{ color: '#fff', } }, data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'] }, yAxis: { type: 'value', axisLine: { show: true, symbol: ['none', 'arrow'], symbolOffset: 12, lineStyle:{ color: '#fff', } }, axisTick: { show: false }, axisLabel: { textStyle: { color: '#fff', fontSize: 12 } } }, series: [ { name: '折线一', type: 'line', stack: '总量', data: [280, 102, 191, 134, 390, 230, 210], itemStyle: { normal: { color: "#0efdff",//折线点的颜色 lineStyle: { color: "#0efdff",//折线的颜色 width:2, } }, } }, { name: '折线二', type: 'line', stack: '总量', data: [100, 132, 131, 234, 290, 330, 110] }, ] }; //获取dom容器 var myChart = echarts.init(document.getElementById('chartmain_zhe')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //}; script> <span class="border_bg_leftTop">span> <span class="border_bg_rightTop">span> <span class="border_bg_leftBottom">span> <span class="border_bg_rightBottom">span> div> div> <div class="leftMain_middle_right"> <div class="leftMain_middle_rightIn"> <h3>这里是标题h3> <div class="biaoge biaoge_bi" style="width:100%; height:25vh"> <ul> <li> <div class="liIn"> <p class="shu shu1">23p> <p class="zi">今日收益比例p> div> li> <li> <div class="liIn"> <p class="shu shu2">107p> <p class="zi">本月收益比例p> div> li> <li> <div class="liIn"> <p class="shu shu3">107p> <p class="zi">历史收益比例p> div> li> <li> <div class="liIn"> <p class="shu shu4">23p> <p class="zi">今日收益比例p> div> li> <li> <div class="liIn"> <p class="shu shu5">23p> <p class="zi">本月收益比例p> div> li> <li> <div class="liIn"> <p class="shu shu6">23p> <p class="zi">历史收益比例p> div> li> ul> div> <span class="border_bg_leftTop">span> <span class="border_bg_rightTop">span> <span class="border_bg_leftBottom">span> <span class="border_bg_rightBottom">span> div> div> div> div> <div class="rightMain"> <div class="rightMain_top"> <div class="rightMain_topIn"> <h3>这里是标题h3> <div class="biaoge" style="width:100%; height:30vh" id="chartmain_bing">div> <script type="text/javascript"> option = { title: { text: '数据情况统计', subtext: '', left: 'right', textStyle: { color: '#fff', fontSize: 12 } }, tooltip: { trigger: 'item', formatter: '{a}
{b} : {c} ({d}%)' }, legend: { // orient: 'vertical', // top: 'middle', type: 'scroll', orient: 'vertical', right: 10, top: 40, bottom: 20, left: 'right', data: ['西凉', '益州', '兖州', '荆州', '幽州'], textStyle: { color: '#fff', fontSize: 12 } }, grid:{ x:'-10%', y:40, x2:20, y2:20, }, color : [ '#09d0fb', '#f88cfb', '#95f8fe', '#f9f390', '#ecfeb7' ], series: [ { type: 'pie', radius: '65%', center: ['50%', '50%'], selectedMode: 'single', data: [ {value: 1548, name: '幽州', }, {value: 535, name: '荆州'}, {value: 510, name: '兖州'}, {value: 634, name: '益州'}, {value: 735, name: '西凉'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; //获取dom容器 var myChart = echarts.init(document.getElementById('chartmain_bing')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); script> <span class="border_bg_leftTop">span> <span class="border_bg_rightTop">span> <span class="border_bg_leftBottom">span> <span class="border_bg_rightBottom">span> div> div> <div class="rightMain_bottom"> <div class="rightMain_bottomIn"> <h3>这里是标题h3> <div class="biaoge biaoge_list" style="width:100%; height:36vh"> <div class="biaoge_listIn"> <ul class="ul_title"> <li>用户li> <li>类型号li> <li>类别一li> <li>类别二li> <li>类别三li> ul> <div class="ul_list"> <div class="ul_listIn"> <ul class="ul_con"> <li>张三li> <li>11li> <li>类别一li> <li>类别二li> <li>类别三li> ul> <ul class="ul_con"> <li>张三li> <li>12li> <li>类别一li> <li>类别二li> <li>类别三li> ul> <ul class="ul_con"> <li>张三li> <li>13li> <li>类别一li> <li>类别二li> <li>类别三li> ul> <ul class="ul_con"> <li>张三li> <li>14li> <li>类别一li> <li>类别二li> <li>类别三li> ul> <ul class="ul_con"> <li>张三li> <li>15li> <li>类别一li> <li>类别二li> <li>类别三li> ul> <ul class="ul_con"> <li>张三li> <li>16li> <li>类别一li> <li>类别二li> <li>类别三li> ul> <ul class="ul_con"> <li>张三li> <li>11li> <li>类别一li> <li>类别二li> <li>类别三li> ul> <ul class="ul_con"> <li>张三li> <li>12li> <li>类别一li> <li>类别二li> <li>类别三li> ul> <ul class="ul_con"> <li>张三li> <li>13li> <li>类别一li> <li>类别二li>