基于Echarts实现可视化数据大屏电子商务公共服务平台大数据中心

本文主要是介绍基于Echarts实现可视化数据大屏电子商务公共服务平台大数据中心，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作，可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【1000套毕设项目精品实战案例】

❤ 【 20套 VUE+Echarts 大数据可视化源码】

❤ 【150套 HTML+ Echarts大数据可视化源码】

文章目录

前言
一、Echart是什么
二、ECharts入门教程
三、作品演示
四、代码实现
- 1.HTML
- 2.CSS
- 3.JavaScript
五、更多干货

一、Echart是什么

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

在这里插入图片描述

四、代码实现

1.HTML

<!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}</br>{a}: {c}</br>{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>

2.CSS

* {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 结束*/

3.JavaScript


$(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} <br/>{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, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '龙州县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '南丹县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '扶绥县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '天峨县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '大化瑶族自治县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '乐业县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '西林县',value: [50, '电商进农村示范县：<br/>项目承建企业2家<br/>电商服务站目前数量94个站点<br/>广西乐村淘科技有限公司、广西国际电子商务中心<br/>主要推广的产品有西林沙糖桔、麻鸭、姜晶等地理标志保护产品']}, {name: '资源县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '都安瑶族自治县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '上林县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '凌云县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '东兰县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '巴马瑶族自治县',value: [50, '项目承建企业1家<br/>电商服务站目前数量85个站点<br/>参加电商培训人数1500人<br/>特色粮经作物：包括蚕桑、火麻、龙骨花、中药材、红薯、马铃薯、小杂粮等。<br/>主要承建内容:县级服务中心建设、乡镇级服务站、村级服务点建设']}, {name: '田阳县',value: [50, '项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '靖西市',value: [50, '项目承建企业1家<br/>电商服务站目前数量60个站点<br/>参加电商培训人数1500人<br/>特色产品：靖西绣球、靖西壮锦、靖西东利大香儒<br/>主要承建内容:靖西各镇乡村服务站点建设']}, {name: '大新县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '三江侗族自治县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '龙胜各族自治县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '全州县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '融安县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '柳城县',value: [50, '项目承建企业2家<br/>电商服务站目前数量125个站点<br/>参加电商培训人数5000人<br/>特色产品：新味嘉木瓜丝、寨隆壮方红糖<br/>主要承建内容:农村电子商务公共服务体系村级服务点建设。']}, {name: '忻城县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '鹿寨县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '宾阳县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '兴业县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '横县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '灵山县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '浦北县',value: [50, '项目承建企业2家<br/>电商服务站目前数量161个站点<br/>参加电商培训人数8572人<br/>特色产品：浦北扁柑、浦北黑猪、官垌鱼、浦北黑叶荔<br/>主要承建内容:建设浦北县电子商务公共服务中心，<br/>县级公共服务中心与品牌推与展示区、创业孵化区、培训区集聚发展。']}, {name: '东兴市',value: [50, '项目承建企业3家<br/>电商服务站目前数量34个站点<br/>特色产品：东兴红姑娘红薯、东兴黄皮果、京族二宝<br/>主要承建内容:建设东兴市电子商务进农村服务中心。<br/>含公共服务区、多平台运营服务区等。']}, {name: '灌阳县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '恭城瑶族自治县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '荔浦县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '昭平县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '金秀瑶族自治县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '桂平市',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '田东县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '凤山县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '环江毛南族自治县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '马山县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '罗城仫佬族自治县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '德保县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '融水苗族自治县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '天等县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '隆林县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '那坡县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}, {name: '平果县',value: [50, '电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']}];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 + '<br />' + 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();});}
});