🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,,基于html+css+javascript+echarts制作, 可以在此基础上重新开发。
本项目中使用的是echarts图表库,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【150套 HTML+ Echarts大数据可视化源码 】
ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>广西电子商务公共服务平台大数据中心title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<style>
.t_title {
width: 100%;
height: 100%;
text-align: center;
font-size: 2.5em;
line-height: 80px;
color: #fff;
}
#chart_map {
cursor: pointer;
}
.t_show {
position: absolute;
top: 0;
right: 0;
border-radius: 2px;
background: #2C58A6;
padding: 2px 5px;
color: #fff;
cursor: pointer;
}
style>
head>
<body>
<div class="header">
<div class="bg_header">
<div class="header_nav fl t_title">
广西电子商务公共服务平台大数据中心
div>
div>
div>
<div class="data_content">
<div class="data_main">
<div class="main_left fl">
<div class="left_1 t_btn6" style="cursor: pointer;">
<div class="t_line_box">
<i class="t_l_line">i>
<i class="l_t_line">i>
div>
<div class="t_line_box">
<i class="t_r_line">i>
<i class="r_t_line">i>
div>
<div class="t_line_box">
<i class="l_b_line">i>
<i class="b_l_line">i>
div>
<div class="t_line_box">
<i class="r_b_line">i>
<i class="b_r_line">i>
div>
<div class="main_title">
<img src="picture/t_1.png" alt=""> 全区快递企业月寄递量
div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;">div>
div>
<div class="left_2" style="cursor: pointer;">
<div class="t_line_box">
<i class="t_l_line">i>
<i class="l_t_line">i>
div>
<div class="t_line_box">
<i class="t_r_line">i>
<i class="r_t_line">i>
div>
<div class="t_line_box">
<i class="l_b_line">i>
<i class="b_l_line">i>
div>
<div class="t_line_box">
<i class="r_b_line">i>
<i class="b_r_line">i>
div>
<div class="main_title">
<img src="picture/t_2.png" alt=""> 电子商务销售额、订单数
div>
<div id="chart_2" class="chart t_btn9" style="width:100%;height: 280px;">div>
div>
div>
<div class="main_center fl">
<div class="center_text" style="position: relative;">
<div class="t_line_box">
<i class="t_l_line">i>
<i class="l_t_line">i>
div>
<div class="t_line_box">
<i class="t_r_line">i>
<i class="r_t_line">i>
div>
<div class="t_line_box">
<i class="l_b_line">i>
<i class="b_l_line">i>
div>
<div class="t_line_box">
<i class="r_b_line">i>
<i class="b_r_line">i>
div>
<div class="main_title" style="width: 230px;">
<img src="picture/t_3.png" alt=""> 广西电子商务进农村
div>
<div id="chart_map" style="width:100%;height:610px;">
div>
<div class="linshi_zdy">
<ul>
<li><span>span>2015批(8个)li>
<li><span>span>2016批(15个)li>
<li><span>span>2017批(13个)li>
<li><span>span>2018批(11个)li>
ul>
div>
div>
div>
<style type="text/css">
.linshi_zdy {
position: absolute;
right: 0px;
top: 450px;
}
.linshi_zdy li {
width: 150px;
font-size: 16px;
padding: 3px 8px;
cursor: pointer;
}
.linshi_zdy span {
display: block;
width: 14px;
height: 14px;
float: left;
border-radius: 50%;
margin-top: 3px;
margin-right: 5px;
}
.linshi_zdy li:first-child {
color: #ff0000;
}
.linshi_zdy li:first-child span {
background: #ff0000;
}
.linshi_zdy li:nth-child(2) {
color: #9cff00;
}
.linshi_zdy li:nth-child(2) span {
background: #9cff00;
}
.linshi_zdy li:nth-child(3) {
color: #fff;
}
.linshi_zdy li:nth-child(3) span {
background: #fff;
}
.linshi_zdy li:nth-child(4) {
color: #f4a100;
}
.linshi_zdy li:nth-child(4) span {
background: #f4a100;
}
style>
<div class="main_right fr">
<div class="right_1">
<div class="t_line_box">
<i class="t_l_line">i>
<i class="l_t_line">i>
div>
<div class="t_line_box">
<i class="t_r_line">i>
<i class="r_t_line">i>
div>
<div class="t_line_box">
<i class="l_b_line">i>
<i class="b_l_line">i>
div>
<div class="t_line_box">
<i class="r_b_line">i>
<i class="b_r_line">i>
div>
<div class="main_title" style="width:220px;">
<img src="picture/t_4.png" alt=""> 全区快递月寄递数量
div>
<div id="chart_3" class="echart t_btn7" style="width:100%;height: 280px;">div>
div>
<div class="right_2">
<div class="t_line_box">
<i class="t_l_line">i>
<i class="l_t_line">i>
div>
<div class="t_line_box">
<i class="t_r_line">i>
<i class="r_t_line">i>
div>
<div class="t_line_box">
<i class="l_b_line">i>
<i class="b_l_line">i>
div>
<div class="t_line_box">
<i class="r_b_line">i>
<i class="b_r_line">i>
div>
<div class="main_title" style="width:200px;">
<img src="picture/t_5.png" alt=""> 电商企业入驻情况
div>
<div id="chart_4" class="echart fl t_btn4" style="width:100%;height: 280px;cursor: pointer;">div>
div>
div>
div>
<div class="data_bottom">
<div class="bottom_1 fl t_btn5" style="cursor: pointer;">
<div class="t_line_box">
<i class="t_l_line">i>
<i class="l_t_line">i>
div>
<div class="t_line_box">
<i class="t_r_line">i>
<i class="r_t_line">i>
div>
<div class="t_line_box">
<i class="l_b_line">i>
<i class="b_l_line">i>
div>
<div class="t_line_box">
<i class="r_b_line">i>
<i class="b_r_line">i>
div>
<div class="main_title">
<img src="picture/t_7.png" alt=""> 农村电商交易概况
div>
<div class="main_table t_btn8">
<table>
<thead>
<tr>
<th>概况名称th>
<th>详情th>
tr>
thead>
<tbody>
<tr>
<td>累计交易总金额td>
<td>4058.56 万元td>
tr>
<tr>
<td>累计交易订单数量td>
<td>437753 件td>
tr>
<tr>
<td>累计产品SKU数量td>
<td>360 个td>
tr>
<tr>
<td>本月交易总额td>
<td>242.42 万元td>
tr>
<tr>
<td>本月交易订单数量td>
<td>5283 件td>
tr>
tbody>
table>
div>
div>
<div class="bottom_center fl">
<div class="bottom_2 fl">
<div class="t_line_box">
<i class="t_l_line">i>
<i class="l_t_line">i>
div>
<div class="t_line_box">
<i class="t_r_line">i>
<i class="r_t_line">i>
div>
<div class="t_line_box">
<i class="l_b_line">i>
<i class="b_l_line">i>
div>
<div class="t_line_box">
<i class="r_b_line">i>
<i class="b_r_line">i>
div>
<div class="main_title" style="width:300px;left:40%;">
<img src="picture/t_7.png" alt=""> 广西电子商务热销产品排行榜
div>
<div class="main_table t_btn8">
<table>
<thead>
<tr>
<th>产品名称th>
<th>品种th>
<th>产地th>
tr>
thead>
<tbody>
<tr>
<td>荔浦百香果td>
<td>百香果td>
<td>荔浦td>
tr>
<tr>
<td>荔浦砂糖桔td>
<td>砂糖桔td>
<td>荔浦td>
tr>
<tr>
<td>90g将军峰小方盒绿茶td>
<td>中小叶种td>
<td>广西贺州td>
tr>
<tr>
<td>珍珠糯玉米td>
<td>粮食td>
<td>忻城县td>
tr>
<tr>
<td>桂花红糖td>
<td>桂花红糖td>
<td>大新县td>
tr>
tbody>
table>
div>
div>
<div class="bottom_3 fl">
<div class="t_line_box">
<i class="t_l_line">i>
<i class="l_t_line">i>
div>
<div class="t_line_box">
<i class="t_r_line">i>
<i class="r_t_line">i>
div>
<div class="t_line_box">
<i class="l_b_line">i>
<i class="b_l_line">i>
div>
<div class="t_line_box">
<i class="r_b_line">i>
<i class="b_r_line">i>
div>
<div class="main_title" style="width:260px;left:45%;">
<img src="picture/t_7.png" alt=""> 电子商务热销店铺排行榜
div>
<div class="main_table t_btn2">
<table>
<thead>
<tr>
<th>店铺名称th>
<th>产品th>
<th>销售额(月销)th>
tr>
thead>
<tbody>
<tr>
<td>鲜迪食品专营店td>
<td>海鸭蛋td>
<td>2.8万td>
tr>
<tr>
<td>中鼎水果专营店td>
<td>红心芭乐番石榴td>
<td>2.5万td>
tr>
<tr>
<td>中闽飘香旗舰店td>
<td>广西桂林罗汉果td>
<td>2.4万td>
tr>
<tr>
<td>芋小妹旗舰店td>
<td>广西荔浦大芋头td>
<td>1.3万td>
tr>
<tr>
<td>桂甄堂旗舰店td>
<td>柳州螺狮粉td>
<td>1.1万td>
tr>
tbody>
table>
div>
div>
div>
<div class="bottom_4 fr">
<div class="t_line_box">
<i class="t_l_line">i>
<i class="l_t_line">i>
div>
<div class="t_line_box">
<i class="t_r_line">i>
<i class="r_t_line">i>
div>
<div class="t_line_box">
<i class="l_b_line">i>
<i class="b_l_line">i>
div>
<div class="t_line_box">
<i class="r_b_line">i>
<i class="b_r_line">i>
div>
<div class="main_title">
<img src="picture/t_7.png" alt=""> 平台活动案例
div>
<div class="main_table t_btn3 table_zdy">
<table>
<thead>
<tr>
<th>活动主题th>
<th>活动举办地th>
<th>日期th>
tr>
thead>
<tbody>
<tr>
<td><a href="#">2018广西特产行销全国a>td>
<td>南宁td>
<td>2018年td>
tr>
<tr>
<td><a href="#">2018壮族三月三电商节a>td>
<td>南宁td>
<td>2018年td>
tr>
<tr>
<td><a href="#">2018灵山荔枝节a>td>
<td>灵山县td>
<td>2018年td>
tr>
<tr>
<td>2018年货节td>
<td>广西td>
<td>2018年td>
tr>
<tr>
<td>2017好讲师大赛td>
<td>南宁td>
<td>2017年td>
tr>
tbody>
table>
div>
div>
div>
div>
body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js">script>
<script src="scripts/common.js">script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js">script>
<script src="scripts/datatool.js">script>
<script src="scripts/index.js">script>
<script src="scripts/guangxi.js">script>
<script type="text/javascript">
var dianshang = [];
function get_shuju() {
$.ajax({
type: "post",
async: false,
url: "/record/dianshang",
data: {},
dataType: "json",
success: function(res) {
// console.log(res);
// if (res) {
// for (var i = 0; i < res.length; i++) {
dianshang.push(res);
// };
// };
}
})
return dianshang;
}
//电商企业入驻情况
dianshang = get_shuju();
var changedetail = echarts.init(document.getElementById('chart_4'));
option = {
tooltip: {
trigger: 'axis',
// formatter: '{b}{a}: {c}{a1}: {c1}'
},
toolbox: {
show: false,
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
data: ['', ''],
show: false
},
grid: {
top: '18%',
right: '5%',
bottom: '8%',
left: '5%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['名优企业', '技术服务', '技术开发', '电子商务', '网络推广', '涉互联网企业'],
splitLine: {
show: false,
lineStyle: {
color: '#3c4452'
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#fff"
},
lineStyle: {
color: '#519cff'
},
alignWithLabel: true,
interval: 0
}
}],
yAxis: [{
type: 'value',
name: '入驻数据',
nameTextStyle: {
color: '#fff'
},
interval: 100000,
min: 0,
splitLine: {
show: true,
lineStyle: {
color: '#23303f'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#115372'
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#fff"
},
alignWithLabel: true,
interval: 0
}
}],
color: "yellow",
series: [{
name: '电商企业入驻',
type: 'bar',
data: [dianshang[0][0], dianshang[0][1], dianshang[0][2], dianshang[0][3], dianshang[0][4], dianshang[0][5]],
boundaryGap: '45%',
barWidth: '40%',
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#6bc0fb'
];
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
}
}]
};
changedetail.setOption(option);
script>
html>
* {
margin: 0;
padding: 0;
font-family: PingFangSC-Light, 微软雅黑;
}
body,
html {
width: 100%;
height: auto;
color: #333;
/* overflow: hidden;*/
background-size: 100% 100%;
background-color: #1F2327;
}
/*各浏览器显示不同,去掉蓝色边框*/
fieldset,
img,
input,
button {
border: none;
padding: 0;
margin: 0;
outline-style: none;
}
img {
border: 0;
vertical-align: middle;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
cursor: pointer;
}
/*清除浮动*/
.clear-both:before,
.clear-both:after {
display: table;
content: "";
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
clear: both;
}
.clearfix {
*zoom: 1;
/*IE/7/6*/
}
.fl {
float: left;
}
.fr {
float: right;
}
/*header开始*/
.header {
width: 100%;
height: 80px;
padding: 0 20px;
min-width: 1366px;
}
.bg_header {
width: 100%;
height: 80px;
background: url(../images/title.png) no-repeat;
background-size: 100% 100%;
}
.header>.header_logo {
padding: 18px 10px 10px 0px;
}
.header>.header_logo>a {
display: block;
}
.header>.header_logo>a>img {
width: 260px;
}
.header>.header_nav {
margin-left: 20px;
}
.header>.header_nav>ul>li {
float: left;
margin-right: 6px;
position: relative;
}
.header>.header_nav>ul>li>a {
display: block;
height: 80px;
padding: 0 10px 0 30px;
line-height: 80px;
color: #fff;
}
.header>.header_nav>ul>li>a:hover {
border-bottom: 4px solid #4b8df8;
}
.header>.header_nav>ul>li>img {
float: left;
position: absolute;
top: 33px;
left: 10px;
}
.header>.header_nav>ul>li>a.nav_current {
border-bottom: 4px solid #4b8df8;
}
.header>.header_myself {
width: 90px;
text-align: center;
}
.header>.header_myself>p {
color: #fff;
font-size: 13px;
margin-top: 15px;
}
.header>.header_myself>a {
color: #fff;
font-size: 13px;
}
/*content 开始*/
.content {
margin: 20px;
width: calc(100% - 40px);
min-width: 1366px;
}
.content>.content_title {
width: 100%;
height: 35px;
line-height: 35px;
background-color: #4b8df8;
box-sizing: border-box;
margin-bottom: 20px;
}
.content>.content_title>p {
color: #fff;
font-size: 16px;
font-weight: 600;
}
.content>.content_title>img {
margin: 10px 10px 0px 10px;
}
.content>.content_main {
min-width: 1366px;
}
.content>.content_main>.content_search>div {
margin-right: 25px;
}
.content>.content_main>.content_search>div>label {
width: 80px;
text-align: right;
}
.content>.content_main>.content_search>div>select,
.content>.content_main>.content_search>div>input {
width: 200px;
}
.content>.content_main>.content_table {
margin-top: 30px;
}
.content>.content_main>.content_table>table {
margin-top: 15px;
}
.content>.content_main>.content_table>table th:nth-child(1),
.content>.content_main>.content_table>table td:nth-child(1) {
width: 50px;
text-align: center;
}
.content>.content_main>.content_page>span {
font-size: 12.8px;
margin-top: 7px;
}
.content>.content_main>.content_page>select {
width: 70px;
margin-right: 10px;
}
/*content 结束*/
$(function() {
echart_1();
echart_2();
echart_3();
echart_map();
function echart_1() {
var myChart = echarts.init(document.getElementById('chart_1'));
option = {
tooltip: {
trigger: 'item',
formatter: "{a}
{b} : {c}件"
},
legend: {
x: 'center',
y: '15%',
data: ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'],
icon: 'circle',
textStyle: {
color: '#fff',
}
},
calculable: true,
series: [{
name: '',
type: 'pie',
radius: '45%',
center: ['60%', '65%'],
label: {
normal: {
show: true,
formatter: '{b}{c}万件'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
length2: 1,
},
emphasis: {
show: true
}
},
data: [{
value: 25097.63,
name: '南宁市',
itemStyle: {
normal: {
color: '#f845f1'
}
}
}, {
value: 4740.16,
name: '柳州市',
itemStyle: {
normal: {
color: '#ad46f3'
}
}
}, {
value: 2931.79,
name: '桂林市',
itemStyle: {
normal: {
color: '#5045f6'
}
}
}, {
value: 1174.27,
name: '梧州市',
itemStyle: {
normal: {
color: '#4777f5'
}
}
}, {
value: 1423.21,
name: '北海市',
itemStyle: {
normal: {
color: '#44aff0'
}
}
}, {
value: 1132.37,
name: '防城港市',
itemStyle: {
normal: {
color: '#45dbf7'
}
}
}, {
value: 929.50,
name: '钦州市',
itemStyle: {
normal: {
color: '#f6d54a'
}
}
}, {
value: 1555.20,
name: '贵港市',
itemStyle: {
normal: {
color: '#f69846'
}
}
}, {
value: 4881.52,
name: '玉林市',
itemStyle: {
normal: {
color: '#ad46f3'
}
}
}, {
value: 1114.72,
name: '百色市',
itemStyle: {
normal: {
color: '#32C12E'
}
}
}, {
value: 605.85,
name: '贺州市',
itemStyle: {
normal: {
color: '#90F5AA'
}
}
}, {
value: 596.23,
name: '河池市',
itemStyle: {
normal: {
color: '#F46852'
}
}
}, {
value: 419.44,
name: '来宾市',
itemStyle: {
normal: {
color: '#eaf048'
}
}
}, {
value: 1499.18,
name: '崇左市',
itemStyle: {
normal: {
color: '#9ff048'
}
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}, {
value: 0,
name: "",
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
show: false
},
labelLine: {
show: false
}
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
}
function echart_2() {
var myChart = echarts.init(document.getElementById('chart_2'));
myChart.clear();
option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['销售额', '订单数'],
textStyle: {
color: '#fff'
},
top: '8%'
},
grid: {
top: '40%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
color: ['#FF4949', '#FFA74D', '#FFEA51', '#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2018年9月', '2018年10月', '2018年11月', '2018年12月', '2019年1月'],
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
name: '',
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [{
name: '销售额',
type: 'line',
data: [3961.88, 4233.63, 4183.14, 3633.01, 3704.47]
}, {
name: '订单数',
type: 'line',
data: [3374.76, 3364.76, 3274.76, 3371.82, 3259.87]
}]
};
myChart.setOption(option);
}
function echart_map() {
var myChart = echarts.init(document.getElementById('chart_map'));
function showProvince() {
var geoCoordMap = {
'富川瑶族自治县': [111.1627, 24.4913],
'龙州县': [106.8545, 22.3426],
'南丹县': [107.5422, 24.9753],
'扶绥县': [107.9041, 22.6349],
'天峨县': [107.1737, 24.9991],
'大化瑶族自治县': [107.9981, 23.7364],
'乐业县': [106.5616, 24.7858],
'西林县': [105.0938, 24.4895],
'资源县': [110.6525, 26.0424],
'都安瑶族自治县': [108.1055, 23.9312],
'上林县': [108.6050, 23.4320],
'凌云县': [106.5615, 24.3475],
'东兰县': [107.3742, 24.5107],
'巴马瑶族自治县': [107.2596, 24.1410],
'田阳县': [106.9156, 23.7356],
'靖西市': [106.4176, 23.1340],
'大新县': [107.2012, 22.8304],
'三江侗族自治县': [109.6078, 25.7831],
'龙胜各族自治县': [110.0114, 25.7980],
'全州县': [111.0730, 25.9286],
'融安县': [109.3976, 25.2246],
'柳城县': [109.2446, 24.6505],
'忻城县': [108.6657, 24.0661],
'鹿寨县': [109.7517, 24.4730],
'宾阳县': [108.8103, 23.2176],
'兴业县': [109.8751, 22.7363],
'横县': [109.2614, 22.6799],
'灵山县': [109.2909, 22.4165],
'浦北县': [109.5569, 22.2715],
'东兴市': [107.9718, 21.5479],
'灌阳县': [111.1608, 25.4893],
'恭城瑶族自治县': [110.8283, 24.8313],
'荔浦县': [110.3981, 24.4965],
'昭平县': [110.8113, 24.1694],
'金秀瑶族自治县': [110.1894, 24.1303],
'桂平市': [110.0790, 23.3941],
'田东县': [107.1260, 23.5972],
'凤山县': [107.0422, 24.5469],
'环江毛南族自治县': [108.2583, 24.8260],
'马山县': [108.1770, 23.7081],
'罗城仫佬族自治县': [108.9046, 24.7773],
'德保县': [106.6155, 23.3234],
'融水苗族自治县': [109.2563, 25.0662],
'天等县': [107.1436, 23.0813],
'隆林县': [105.3438, 24.7706],
'那坡县': [105.8334, 23.3871],
'平果县': [107.5898, 23.3293]
};
var data = [{
name: '富川瑶族自治县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '龙州县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '南丹县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '扶绥县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '天峨县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '大化瑶族自治县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '乐业县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '西林县',
value: [50, '电商进农村示范县:
项目承建企业2家
电商服务站目前数量94个站点
广西乐村淘科技有限公司、广西国际电子商务中心
主要推广的产品有西林沙糖桔、麻鸭、姜晶等地理标志保护产品']
}, {
name: '资源县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '都安瑶族自治县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '上林县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '凌云县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '东兰县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '巴马瑶族自治县',
value: [50, '项目承建企业1家
电商服务站目前数量85个站点
参加电商培训人数1500人
特色粮经作物:包括蚕桑、火麻、龙骨花、中药材、红薯、马铃薯、小杂粮等。
主要承建内容:县级服务中心建设、乡镇级服务站、村级服务点建设']
}, {
name: '田阳县',
value: [50, '项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '靖西市',
value: [50, '项目承建企业1家
电商服务站目前数量60个站点
参加电商培训人数1500人
特色产品:靖西绣球、靖西壮锦、靖西东利大香儒
主要承建内容:靖西各镇乡村服务站点建设']
}, {
name: '大新县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '三江侗族自治县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '龙胜各族自治县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '全州县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '融安县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '柳城县',
value: [50, '项目承建企业2家
电商服务站目前数量125个站点
参加电商培训人数5000人
特色产品:新味嘉木瓜丝、寨隆壮方红糖
主要承建内容:农村电子商务公共服务体系村级服务点建设。']
}, {
name: '忻城县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '鹿寨县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '宾阳县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '兴业县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '横县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '灵山县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '浦北县',
value: [50, '项目承建企业2家
电商服务站目前数量161个站点
参加电商培训人数8572人
特色产品:浦北扁柑、浦北黑猪、官垌鱼、浦北黑叶荔
主要承建内容:建设浦北县电子商务公共服务中心,
县级公共服务中心与品牌推与展示区、创业孵化区、培训区集聚发展。']
}, {
name: '东兴市',
value: [50, '项目承建企业3家
电商服务站目前数量34个站点
特色产品:东兴红姑娘红薯、东兴黄皮果、京族二宝
主要承建内容:建设东兴市电子商务进农村服务中心。
含公共服务区、多平台运营服务区等。']
}, {
name: '灌阳县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '恭城瑶族自治县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '荔浦县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '昭平县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '金秀瑶族自治县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '桂平市',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '田东县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '凤山县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '环江毛南族自治县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '马山县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '罗城仫佬族自治县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '德保县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '融水苗族自治县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '天等县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '隆林县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '那坡县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}, {
name: '平果县',
value: [50, '电商进农村示范县:
项目承建企业24家
电商服务站目前数量24个站点
广西金岸科技有限公司等企业均以优秀标准验收
主要推广特产富川脐橙...']
}];
var max = 480,
min = 9;
var maxSize4Pin = 50,
minSize4Pin = 20;
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
myChart.setOption(option = {
tooltip: {
trigger: 'item',
formatter: function loadData(result) {
return result.name + '
' + result.value[3];
}
},
geo: {
zoom: 1.2,
show: true,
map: '广西',
mapType: '广西',
label: {
normal: {
show: true,
textStyle: {
color: "#4bf316"
}
},
emphasis: {
show: true,
textStyle: {
color: '#fff'
}
},
},
roam: true,
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 2,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(175,238,238, 0)'
}, {
offset: 1,
color: 'rgba( 47,79,79, .2)'
}],
globalCoord: false
},
shadowColor: 'rgba(128, 217, 248, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
}
},
series: [{
name: '电商进农村示范县',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function(val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min);
var b = minSize4Pin - a * min;
b = maxSize4Pin - a * max;
return a * val[2] + b;
},
label: {
normal: {
formatter: '{b}',
show: true,
textStyle: {
color: '#fff',
fontSize: 10,
}
}
},
itemStyle: {
normal: {
color: 'red',
}
},
zlevel: 6,
data: convertData(data),
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 47)),
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#05C3F9',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
}, ]
});
}
showProvince();
window.addEventListener("resize", function() {
myChart.resize();
});
}
function echart_3() {
var myChart = echarts.init(document.getElementById('chart_3'));
myChart.clear();
option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['顺丰快递', '邮政速递', '百世快递', '圆通速递', '中通速递', '申通快递', '韵达快递'],
textStyle: {
color: '#fff'
},
top: '8%'
},
grid: {
top: '40%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
color: ['#FF4949', '#FFA74D', '#FFEA51', '#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2018年9月', '2018年10月', '2018年11月', '2018年12月', '2019年1月'],
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
name: '单',
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [{
name: '顺丰快递',
type: 'line',
data: [3961, 4233, 4183, 3633, 3704]
}, {
name: '邮政速递',
type: 'line',
data: [3374, 3364, 3274, 3371, 3259]
}, {
name: '百世快递',
type: 'line',
data: [14, 15, 13, 14, 15]
}, {
name: '圆通速递',
type: 'line',
data: [686, 847, 895, 865, 886]
}, {
name: '中通速递',
type: 'line',
data: [6133, 6577, 7019, 6821, 7294]
}, {
name: '申通快递',
type: 'line',
data: [509, 862, 1481, 1552, 1333]
}, {
name: '韵达快递',
type: 'line',
data: [509, 900, 1350, 1487, 1600]
}]
};
myChart.setOption(option);
}
function echart_5() {
var myChart = echarts.init(document.getElementById('chart_5'));
function showProvince() {
var geoCoordMap = {
'长沙黄花国际机场': [113.226512, 28.192929],
'张家界荷花机场': [110.454598, 29.107223],
'常德桃花源机场': [111.651508, 28.921516],
'永州零陵机场': [111.622869, 26.340994],
'怀化芷江机场': [109.714784, 27.44615],
};
var data = [{
name: '长沙黄花国际机场',
value: 100
}, {
name: '张家界荷花机场',
value: 100
}, {
name: '常德桃花源机场',
value: 100
}, {
name: '永州零陵机场',
value: 100
}, {
name: '怀化芷江机场',
value: 100
}];
var max = 480,
min = 9;
var maxSize4Pin = 100,
minSize4Pin = 20;
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
myChart.setOption(option = {
title: {
top: 20,
text: '',
subtext: '',
x: 'center',
textStyle: {
color: '#ccc'
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['pm2.5'],
textStyle: {
color: '#fff'
}
},
visualMap: {
show: false,
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
seriesIndex: [1],
inRange: {}
},
geo: {
show: true,
map: 'hunan',
mapType: 'hunan',
label: {
normal: {},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(175,238,238, 0)'
}, {
offset: 1,
color: 'rgba( 47,79,79, .2)'
}],
globalCoord: false
},
shadowColor: 'rgba(128, 217, 248, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
}
},
series: [{
name: 'light',
type: 'map',
coordinateSystem: 'geo',
data: convertData(data),
itemStyle: {
normal: {
color: '#F4E925'
}
}
}, {
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function(val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min);
var b = minSize4Pin - a * min;
b = maxSize4Pin - a * max;
return a * val[2] + b;
},
label: {
normal: {}
},
itemStyle: {
normal: {
color: '#F62157',
}
},
zlevel: 6,
data: convertData(data),
}, {
name: 'light',
type: 'map',
mapType: 'hunan',
geoIndex: 0,
aspectScale: 0.75,
showLegendSymbol: false,
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#FFFFFF',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
}, {
name: ' ',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 5)),
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
}, ]
});
}
showProvince();
window.addEventListener("resize", function() {
myChart.resize();
});
}
});
1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!
2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识,互相学习」!
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥