echart实现大数据可视化看板滚动大屏看板效果
代码语言：html
所属分类：布局界面
代码描述：echart实现大数据可视化看板滚动大屏看板效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产业大数据展示</title>
<style>
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box}
*,body{padding:0px; margin:0px;color: #222;font-family: "微软雅黑";}
html,body{
background: url("http://repo.bfw.wiki/bfwrepo/image/5eec59613702c.png") no-repeat;
background-size: cover;
font-size: .16rem;
color: #ffffff;
position: relative;
width: 100%;
height: 100%;
}
.fl{
float: left;
}
.fr{
float: right;
}
ul,ol{
list-style: none;
}
/*谷哥滚动条样式*/
::-webkit-scrollbar {width:5px;height:5px;position:absolute}
::-webkit-scrollbar-thumb {background-color:#5bc0de}
::-webkit-scrollbar-track {background-color:#ddd}
/***/
.allnav{
height: 100%;
}
.main{
/*width: 100%;
height: 100%;
background: url("../images/bj.png") no-repeat;
background-size: cover;
position: relative;*/
}
/*头部*/
.header{
height: 1.2rem;
width: 100%;
/*background:red;*/
}
/*头部左边*/
.header .header-left{
float: left;
width: 35%;
height: 1.2rem;
color: #ffffff;
/*text-align: center;*/
line-height: 1.2rem;
padding-left: .5rem;
font-size: .2rem;
/*border: 1px solid gold;*/
}
/*头部中间*/
.header .header-cen{
float: left;
width: 30%;
height: 1.2rem;
/*border: 1px solid green;*/
background-size: 100% 100%;
text-align: center;
line-height: 1.2rem;
}
.header .header-cen h1{
font-size: .4rem;
color: #ffffff;
letter-spacing:0.2rem;
text-shadow: 0 0 .3rem #00d8ff;
}
/*头部右边*/
.header .header-right{
float: right;
width: 35%;
height: 1.2rem;
/*border: 1px solid purple;*/
}
/*中间*/
.content{
padding: .2rem .1rem 0 .1rem;
}
/*中间左边*/
.content .content-left{
width: 25%;
padding: .1rem;
/*border: 1px solid red;*/
}
.content .content-left .left-top{
width: 100%;
height: 3.2rem;
/*border: 1px solid gold;*/
margin-bottom: .2rem;
}
.title{
width: 100%;
height: .4rem;
/*border: 1px solid red;*/
color: #ffffff;
font-size: .2rem;
padding-left: .3rem;
line-height: .4rem;
background: url("http://repo.bfw.wiki/bfwrepo/icon/5eec6e373791a.png") no-repeat;
background-size: 100% 100%;
margin-top: .1rem;
position: relative;
}
.title span{
display: inline-block;
color: #ffffff;
font-size: .2rem;
position: absolute;
top: -.1rem;
}
.list p{
font-size: .18rem;
color: #029698;
padding: 0 .3rem;
}
.list li{
float: left;
font-size: .2rem;
color: #ffffff;
width: 50%;
height: .4rem;
line-height: .4rem;
padding: .2rem;
}
.content .content-left .left-center{
width: 100%;
height: 3.2rem;
/*border: 1px solid gold;*/
margin-bottom: .2rem;
}
.content .content-left .left-bottom{
width: 100%;
height: 3.2rem;
/* border: 1px solid gold;*/
}
/*中间*/
.content .content-center{
width: 50%;
padding: .1rem .2rem .1rem .2rem;
/*border: 1px solid purple;*/
}
.content .content-center .center-top{
width: 100%;
height: 6.5rem;
/*border: 1px solid red;*/
background-size: 100% 100%;
box-sizing: border-box;
margin-bottom: .3rem;
position: relative;
}
.content .content-center .center-top .top-title{
position: absolute;
width: 35%;
height: 3rem;
/*border: 1px solid red;*/
left: .5rem;
top:.5rem;
}
.content .content-center .center-top .top-title li{
float: left;
width: 50%;
height: 1rem;
/*border: 1px solid green;*/
}
.content .content-center .center-top .top-title li p,
.content .content-center .center-top .top-title li span,
.content .content-center .center-top .top-title li b{
color: #ffffff;
}
.content .content-center .center-top .top-title li p{
padding: .1rem;
}
.content .content-center .center-top .top-title li span{
text-align: center;
display: inline-block;
width: .35rem;
height: .45rem;
background: #55bcd4;
margin-left: .1rem;
line-height: .4rem;
font-size: .3rem;
margin-top: .1rem;
}
.content .content-center .center-top .top-bottom{
width: 70%;
height: 80%;
position: absolute;
/*border: 1px solid red;*/
bottom: .3rem;
right: .3rem;
}
.content .content-center .center-bottom{
width: 100%;
height: 3.4rem;
padding: .1rem;
border: 1px solid #55bcd4;
box-sizing: border-box;
}
.content .content-center .center-bottom .bottom-left{
width: 50%;
height: 100%;
/*border: 1px solid green;*/
}
.content .content-center .center-bottom .bottom-right{
width: 50%;
height: 100%;
/*border: 1px solid green;*/
}
/*中间右边*/
.content .content-right{
width: 25%;
padding: .1rem;
}
.content .content-right .right-top{
width: 100%;
height: 3.2rem;
border: 1px solid #55bcd4;
margin-bottom: .2rem;
}
#tab_header{
width: 100%;
height: .4rem;
/* border: 1px solid red;*/
}
#tab_header .selected{
background: rgba(56, 188, 233, 1);
}
#tab_header li{
float: left;
width: 50%;
color: #ffffff;
text-align: center;
line-height: .4rem;
cursor: pointer;
}
#tab_content{
width: 100%;
height: 2.8rem;
/* border: 1px solid purple;*/
}
#tab_content .dom li p,
#tab_content .dom li span,
#tab_content .dom li label{
color: #ffffff;
}
#tab_content .dom li{
width: 33%;
height: 1.2rem;
/*border: 1px solid red;*/
text-align: center;
float: left;
padding: .2rem;
}
#tab_content .dom li p{
margin-bottom: 0.05rem;
}
#tab_content .dom li span{
font-size: .25rem;
padding-top: .1rem;
}
#tab_content .dom li:nth-child(1) span{
color: #ebec2f;
}
#tab_content .dom li:nth-child(2) span{
color: #25f3e6;
}
#tab_content .dom li:nth-child(3) span{
color: #13ff03;
}
#tab_content .dom .list-t{
float: left;
width: 100%;
height: 1.5rem;
padding-top: .3rem;
}
#tab_content .dom .list-t li{
width: 15%;
height: .8rem;
float: left;
border: 1px solid #55bcd4;
text-align: center;
padding: 0 !important;
margin-left: 0.07rem;
}
#tab_content .dom .list-t li span,
#tab_content .dom .list-t li p{
color: #ffffff;
}
#tab_content .dom .list-t li span{
display: inline-block;
font-size: .2rem;
margin-top: .1rem;
}
.listStyle{
width: 100%;
height: 100%;
/*border: 1px solid red;*/
margin-top: .3rem;
}
.listStyle span{
float: left;
width: 50%;
height: .4rem;
font-size: .2rem;
color: #ffffff;
display: inline-block;
padding-left: .2rem;
text-align: center;
line-height: .4rem;
}
.listStyle strong{
color: #00ffff;
}
.content .content-right .right-center{
width: 100%;
height: 3.2rem;
/*border: 1px solid gold;*/
margin-bottom: .2rem;
}
.content .content-right .right-bottom{
width: 100%;
height: 3.2rem;
/*border: 1px solid gold;*/
}
.content .content-right .right-bottom .right-bottom-t{
/*margin-top: .8rem;*/
width: 100%;
height: 2.8rem;
/*height: calc(100% - 1.6rem);*/
/*border: 1px solid red;*/
}
.content .content-right .right-bottom .right-bottom-t .b-left{
float: left;
width: 33.3%;
height: 100%;
text-align: center;
}
.content .content-right .right-bottom .right-bottom-t .b-cent{
float: left;
width: 33.3%;
height: 100%;
}
.content .content-right .right-bottom .right-bottom-t .b-right{
float: left;
width: 33.3%;
height: 100%;
}
.gun{
/* width: 100%;*/
/*margin: 20px;*/
}
.gun span{
display: block;
float: left;
height: .2rem;
width: 33%;
/*background: red;*/
/*margin: 15px 10px 10px 10px;*/
/*padding: 20px;*/
text-align: center;
font-size: 0.14rem;
font-weight: 600;
color: #61d2f7;
text-align: center;
margin-bottom: .1rem;
}
#FontScroll{
width: 100%;
height: 2.3rem;
overflow: hidden;
/*float: left;*/
margin-top: .1rem;
/*margin: 0 5%;*/
/*margin-left: 50px;*/
/*background: gold;*/
}
#FontScroll ul li{
height: .32rem;
width: 100%;
color: #ffffff;
text-align: center;
line-height: .32rem;
/*border-bottom: 1px dashed #404040;*/
/*width:33.3%;*/
overflow: hidden;
font-size: 0.14rem;
border-bottom: 1px dashed #404040;
/*width:33.3%;*/
/*background: red;
margin: 0 2%;*/
}
#FontScroll ul li:nth-child(1){
/*background-color: #072951;*/
box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
10px 0px 15px #034c6a inset;
}
#FontScroll ul li:hover{
box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
10px 0px 15px #034c6a inset;
cursor: pointer;
}
.fontInner span{
display:inline-block;
/*float: left;*/
/*height: 20px;*/
width:31%;
color: #ffffff;
/*background: red;*/
}
.fontInner span b{
display: inline-block;
width: .75rem;
height: .2rem;
/*border-radius: 0.03rem;*/
color: #ffffff;
line-height: .2rem;
font-size: .1rem;
}
/*#FontScroll ul li:nth-child(1) .fontInner span b{
background: #EB6841
}*/
#FontScroll ul li:nth-child(1) .fontInner span b{ background: #FE4365 }
#FontScroll ul li:nth-child(2) .fontInner span b{ background: #3FB8AF }
#FontScroll ul li:nth-child(3) .fontInner span b{ background: #83AF9B }
#FontScroll ul li .fontInner span b{ background: #C8C8A9 }
/*#FontScroll ul li:nth-child(8n-4) .fontInner span b{ background: #20a8fe }
#FontScroll ul li:nth-child(8n-3) .fontInner span b{ background: #EB6841 }
#FontScroll ul li:nth-child(8n-2) .fontInner span b{ background: #3FB8AF }
#FontScroll ul li:nth-child(8n-1) .fontInner span b{ background: #FE4365 }
#FontScroll ul li:nth-child(8n-5) .fontInner span b{ background: #FC9D9A }
#FontScroll ul li:nth-child(8n-6) .fontInner span b{ background: #EDC951 }
#FontScroll ul li:nth-child(8n-7) .fontInner span b{ background: #C8C8A9 }
#FontScroll ul li:nth-child(8n) .fontInner span b{ background: #83AF9B }
#FontScroll ul li:first-child .fontInner span b{ background: #036564 }
#FontScroll ul li:last-child .fontInner span b{ background: #3299BB }*/
</style>
</head>
<body>
<div class="main">
<!--头部-->
<div class="header">
<div class="header-left" id="time"></div>
<div class="header-cen">
<h1>产业大数据展示</h1>
</div>
<div class="header-right"></div>
</div>
<!--中间-->
<div class="content">
<!--左边-->
<div class="content-left fl">
<!--左上-->
<div class="left-top">
<div class="title">
<span>基本信息</span>
</div>
<div class="list">
<p>托各地丰富的无公害、应季的果蔬资源、海鲜资源、山地及海域资源以及农村特色人文资源而搭建，集优质资源整合、优化、流通于一体，涵盖有机蔬果产品、特色平价海鲜、农村生态人文旅游</p>
<ul>
<li>建筑面积：1168亩</li>
<li>农户总数：867户</li>
<li>人口总数：13万</li>
<li>年总产值：680万</li>
<li>年总产值：4651万</li>
<li>年总产值：4546万</li>
</ul>
</div>
</div>
<!--左中-->
<div class="left-center">
<div class="title">
<span>蔬菜类别</span>
</div>
<div class="allnav" id="ceshi"></div>
</div>
<!--左下-->
<div class="left-bottom">
<div class="title">
<span>产量/种植面积</span>
</div>
<div class="allnav" id="ceshi2"></div>
</div>
</div>
<!--中间-->
<div class="content-center fl">
<!--头部-->
<div class="center-top">
<div class="top-title">
<ul>
<li>
<p>种植基地</p>
<span>3</span>
<span>6</span>
<span>5</span>
<b>个</b>
</li>
<li>
<p>已接入</p>
<span>8</span>
<span>3</span>
<b>%</b>
</li>
</ul>
</div>
<div class="top-bottom">
<div class="allnav" id="ceshi8"></div>
</div>
</div>
<!--底部-->
<div class="center-bottom">
<div class="bottom-left fl">
<div class="allnav" id="ceshi6"></div>
</div>
<div class="bottom-right fr">
<div class="allnav" id="ceshi7" style="width: 100%;height: 100%;"></div>
</div>
</div>
</div>
<!--右边-->
<div class="content-right fr">
<!--右上-->
<div class="right-top">
<!--选项卡内容-->
<div id="tab_header">
<ul>
<li class="selected">商铺信息</li>
<li>基地信息</li>
</ul>
</div>
<!--内容-->
<div id="tab_content">
<div class="dom" style="display: block">
<ul>
<li>
<p>座收租金</p>
<span>50万</span>
<label>元</label>
</li>
<li>
<p>座收租金</p>
<span>50万</span>
<label>元</label>
</li>
<li>
<p>座收租金</p>
<span>50万</span>
<label>元</label>
</li>
</ul>
<div class="list-t">
<ul>
<li>
<span>50万</span>
<p>商铺</p>
</li>
<li>
<span>50万</span>
<p>商铺</p>
</li>
<li>
<span>50万</span>
<p>商铺</p>
</li>
<li>
<span>50万</span>
<p>商铺</p>
</li>
<li>
<span>50万</span>
<p>商铺</p>
</li>
<li>
<span>50万</span>
<p>商铺</p>
</li>
</ul>
</div>
</div>
<div class="dom" style="display: none">
<div class="listStyle">
<span>大棚：<strong>560</strong>个</span>
<span>供应企业：<strong>36</strong>家</span>
<span>经销商：<strong>540</strong>个</span>
<span>供应链：<strong>15</strong>条</span>
<span>蔬菜加工基地：<strong>20</strong>个</span>
<span>售后卸载：<strong>29</strong>家</span>
<span>冷藏基地：<strong>10</strong>个</span>
<span>冷藏车：<strong>120</strong>台</span>
</li>
</div>
</div>
</div>
<!--选项卡内容-->
</div>
<!--右中-->
<div class="right-center">
<div class="title">
<span>销量排行</span>
</div>
<div class="echart wenzi">
<div class="gun">
<span>名称</span>
<span>同比</span>
<span>销量</span>
</div>
<div id="FontScroll" class="myscroll">
<ul>
<li>
<div class="fontInner clearfix">
<span>
<b> 1.辣椒</b>
</span>
<span>2.3%</span>
<span>45顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>2.白菜</b>
</span>
<span>2.2%</span>
<span>44.5顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>3.茄子</b>
</span>
<span>2.15%</span>
<span>44.3顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>4.莴笋</b>
</span>
<span>2.1%</span>
<span>43.5顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>5.洋芋</b>
</span>
<span>2%</span>
<span>43顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>6.藕</b>
</span>
<span>1.95%</span>
<span>42.6顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>7.豌豆</b>
</span>
<span>1.93%</span>
<span>42.3顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>8.玉米</b>
</span>
<span>1.9%</span>
<span>42顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>9.西红柿</b>
</span>
<span>1.8%</span>
<span>41顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>10.西红柿</b>
</span>
<span>1.8%</span>
<span>41顿</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--右下-->
<div class="right-bottom">
<div class="title">
<span>蔬菜成交价</span>
</div>
<div class="right-bottom-t">
<div class="b-left" id="ceshi3"></div>
<div class="b-cent" id="ceshi4"></div>
<div class="b-right" id="ceshi5"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
$('.myscroll').myScroll({
speed: 60, //数值越大，速度越慢
rowHeight: 38 //li的高度
});
})
$(document).ready(function () {
var whei = $(window).width()
$("html").css({ fontSize: whei / 22 });
$(window).resize(function () {
var whei = $(window).width();
$("html").css({ fontSize: whei / 22 })
});
});
$(function () {
var allLis=document.getElementById("tab_header").getElementsByTagName("li");
var allDom = document.getElementById("tab_content").getElementsByClassName("dom");
// console.log(allLis, allDom);
// 2. 遍历监听
for(var i=0; i<allLis.length; i++){
var li = allLis[i];
li.index = i;
li.onclick = function () {
console.log(i);
for(var j=0; j<allLis.length; j++){
allLis[j].className = '';
allDom[j].style.display = 'none';
}
this.className = 'selected';
allDom[this.index].style.display = 'block';
}
}
})
</script>
<script >
$(function () {
ceshis1();
ceshi2();
ceshi3();
ceshi4();
ceshi5();
ceshi6();
ceshi7();
echart_map();
function ceshis1() {
var myChart = echarts.init(document.getElementById('ceshi'));
var ydata = [{
name: '白菜',
value: 18
},
{
name: '西红柿',
value: 16
},
{
name: '茄子',
value: 15
},
{
name: '辣椒',
value: 14
},
{
name: '大蒜',
value: 10
},
{
name: '莴笋',
value: 7.9
},
{
name: '洋芋',
value: 6.7
},
{
name: '藕',
value: 6
},
{
name: '豌豆',
value: 4.5
},
{
name: '玉米',
value: 3
}
];
var color = ["#8d7fec", "#5085f2", "#e75fc3", "#f87be2", "#f2719a", "#fca4bb", "#f59a8f", "#fdb301", "#57e7ec", "#cf9ef1"]
var xdata = ['白菜', "西红柿", "茄子", "辣椒", '大蒜', '莴笋', '洋芋', '藕', '豌豆', '玉米'];
option = {
/*backgroundColor: "rgba(255,255,255,1)",*/
color: color,
legend: {
orient: "vartical",
x: "left",
top: "center",
left: "53%",
bottom: "0%",
data: xdata,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#fff'
},
/*itemGap: 16,*/
/*formatter:function(name){
var oa = option.series[0].data;
var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
for(var i = 0; i < option.series[0].data.length; i++){
if(name==oa[i].name){
return ' '+name + ' | ' + oa[i].value + ' | ' + (oa[i].value/num * 100).toFixed(2) + '%';
}
}
}*/
formatter: function(name) {
return '' + name
}
},
series: [{
type: 'pie',
clockwise: false, //饼图的扇区是否是顺时针排布
minAngle: 2, //最小的扇区角度（0 ~ 360）
radius: ["20%", "60%"],
center: ["30%", "45%"],
avoidLabelOverlap: false,
itemStyle: { //图形样式
normal: {
borderColor: '#ffffff',
borderWidth: 1,
},
},
label: {
normal: {
show: false,
position: 'center',
formatter: '{text|{b}}\n{c} ({d}%)',
rich: {
text: {
color: "#fff",
fontSize: 14,
align: 'center',
verticalAlign: 'middle',
padding: 8
},
value: {
color: "#8693F3",
fontSize: 24,
align: 'center',
verticalAlign: 'middle',
},
}
},
emphasis: {
show: true,
textStyle: {
fontSize: 24,
}
}
},
data: ydata
}]
};
myChart.setOption(option);
setTimeout(function() {
myChart.on('mouseover', function(params) {
if (params.name == ydata[0].name) {
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
} else {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: 0
});
}
});
myChart.on('mouseout', function(params) {
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
}, 1000);
myChart.currentIndex = -1;
setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: myChart.currentIndex
});
myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: myChart.currentIndex
});
}, 1000);
// 使用刚指定的配置项和数据显示图表。
/*myChart.setOption(option);*/
window.addEventListener("resize",function(){
myChart.resize();
});
}
function echart_map() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('ceshi8'));
var chinaGeoCoordMap = {
'黑龙江': [127.9688, 45.368],
'内蒙古': [110.3467, 41.4899],
"吉林": [125.8154, 44.2584],
'北京市': [116.4551, 40.2539],
"辽宁": [123.1238, 42.1216],
"河北": [114.4995, 38.1006],
"天津": [117.4219, 39.4189],
"山西": [112.3352, 37.9413],
"陕西": [109.1162, 34.2004],
"甘肃": [103.5901, 36.3043],
"宁夏": [106.3586, 38.1775],
"青海": [101.4038, 36.8207],
"新疆": [87.9236, 43.5883],
"西藏": [91.11, 29.97],
"四川": [103.9526, 30.7617],
"重庆": [108.384366, 30.439702],
"山东": [117.1582, 36.8701],
"河南": [113.4668, 34.6234],
"江苏": [118.8062, 31.9208],
"安徽": [117.29, 32.0581],
"湖北": [114.3896, 30.6628],
"浙江": [119.5313, 29.8773],
"福建": [119.4543, 25.9222],
"江西": [116.0046, 28.6633],
"湖南": [113.0823, 28.2568],
"贵州": [106.6992, 26.7682],
"云南": [102.9199, 25.4663],
"广东": [113.12244, 23.009505],
"广西": [108.479, 23.1152],
"海南": [110.3893, 19.8516],
'上海': [121.4648, 31.2891]
};
var chinaDatas = [
[{
name: '黑龙江',
value: 0
}], [{
name: '内蒙古',
value: 0
}], [{
name: '吉林',
value: 0
}], [{
name: '辽宁',
value: 0
}], [{
name: '河北',
value: 0
}], [{
name: '天津',
value: 0
}], [{
name: '山西',
value: 0
}], [{
name: '陕西',
value: 0
}], [{
name: '甘肃',
value: 0
}], [{
name: '宁夏',
value: 0
}], [{
name: '青海',
value: 0
}], [{
name: '新疆',
value: 0
}],[{
name: '西藏',
value: 0
}], [{
name: '四川',
value: 0
}], [{
name: '重庆',
value: 0
}], [{
name: '山东',
value: 0
}], [{
name: '河南',
value: 0
}], [{
name: '江苏',
value: 0
}], [{
name: '安徽',
value: 0
}], [{
name: '湖北',
value: 0
}], [{
name: '浙江',
value: 0
}], [{
name: '福建',
value: 0
}], [{
name: '江西',
value: 0
}], [{
name: '湖南',
value: 0
}], [{
name: '贵州',
value: 0
}],[{
name: '广西',
value: 0
}], [{
name: '海南',
value: 0
}], [{
name: '上海',
value: 1
}]
];
var convertData = function(data) {
var res = [];
for(var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = chinaGeoCoordMap[dataItem[0].name];
var toCoord = [116.4551,40.2539];
if(fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
var series = [];
[['北京市', chinaDatas]].forEach(function(item, i) {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
}
},
data: convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function(params){//圆环显示文字
return params.data.name;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0