前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
文章目录
- 五、更多干货
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
三、作品演示
四、代码实现
1.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>某某市某某区办税渠道运行状态大数据监控平台</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<div class="headerLeft">
<h3>服务数据</h3>
</div>
<div class="headerCenter">
<h1>某某市某某区办税渠道运行状态大数据监控平台</h1>
</div>
<div class="headerRight">
<h3>业务数据</h3>
</div>
</header>
<section>
<div class="firstCon">
<div class="firstCon-left">
<h4>各业务平均办理时间/分钟</h4>
<div class="firstLeftsec">
<div class="contain">
<div class="firsttab" id="firsttab1"></div>
<p>综合业务</p>
</div>
<div class="contain">
<div class="firsttab" id="firsttab2"></div>
<p>综合业务</p>
</div>
<div class="contain">
<div class="firsttab" id="firsttab3"></div>
<p>综合业务</p>
</div>
<div class="contain">
<div class="firsttab" id="firsttab4"></div>
<p>综合业务</p>
</div>
</div>
</div>
<div class="first-center">
<h3>当前大厅等候人数</h3>
<div class="firstcenLeft">
<div class="flag">
<strong>35</strong>
<p>综合业务</p>
</div>
<div class="flag">
<strong>35</strong>
<p>综合业务</p>
</div>
<div class="flag">
<strong>35</strong>
<p>综合业务</p>
</div>
</div>
<div class="firstcenCen">
<span>1</span>
<span>4</span>
<span>9</span>
</div>
<div class="firstcenRight">
<div class="flag">
<strong>35</strong>
<p>综合业务</p>
</div>
<div class="flag">
<strong>35</strong>
<p>综合业务</p>
</div>
<div class="flag">
<strong>35</strong>
<p>综合业务</p>
</div>
</div>
</div>
<div class="firstCon-right">
<h4>各业务平均办理时间/分钟</h4>
<div class="firstLeftsec">
<div class="contain">
<div class="firsttab" id="firsttab5"></div>
<p>综合业务</p>
</div>
<div class="contain">
<div class="firsttab" id="firsttab6"></div>
<p>综合业务</p>
</div>
<div class="contain">
<div class="firsttab" id="firsttab7"></div>
<p>综合业务</p>
</div>
<div class="contain">
<div class="firsttab" id="firsttab8"></div>
<p>综合业务</p>
</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="secondCon">
<div class="secondLeft">
<div class="secondLeftCon">
<div class="secondLeftTab">
<div class="fig">
<p>各办税渠道使用情况</p>
</div>
<div class="fig">
<p>各办税渠道使用情况</p>
<em>80人</em>
</div>
<div class="fig">
<p>各办税渠道使用情况</p>
<em>120人</em>
</div>
<div class="fig">
<p>各办税渠道使用情况</p>
<em>70人</em>
</div>
</div>
<div class="secondLeftTab">
<div class="fig">
<p>接待情况</p>
</div>
<div class="reception">
<div class="recetit">
<strong>40人</strong>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="changecolor"></span>
<span class="changecolor"></span>
<span class="changecolor"></span>
<span class="changecolor"></span>
<p>本月新办户数</p>
</div>
<div class="recetit">
<strong>40人</strong>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="changecolor"></span>
<span class="changecolor"></span>
<span class="changecolor"></span>
<span class="changecolor"></span>
<p>本月新办户数</p>
</div>
<div class="recetit">
<strong>40人</strong>
<span></span>
<span></span>
<span></span>
<span class="changecolor"></span>
<span class="changecolor"></span>
<span class="changecolor"></span>
<span class="changecolor"></span>
<span class="changecolor"></span>
<span class="changecolor"></span>
<p>本月新办户数</p>
</div>
</div>
</div>
</div>
</div>
<div class="secondCen">
<div class="secondCenCon">
<h3>业务办理实时监控</h3>
<div class="secondContit">
<div class="secondContitleft">
<p>今日累计业务办理量</p>
<img src="image/line.png" alt="">
<ul class="china">
<li><a href="">发票代开</a></li>
<li><a href="">发票发售</a></li>
<li><a href="">纳税申报</a></li>
<li><a href="">发票验旧</a></li>
<li><a href="">发票认证</a></li>
</ul>
<img src="image/line.png" alt="">
<ul class="number">
<li><a href="">20</a></li>
<li><a href="">40</a></li>
<li><a href="">32</a></li>
<li><a href="">34</a></li>
<li><a href="">30</a></li>
</ul>
<img src="image/line.png" alt="">
</div>
<div class="secondContitright" id="secondContitright">
<div class="charbar" id="charbar"></div>
</div>
</div>
<div class="secondContit">
<div class="secondContitleft">
<p>今日累计业务办理量</p>
<img src="image/line.png" alt="">
<ul class="china">
<li><a href="">发票代开</a></li>
<li><a href="">发票发售</a></li>
<li><a href="">纳税申报</a></li>
<li><a href="">发票验旧</a></li>
<li><a href="">发票认证</a></li>
</ul>
<img src="image/line.png" alt="">
<ul class="number">
<li><a href="">20</a></li>
<li><a href="">40</a></li>
<li><a href="">32</a></li>
<li><a href="">34</a></li>
<li><a href="">30</a></li>
</ul>
<img src="image/line.png" alt="">
</div>
<div class="secondContitright" id="secondContitright2">
<div class="charbar" id="charbar2"></div>
</div>
</div>
</div>
</div>
<div class="secondRight">
<div class="secondRightCon">
<div class="secondLeftTab">
<div class="fig">
<p>区域收入情况</p>
</div>
<div class="secondRighttit">
<div class="secondRighttext">
<div class="text">
<p>省级以上</p>
<span>442户</span>
</div>
<div class="text">
<p>省级以上</p>
<span>442户</span>
</div>
<h4>重点税源户数</h4>
</div>
<div class="secondRighttext">
<div class="secondRighttextChar" id="secondRighttextChar">
</div>
<h4 class="sec">重点税源户数</h4>
</div>
<div class="secondRighttext">
<div class="secondRighttextChar" id="secondRighttextChar1">
</div>
<h4 class="sec">税收占比</h4>
</div>
</div>
</div>
<div class="secondLeftTab">
<div class="fig">
<p>数据统计分析</p>
</div>
<div class="secondChar" id="secondChar">
</div>
</div>
</div>
</div>
</div>
<div class="thirdCon">
<div class="thirdLeft">
<div class="thirdLeftCon">
<div class="secondLeftTab">
<div class="fig">
<p>当日纳税人咨询最热问题 TOP5</p>
</div>
<ul class="hottop">
<li><span>1</span>
<p>如何代开发票？</p><a href="">了解详情</a></li>
<li><span>2</span>
<p>如何代开发票？</p><a href="">了解详情</a></li>
<li><span>3</span>
<p>如何代开发票？</p><a href="">了解详情</a></li>
<li><span>4</span>
<p>如何代开发票？</p><a href="">了解详情</a></li>
<li><span>5</span>
<p>如何代开发票？</p><a href="">了解详情</a></li>
</ul>
</div>
</div>
</div>
<div class="thirdCen">
<div class="thirdCenCon">
<div class="txt txtleft">
<div class="content">
<h4>当日各时段大厅人流量曲线图</h4>
<div class="contentChar" id="contentChar1"></div>
</div>
</div>
<div class="txt txtright">
<div class="content">
<h4>当日各时段大厅人流量曲线图</h4>
<div class="contentChar" id="contentChar2"></div>
</div>
</div>
</div>
</div>
<div class="thirdRight">
<div class="thirdRightCon">
<div class="secondLeftTab">
<div class="fig">
<p>当日纳税人咨询最热问题 TOP5</p>
</div>
<ul class="hottop">
<li><span>1</span>
<p>如何代开发票？</p><a href="">了解详情</a></li>
<li><span>2</span>
<p>如何代开发票？</p><a href="">了解详情</a></li>
<li><span>3</span>
<p>如何代开发票？</p><a href="">了解详情</a></li>
<li><span>4</span>
<p>如何代开发票？</p><a href="">了解详情</a></li>
<li><span>5</span>
<p>如何代开发票？</p><a href="">了解详情</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="footerleft">
<img src="image/right.png" alt="" class="rightimg">
<div class="home">
<img src="image/home.png" alt="">
<button id="homebtn" value="首页">首页</button>
</div>
<div class="con">
<p>当前时间</p>
<h4>2018年1月9日 星期四 15:00</h4>
</div>
</div>
<div class="footercen"></div>
<div class="footerright"></div>
</footer>
</body>
</html>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="js/jquery.1.10.min.js"></script>
<script src="js/chars.js"></script>
2.CSS
img {
border: none;
}
a {
text-decoration: none;
}
body {
background-color: #032e61;
}
/*-----------header-------------*/
header {
width: 100%;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #004c98;
}
.headerLeft {
width: 27%;
height: 60px;
background-color: #004c98;
float: left;
text-align: center;
}
.headerLeft h3 {
color: #07f7f4;
font-size: 20px;
}
.headerCenter {
width: 46%;
height: 60px;
background-color: #002144;
float: left;
text-align: center;
}
.headerCenter h1 {
color: #fff;
font-size: 26px;
}
.headerRight {
width: 27%;
height: 60px;
background-color: #004c98;
float: left;
text-align: center;
}
.headerRight h3 {
color: #07f7f4;
font-size: 20px;
}
/*----------section------------*/
section {
width: 100%;
}
.firstCon {
width: 100%;
height: 125px;
background-color: #02356e;
overflow: hidden;
}
.firstCon-left {
width: 27%;
height: 125px;
overflow: hidden;
float: left;
}
.first-center {
width: 46%;
height: 125px;
background-color: #01458e;
float: left;
}
.firstCon-left h4 {
color: #07f7f4;
font-size: 18px;
margin-left: 30px;
overflow: hidden;
margin-top: 10px;
}
.firstCon-right {
float: left;
}
.firstCon-right h4 {
color: #07f7f4;
font-size: 18px;
margin-left: 30px;
overflow: hidden;
margin-top: 10px;
}
.firstLeftsec {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: 30px;
}
.contain {
width: 60px;
height: 80px;
float: left;
margin-right: 23px;
text-align: center;
}
.firsttab {
width: 60px;
height: 60px;
}
.contain p {
color: #00b3fe;
font-size: 13px;
}
.first-center h3 {
font-size: 18px;
color: #06dae5;
text-align: center;
}
.firstcenLeft {
width: 33.33%;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
}
.flag {
float: left;
text-align: center;
margin-right: 4px;
margin-top: 10px;
}
.flag strong {
font-size: 24px;
color: #fff;
border-right: 1px solid #ccc;
width: 55px;
display: block;
}
.flag:nth-of-type(3) strong {
border-right: none;
}
.flag p {
color: #06dae5;
font-size: 14px;
padding-top: 20px;
}
.firstcenCen {
width: 33.33%;
float: left;
height: 100px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0px 10px;
padding-top: 14px;
padding-left: 25px;
}
.firstcenCen span {
display: block;
float: left;
width: 50px;
border: 1px solid #05bdc9;
box-shadow: inset 0 0 3px 5px #00b3fe;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
height: 70px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-right: 6px;
font-size: 30px;
color: #ffff01;
font-weight: 900;
text-align: center;
}
3.JavaScript
var dom = document.getElementById("firsttab1");
var dom2 = document.getElementById("firsttab2");
var dom3 = document.getElementById("firsttab3");
var dom4 = document.getElementById("firsttab4");
var dom5 = document.getElementById("firsttab5");
var dom6 = document.getElementById("firsttab6");
var dom7 = document.getElementById("firsttab7");
var dom8 = document.getElementById("firsttab8");
var dom9 = document.getElementById("charbar");
var dom10 = document.getElementById("charbar2");
var dom11 = document.getElementById("secondRighttextChar");
var dom12 = document.getElementById("secondRighttextChar1");
var dom13 = document.getElementById("secondChar");
var dom14 = document.getElementById("contentChar1");
var dom15 = document.getElementById("contentChar2");
var myChart = echarts.init(dom, "wonderland");
var myChart2 = echarts.init(dom2, "wonderland");
var myChart3 = echarts.init(dom3, "wonderland");
var myChart4 = echarts.init(dom4, "wonderland");
var myChart5 = echarts.init(dom5, "wonderland");
var myChart6 = echarts.init(dom6, "wonderland");
var myChart7 = echarts.init(dom7, "wonderland");
var myChart8 = echarts.init(dom8, "wonderland");
var myChart9 = echarts.init(dom9, "wonderland");
var myChart10 = echarts.init(dom10, "wonderland");
var myChart11 = echarts.init(dom11, "wonderland");
var myChart12 = echarts.init(dom12, "wonderland");
var myChart13 = echarts.init(dom13, "wonderland");
var myChart14 = echarts.init(dom14, "wonderland");
var myChart15 = echarts.init(dom15, "wonderland");
window.addEventListener("resize", () => {
this.myChart.resize();
this.myChart2.resize();
this.myChart3.resize();
this.myChart4.resize();
this.myChart5.resize();
this.myChart6.resize();
this.myChart7.resize();
this.myChart8.resize();
this.myChart9.resize();
this.myChart10.resize();
this.myChart11.resize();
this.myChart12.resize();
this.myChart13.resize();
this.myChart14.resize();
this.myChart15.resize();
});
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [{
name: '访问来源',
type: 'pie',
radius: ['40%', '80%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold',
color: ['#fff'],
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 2.5,
name: '2.5',
itemStyle: {
color: "#0268e8"
}
}]
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
if (option && typeof option === "object") {
myChart2.setOption(option, true);
}
if (option && typeof option === "object") {
myChart3.setOption(option, true);
}
if (option && typeof option === "object") {
myChart4.setOption(option, true);
}
if (option && typeof option === "object") {
myChart5.setOption(option, true);
}
if (option && typeof option === "object") {
myChart6.setOption(option, true);
}
if (option && typeof option === "object") {
myChart7.setOption(option, true);
}
if (option && typeof option === "object") {
myChart8.setOption(option, true);
}
option1 = {
title: {
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'right',
data: ['发代开', '发票发', '纳税申', '发票旧', '发认证']
},
series: [{
name: '业务办理',
type: 'pie',
radius: '35%',
center: ['50%', '60%'],
data: [{
value: 335,
name: '发票代开'
},
{
value: 310,
name: '发票发售'
},
{
value: 234,
name: '纳税申报'
},
{
value: 135,
name: '发票验旧'
},
{
value: 1548,
name: '发票认证'
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
color: function(params) {
//自定义颜色
var colorList = [
'#01b7ff', '#fd7c28', '#6fb440', '#ffc800', '#2d89dc',
];
textStyle: {
// fontWeight : 300 ,
fontSize: 8 //文字的字体大小
}
return colorList[params.dataIndex]
}
}
}
}]
};
if (option1 && typeof option1 === "object") {
myChart9.setOption(option1, true);
}
if (option1 && typeof option1 === "object") {
myChart10.setOption(option1, true);
}
option2 = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['省级', '市级'],
axisTick: {
alignWithLabel: true
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff', //左边线的颜色
width: '2' //坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#fff', //坐标值得具体的颜色
}
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff', //左边线的颜色
width: '2' //坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#fff', //坐标值得具体的颜色
}
}
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [32.62, 52.68],
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#05fef8', '#fedc00'];
return colorList[params.dataIndex];
}
}
}
}]
};
if (option2 && typeof option2 === "object") {
myChart11.setOption(option2, true);
}
option3 = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直接问', '件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [{
name: '省级市级',
type: 'pie',
radius: ['30%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#05fef8', '#fedc00'];
return colorList[params.dataIndex];
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 335,
name: '省级以上'
},
{
value: 310,
name: '市级以上'
}
]
}]
};
if (option3 && typeof option3 === "object") {
myChart12.setOption(option3, true);
}
// Generate data
var category = [];
var dottedBase = +new Date();
var lineData = [];
var barData = [];
for (var i = 0; i < 20; i++) {
var date = new Date(dottedBase += 3600 * 24 * 1000);
category.push([
date.getFullYear(),
date.getMonth() + 1,
date.getDate()
].join('-'));
var b = Math.random() * 200;
var d = Math.random() * 200;
barData.push(b)
lineData.push(d + b);
}
// option
option4 = {
backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['line', 'bar'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [{
name: 'line',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 5,
data: lineData
}, {
name: 'bar',
type: 'bar',
barWidth: 5,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#fbb307'
},
{
offset: 1,
color: '#84f00e'
}
]
)
}
},
data: barData
}, {
name: 'line',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: 'rgba(20,200,212,0.5)'
},
{
offset: 0.2,
color: 'rgba(20,200,212,0.2)'
},
{
offset: 1,
color: 'rgba(20,200,212,0)'
}
]
)
}
},
z: -12,
data: lineData
}, {
name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
normal: {
color: '#0f375f'
}
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -10,
data: lineData
}]
};
if (option4 && typeof option4 === "object") {
myChart13.setOption(option4, true);
}
option5 = {
xAxis: {
type: 'category',
axisTick: {
alignWithLabel: true
},
axisTick: {
show: false
},
data: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff', //左边线的颜色
width: '2' //坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#fff', //坐标值得具体的颜色
}
}
},
yAxis: {
type: 'value',
axisTick: {
show: true
},
splitLine: {
// show:false
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff', //左边线的颜色
width: '2' //坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#fff', //坐标值得具体的颜色
}
}
},
series: [{
data: [5, 8, 20, 22, 24, 22, 35, 18, 10, 1],
type: 'line',
smooth: .2,
color: '#04fefa'
}]
};
if (option5 && typeof option5 === "object") {
myChart14.setOption(option5, true);
}
if (option5 && typeof option5 === "object") {
myChart15.setOption(option5, true);
}
