实例介绍
【实例截图】
【核心代码】
<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="img/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="img/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">
<!--左上边框-->
<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="img/t_3.png" alt="">
中国地图
</div>
<div id="chart_map" style="width:100%;height:610px;"></div>
</div>
</div>
<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">
<img src="img/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">
<img src="img/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="img/t_6.png" alt="">
湖南省飞机场
</div>
<div id="chart_5" class="echart fl" style="width:100%;height: 250px;margin-top: 15px;"></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">
<img src="img/t_7.png" alt="">
湖南省交通
</div>
<div class="main_table t_btn8">
<table>
<thead>
<tr>
<th>运营数(辆)</th>
<th>线路总长度(公里)</th>
<th>客运总量(万人次)</th>
<th>日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>21059</td>
<td>26497</td>
<td>184448</td>
<td>2018年</td>
</tr>
<tr>
<td>18777</td>
<td>21140</td>
<td>188808</td>
<td>2017年</td>
</tr>
<tr>
<td>15757</td>
<td>20225</td>
<td>201143</td>
<td>2016年</td>
</tr>
<tr>
<td>17458</td>
<td>19567</td>
<td>202446</td>
<td>2015年</td>
</tr>
<tr>
<td>11323</td>
<td>14562</td>
<td>279854</td>
<td>2014年</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">
<img src="img/t_7.png" alt="">
湖南省业务量
</div>
<div class="main_table t_btn2">
<table>
<thead>
<tr>
<th>省内(万件)</th>
<th>省外(万件)</th>
<th>国际(万件)</th>
<th>总业务量(万件)</th>
<th>日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>21352.36</td>
<td>68575.6</td>
<td>464.43</td>
<td>90392.39</td>
<td>2018年</td>
</tr>
<tr>
<td>17522.41</td>
<td>37111.03</td>
<td>278.5</td>
<td>54911.94</td>
<td>2017年</td>
</tr>
<tr>
<td>7014.14</td>
<td>26841.29</td>
<td>163.72</td>
<td>34019.15</td>
<td>2016年</td>
</tr>
<tr>
<td>2553.55</td>
<td>18072.54</td>
<td>129.65</td>
<td>20755.74</td>
<td>2015年</td>
</tr>
<tr>
<td>1427.04</td>
<td>10859.54</td>
<td>182.54</td>
<td>12469.11</td>
<td>2014年</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="img/t_7.png" alt="">
湖南省汽车
</div>
<div class="main_table t_btn3">
<table>
<thead>
<tr>
<th>载客汽车(万辆)</th>
<th>载货汽车(万辆)</th>
<th>汽车拥有量(万辆)</th>
<th>日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>2.53</td>
<td>142.65</td>
<td>145.18</td>
<td>2018年</td>
</tr>
<tr>
<td>2.52</td>
<td>139.95</td>
<td>142.47</td>
<td>2017年</td>
</tr>
<tr>
<td>2.65</td>
<td>137.96</td>
<td>140.61</td>
<td>2016年</td>
</tr>
<tr>
<td>2.97</td>
<td>131.48</td>
<td>134.45</td>
<td>2015年</td>
</tr>
<tr>
<td>3.23</td>
<td>99.99</td>
<td>103.22</td>
<td>2014年</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
$(function () {
echart_1();
echart_2();
echart_3();
echart_4();
echart_map();
echart_5();
//echart_1湖南货物收入
function echart_1() {
// 基于准备好的dom，初始化echarts实例
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',
//起始角度，支持范围[0, 360]
startAngle: 0,
//饼图的半径，数组的第一项是内半径，第二项是外半径
radius: [41, 100.75],
//支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
center: ['50%', '40%'],
//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
// 'radius' 面积展现数据的百分比，半径展现数据的大小。
// 'area' 所有扇区面积相同，仅通过半径展现数据大小
roseType: 'area',
//是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
avoidLabelOverlap: false,
label: {
normal: {
show: true,
formatter: '{c}万元'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
length2: 1,
},
emphasis: {
show: true
}
},
data: [{
value: 900.58,
name: '张家口',
itemStyle: {
normal: {
color: '#f845f1'
}
}
},
{
value: 1100.58,
name: '承德',
itemStyle: {
normal: {
color: '#ad46f3'
}
}
},
{
value: 1200.58,
name: '衡水',
itemStyle: {
normal: {
color: '#5045f6'
}
}
},
{
value: 1300.58,
name: '邢台',
itemStyle: {
normal: {
color: '#4777f5'
}
}
},
{
value: 1400.58,
name: '邯郸',
itemStyle: {
normal: {
color: '#44aff0'
}
}
},
{
value: 1500.58,
name: '保定',
itemStyle: {
normal: {
color: '#45dbf7'
}
}
},
{
value: 1500.58,
name: '秦皇岛',
itemStyle: {
normal: {
color: '#f6d54a'
}
}
},
{
value: 1600.58,
name: '石家庄',
itemStyle: {
normal: {
color: '#f69846'
}
}
},
{
value: 1800,
name: '唐山',
itemStyle: {
normal: {
color: '#ff4343'
}
}
},
{
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();
});
}
//echart_2湖南省地图
function echart_2() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_2'));
function showProvince() {
myChart.setOption(option = {
// backgroundColor: '#ffffff',
visualMap: {
show: false,
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
inRange: {
color: ['yellow', 'lightskyblue', 'orangered']
}
},
series: [{
type: 'map',
mapType: 'hunan',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: '#389BB7',
areaColor: '#fff',
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
animation: false,
data: [{
name: '长沙市',
value: 100
}, {
name: '株洲市',
value: 96
}, {
name: '湘潭市',
value: 98
}, {
name: '衡阳市',
value: 80
}, {
name: '邵阳市',
value: 88
}, {
name: '岳阳市',
value: 79
}, {
name: '常德市',
value: 77,
}, {
name: '张家界市',
value: 33
}, {
name: '益阳市',
value: 69,
}, {
name: '郴州市',
value: 66
}, {
name: '永州市',
value: 22
},{
name: '娄底市',
value: 51
},{
name: '湘西土家族苗族自治州',
value: 44
},{
name: '怀化市',
value: 9
}]
}]
});
}
var currentIdx = 0;
showProvince();
// 使用刚指定的配置项和数据显示图表。
window.addEventListener("resize", function () {
myChart.resize();
});
}
// echart_map中国地图
function echart_map() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_map'));
var mapName = 'china'
var data = []
var toolTipData = [];
/*获取地图数据*/
myChart.showLoading();
var mapFeatures = echarts.getMap(mapName).geoJson.features;
myChart.hideLoading();
var geoCoordMap = {
'福州': [119.4543, 25.9222],
'长春': [125.8154, 44.2584],
'重庆': [107.7539, 30.1904],
'西安': [109.1162, 34.2004],
'成都': [103.9526, 30.7617],
'常州': [119.4543, 31.5582],
'北京': [116.4551, 40.2539],
'北海': [109.314, 21.6211],
'海口': [110.3893, 19.8516],
'长沙': [113.019455,28.200103],
'上海': [121.40, 31.73],
'内蒙古': [106.82, 39.67]
};
var GZData = [
[{
name: '长沙'
}, {
name: '福州',
value: 95
}],
[{
name: '长沙'
}, {
name: '长春',
value: 80
}],
[{
name: '长沙'
}, {
name: '重庆',
value: 70
}],
[{
name: '长沙'
}, {
name: '西安',
value: 60
}],
[{
name: '长沙'
}, {
name: '成都',
value: 50
}],
[{
name: '长沙'
}, {
name: '常州',
value: 40
}],
[{
name: '长沙'
}, {
name: '北京',
value: 30
}],
[{
name: '长沙'
}, {
name: '北海',
value: 20
}],
[{
name: '长沙'
}, {
name: '海口',
value: 10
}],
[{
name: '长沙'
}, {
name: '上海',
value: 80
}],
[{
name: '长沙'
}, {
name: '内蒙古',
value: 80
}]
];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i ) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord]
});
}
}
return res;
};
var color = ['#c5f80e'];
var series = [];
[
['石家庄', GZData]
].forEach(function (item, i) {
series.push({
name: item[0],
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: 'arrow',
symbolSize: 5
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
}, {
name: item[0],
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
option = {
tooltip: {
trigger: 'item'
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
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)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(47,79,79, .1)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
}
},
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
//echart_3货物周转量
function echart_3() {
// 基于准备好的dom，初始化echarts实例
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: ['2012年','2013年','2014年','2015年','2016年'],
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]
},
{
name:'地方铁路货物',
type:'line',
data:[14.77, 15.17, 13.17, 14.56, 15.84]
},
{
name:'合资铁路货物',
type:'line',
data:[686.17,847.26,895.22,865.28,886.72]
},
{
name:'公路货物',
type:'line',
data:[6133.47, 6577.89, 7019.56,6821.48,7294.59]
},
{
name:'水运货物',
type:'line',
data:[509.60, 862.54, 1481.77,1552.79,1333.62]
}
]
};
myChart.setOption(option);
}
//湖南高速公路
function echart_4() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_4'));
myChart.setOption({
series: [{
type: 'map',
mapType: 'hunan'
}]
});
var geoCoordMap = {
'怀化': [109.999867,27.518949],
'吉首': [109.741528,28.332629],
'张家界': [110.491722,29.112001],
'常德': [111.701486,29.076683],
'益阳': [112.348741,28.544124],
'岳阳': [113.126486,29.382401],
'长沙': [113.019455,28.200103],
'株洲': [113.163141,27.8418],
'湘潭': [112.91977,27.882141],
'邵阳': [111.467859,27.21915],
'娄底': [112.012438,27.745506],
'衡阳': [112.63809,26.895225],
'永州': [111.577632,26.460144],
'郴州': [113.039396,25.81497]
};
var goData = [
[{
name: '张家界'
}, {
id: 1,
name: '常德',
value: 86
}],
[{
name: '吉首'
}, {
id: 1,
name: '常德',
value: 86
}],
[{
name: '常德'
}, {
id: 1,
name: '益阳',
value: 70
}],
[{
name: '益阳'
}, {
id: 1,
name: '长沙',
value: 95
}],
[{
name: '长沙'
}, {
id: 1,
name: '岳阳',
value: 70
}],
[{
name: '长沙'
}, {
id: 1,
name: '湘潭',
value: 80
}],
[{
name: '长沙'
}, {
id: 1,
name: '株洲',
value: 80
}],
[{
name: '长沙'
}, {
id: 1,
name: '衡阳',
value: 80
}],
[{
name: '衡阳'
}, {
id: 1,
name: '郴州',
value: 70
}],
[{
name: '衡阳'
}, {
id: 1,
name: '永州',
value: 70
}],
[{
name: '湘潭'
}, {
id: 1,
name: '娄底',
value: 60
}],
[{
name: '娄底'
}, {
id: 1,
name: '邵阳',
value: 75
}],
[{
name: '邵阳'
}, {
id: 1,
name: '怀化',
value: 75
}],
];
//值控制圆点大小
var backData = [
[{
name: '常德'
}, {
id: 1,
name: '张家界',
value: 80
}],
[{
name: '常德'
}, {
id: 1,
name: '吉首',
value: 66
}],
[{
name: '益阳'
}, {
id: 1,
name: '常德',
value: 86
}],
[{
name: '长沙'
}, {
id: 1,
name: '益阳',
value: 70
}],
[{
name: '岳阳'
}, {
id: 1,
name: '长沙',
value: 95
}],
[{
name: '湘潭'
}, {
id: 1,
name: '长沙',
value: 95
}],
[{
name: '株洲'
}, {
id: 1,
name: '长沙',
value: 95
}],
[{
name: '衡阳'
}, {
id: 1,
name: '长沙',
value: 95
}],
[{
name: '郴州'
}, {
id: 1,
name: '衡阳',
value: 80
}],
[{
name: '永州'
}, {
id: 1,
name: '衡阳',
value: 80
}],
[{
name: '娄底'
}, {
id: 1,
name: '湘潭',
value: 80
}],
[{
name: '邵阳'
}, {
id: 1,
name: '娄底',
value: 60
}],
[{
name: '怀化'
}, {
id: 1,
name: '邵阳',
value: 75
}],
];
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
var arcAngle = function(data) {
var j, k;
for (var i = 0; i < data.length; i ) {
var dataItem = data[i];
if (dataItem[1].id == 1) {
j = 0.2;
return j;
} else if (dataItem[1].id == 2) {
k = -0.2;
return k;
}
}
}
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i ) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (dataItem[1].id == 1) {
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
}, {
coord: toCoord,
value: dataItem[1].value //线条颜色
}]);
}
} else if (dataItem[1].id == 2) {
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
}, {
coord: toCoord
}]);
}
}
}
return res;
};
var color = ['#fff', '#FF1493', '#0000FF'];
var series = [];
[
['1', goData],
['2', backData]
].forEach(function(item, i) {
series.push({
name: item[0],
type: 'lines',
zlevel: 2,
symbol: ['arrow', 'arrow'],
//线特效配置
effect: {
show: true,
period: 6,
trailLength: 0.1,
symbol: 'arrow', //标记类型
symbolSize: 5
},
lineStyle: {
normal: {
width: 1,
opacity: 0.4,
curveness: arcAngle(item[1]), //弧线角度
color: '#fff'
}
},
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 14
},
formatter: function(params) {
var txt = '';
if (params.data.speed !== undefined) {
txt = params.data.speed;
}
return txt;
},
}
},
data: convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
//波纹效果
rippleEffect: {
period: 2,
brushType: 'stroke',
scale: 3
},
label: {
normal: {
show: true,
color: '#fff',
position: 'right',
formatter: '{b}'
}
},
//终点形象
symbol: 'circle',
//圆点大小
symbolSize: function(val) {
return val[2] / 8;
},
itemStyle: {
normal: {
show: true
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
option = {
title: {
text: '',
subtext: '',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
//线颜色及飞行轨道颜色
visualMap: {
show: false,
min: 0,
max: 100,
color: ['#31A031','#31A031']
},
//地图相关设置
geo: {
map: 'hunan',
//视角缩放比例
zoom: 1,
//显示文本样式
label: {
normal: {
show: false,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
//鼠标缩放和平移
roam: true,
itemStyle: {
normal: {
// color: '#ddd',
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)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba( 47,79,79, .2)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
}
},
series: series
};
myChart.setOption(option);
}
//湖南省飞机场
function echart_5() {
// 基于准备好的dom，初始化echarts实例
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; // todo
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: {
// color: '#ddd',
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)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba( 47,79,79, .2)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 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: {
// show: true,
// textStyle: {
// color: '#fff',
// fontSize: 9,
// }
}
},
itemStyle: {
normal: {
color: '#F62157', //标志颜色
}
},
zlevel: 6,
data: convertData(data),
},
{
name: 'light',
type: 'map',
mapType: 'hunan',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
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();
// 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
//点击跳转
$('#chart_map').click(function(){
window.location.href = './page/index.html';
});
$('.t_btn2').click(function(){
window.location.href = "./page/index.html?id=2";
});
$('.t_btn3').click(function(){
window.location.href = "./page/index.html?id=3";
});
$('.t_btn4').click(function(){
window.location.href = "./page/index.html?id=4";
});
$('.t_btn5').click(function(){
window.location.href = "./page/index.html?id=5";
});
$('.t_btn6').click(function(){
window.location.href = "./page/index.html?id=6";
});
$('.t_btn7').click(function(){
window.location.href = "./page/index.html?id=7";
});
$('.t_btn8').click(function(){
window.location.href = "./page/index.html?id=8";
});
$('.t_btn9').click(function(){
window.location.href = "./page/index.html?id=9";
});
});
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论