mirror of
https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi.git
synced 2025-07-27 18:40:31 +08:00
1419 lines
46 KiB
JavaScript
1419 lines
46 KiB
JavaScript
$(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";
|
||
});
|
||
});
|