1772 lines
42 KiB
JavaScript
1772 lines
42 KiB
JavaScript
window.onload = function () {
|
||
|
||
// 柱状图 左1
|
||
(function getEcharts3DBar() {
|
||
// 调用
|
||
let serveTBar = echarts.init(document.getElementById('jczy_bar'));
|
||
//serveTBar.setOption(getEcharts3DBar());
|
||
let arr = diverseForMonth('2017', 'silverMarin') // arr获取拆分后的WaiMao文件的数据
|
||
console.log(arr) //f12查看详细数据
|
||
|
||
|
||
// 模板效果
|
||
let colorArr = ["#f60018", "#b92e3b", "#a0000f"];//柱子三面的颜色 左侧、右侧、顶部
|
||
let color = {
|
||
type: "linear",
|
||
x: 0,
|
||
x2: 1,
|
||
y: 0,
|
||
y2: 0,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: colorArr[0],
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: colorArr[0],
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: colorArr[1],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr[1],
|
||
},
|
||
],
|
||
};
|
||
let colorArr2 = ["#EE7700", "#FFAA33", "#EE7700"];//柱子三面的颜色 左侧、右侧、顶部
|
||
let color2 = {
|
||
type: "linear",
|
||
x: 0,
|
||
x2: 1,
|
||
y: 0,
|
||
y2: 0,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: colorArr2[0],
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: colorArr2[0],
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: colorArr2[1],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr2[1],
|
||
},
|
||
],
|
||
};
|
||
let colorArr3 = ["#a65600", "#663300", "#663300"];//柱子三面的颜色 左侧、右侧、顶部
|
||
let color3 = {
|
||
type: "linear",
|
||
x: 0,
|
||
x2: 1,
|
||
y: 0,
|
||
y2: 0,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: colorArr3[0],
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: colorArr3[0],
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: colorArr3[1],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr3[1],
|
||
},
|
||
],
|
||
};
|
||
|
||
let barWidth = 10;
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params) {
|
||
let str = params[0].name + ":";
|
||
params.filter(function (item) {
|
||
if (item.componentSubType == "bar") {
|
||
str += "<br/>" + item.seriesName + ":" + item.value;
|
||
}
|
||
});
|
||
return str;
|
||
},
|
||
},
|
||
grid: {
|
||
x: '7%',
|
||
x2: '7%',
|
||
y: '15%',
|
||
y2: '15%',
|
||
},
|
||
legend: {
|
||
show: false,
|
||
data: ['一带一路贸易额指数', '“一带一路”集装箱海运量指数', '海上丝绸之路运价指数'],
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '20'
|
||
}
|
||
},
|
||
xAxis: {
|
||
data: arr[0],
|
||
//坐标轴
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#214776'
|
||
},
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '10'
|
||
}
|
||
},
|
||
type: 'category',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#3C34FF',
|
||
fontWeight: 500,
|
||
fontSize: '14'
|
||
}
|
||
},
|
||
axisTick: {
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '16'
|
||
},
|
||
show: false,
|
||
},
|
||
splitLine: { show: false }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
//坐标轴
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#fff'
|
||
},
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '10'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
//坐标值标注
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#3C34FF',
|
||
}
|
||
},
|
||
//分格线
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#13365f'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
z: 1,
|
||
name: '一带一路贸易额指数',
|
||
type: "bar",
|
||
barWidth: barWidth,
|
||
barGap: "0%",
|
||
data: arr[1],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color
|
||
},
|
||
},
|
||
},
|
||
{
|
||
z: 2,
|
||
name: '一带一路贸易额指数',
|
||
type: "pictorialBar",
|
||
data: arr[1],
|
||
symbol: "diamond",
|
||
symbolOffset: ["-75%", "50%"],
|
||
symbolSize: [barWidth, 10],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
z: 3,
|
||
name: '一带一路贸易额指数',
|
||
type: "pictorialBar",
|
||
symbolPosition: "end",
|
||
data: arr[1],
|
||
symbol: "diamond",
|
||
symbolOffset: ["-75%", "-50%"],
|
||
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 2,
|
||
color: colorArr[2]
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
z: 1,
|
||
name: '“一带一路”集装箱海运量指数',
|
||
type: "bar",
|
||
barWidth: barWidth,
|
||
barGap: "50%",
|
||
data: arr[2],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color2
|
||
},
|
||
},
|
||
},
|
||
{
|
||
z: 2,
|
||
name: '“一带一路”集装箱海运量指数',
|
||
type: "pictorialBar",
|
||
data: arr[2],
|
||
symbol: "diamond",
|
||
symbolOffset: ["75%", "50%"],
|
||
symbolSize: [barWidth, 10],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color2
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
z: 3,
|
||
name: '“一带一路”集装箱海运量指数',
|
||
type: "pictorialBar",
|
||
symbolPosition: "end",
|
||
data: arr[2],
|
||
symbol: "diamond",
|
||
symbolOffset: ["75%", "-50%"],
|
||
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 2,
|
||
color: colorArr2[2]
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
z: 1,
|
||
name: '海上丝绸之路运价指数',
|
||
type: "bar",
|
||
barWidth: barWidth,
|
||
barGap: "50%",
|
||
data: arr[3],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color3
|
||
},
|
||
},
|
||
},
|
||
{
|
||
z: 2,
|
||
name: '海上丝绸之路运价指数',
|
||
type: "pictorialBar",
|
||
data: arr[3],
|
||
symbol: "diamond",
|
||
symbolOffset: ["75%", "50%"],
|
||
symbolSize: [barWidth, 10],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color3
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
z: 3,
|
||
name: '海上丝绸之路运价指数',
|
||
type: "pictorialBar",
|
||
symbolPosition: "end",
|
||
data: arr[3],
|
||
symbol: "diamond",
|
||
symbolOffset: ["75%", "-50%"],
|
||
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 2,
|
||
color: colorArr3[2]
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
|
||
],
|
||
};
|
||
serveTBar.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
serveTBar.resize();
|
||
});
|
||
|
||
console.log("OK!")
|
||
|
||
|
||
|
||
// 真实效果
|
||
$(".year5-link").on("click", function () {
|
||
//let value = document.getElementById("year-link").getAttribute("value")
|
||
let value = $(this).val()
|
||
console.log("link Succeed!");
|
||
console.log(value);
|
||
arr = diverseForMonth(value, 'silverMarin')
|
||
|
||
|
||
|
||
let colorArr = ["#f60018", "#b92e3b", "#a0000f"];//柱子三面的颜色 左侧、右侧、顶部
|
||
let color = {
|
||
type: "linear",
|
||
x: 0,
|
||
x2: 1,
|
||
y: 0,
|
||
y2: 0,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: colorArr[0],
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: colorArr[0],
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: colorArr[1],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr[1],
|
||
},
|
||
],
|
||
};
|
||
let colorArr2 = ["#EE7700", "#FFAA33", "#EE7700"];//柱子三面的颜色 左侧、右侧、顶部
|
||
let color2 = {
|
||
type: "linear",
|
||
x: 0,
|
||
x2: 1,
|
||
y: 0,
|
||
y2: 0,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: colorArr2[0],
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: colorArr2[0],
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: colorArr2[1],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr2[1],
|
||
},
|
||
],
|
||
};
|
||
let colorArr3 = ["#a65600", "#663300", "#663300"];//柱子三面的颜色 左侧、右侧、顶部
|
||
let color3 = {
|
||
type: "linear",
|
||
x: 0,
|
||
x2: 1,
|
||
y: 0,
|
||
y2: 0,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: colorArr3[0],
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: colorArr3[0],
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: colorArr3[1],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr3[1],
|
||
},
|
||
],
|
||
};
|
||
let barWidth = 8;
|
||
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params) {
|
||
let str = params[0].name + ":";
|
||
params.filter(function (item) {
|
||
if (item.componentSubType == "bar") {
|
||
str += "<br/>" + item.seriesName + ":" + item.value;
|
||
}
|
||
});
|
||
return str;
|
||
},
|
||
},
|
||
|
||
grid: {
|
||
x: '7%',
|
||
x2: '0%',
|
||
y: '15%',
|
||
y2: '15%',
|
||
},
|
||
legend: {
|
||
show: false,
|
||
data: ['一带一路贸易额指数', '“一带一路”集装箱海运量指数', '海上丝绸之路运价指数'],
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '20'
|
||
}
|
||
},
|
||
xAxis: {
|
||
data: arr[0],
|
||
//坐标轴
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#214776'
|
||
},
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '10'
|
||
}
|
||
},
|
||
type: 'category',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#3C34FF',
|
||
fontWeight: 500,
|
||
fontSize: '14'
|
||
}
|
||
},
|
||
axisTick: {
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '16'
|
||
},
|
||
show: false,
|
||
},
|
||
splitLine: { show: false }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
//坐标轴
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#214776'
|
||
},
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '10'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
//坐标值标注
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#3C34FF',
|
||
}
|
||
},
|
||
//分格线
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#13365f'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
//
|
||
{
|
||
z: 1,
|
||
name: '一带一路贸易额指数',
|
||
type: "bar",
|
||
barWidth: barWidth,
|
||
barGap: "0%",
|
||
data: arr[1],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color
|
||
},
|
||
},
|
||
},
|
||
{
|
||
z: 2,
|
||
name: '一带一路贸易额指数',
|
||
type: "pictorialBar",
|
||
data: arr[1],
|
||
symbol: "diamond",
|
||
symbolOffset: ["-75%", "50%"],
|
||
symbolSize: [barWidth, 10],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
z: 3,
|
||
name: '一带一路贸易额指数',
|
||
type: "pictorialBar",
|
||
symbolPosition: "end",
|
||
data: arr[1],
|
||
symbol: "diamond",
|
||
symbolOffset: ["-75%", "-50%"],
|
||
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 2,
|
||
color: colorArr[2]
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
z: 1,
|
||
name: '“一带一路”集装箱海运量指数',
|
||
type: "bar",
|
||
barWidth: barWidth,
|
||
barGap: "50%",
|
||
data: arr[2],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color2
|
||
},
|
||
},
|
||
},
|
||
{
|
||
z: 2,
|
||
name: '“一带一路”集装箱海运量指数',
|
||
type: "pictorialBar",
|
||
data: arr[2],
|
||
symbol: "diamond",
|
||
symbolOffset: ["75%", "50%"],
|
||
symbolSize: [barWidth, 10],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color2
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
z: 3,
|
||
name: '“一带一路”集装箱海运量指数',
|
||
type: "pictorialBar",
|
||
symbolPosition: "end",
|
||
data: arr[2],
|
||
symbol: "diamond",
|
||
symbolOffset: ["75%", "-50%"],
|
||
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 2,
|
||
color: colorArr2[2]
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
z: 1,
|
||
name: '海上丝绸之路运价指数',
|
||
type: "bar",
|
||
barWidth: barWidth,
|
||
barGap: "50%",
|
||
data: arr[3],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color3
|
||
},
|
||
},
|
||
},
|
||
{
|
||
z: 2,
|
||
name: '海上丝绸之路运价指数',
|
||
type: "pictorialBar",
|
||
data: arr[3],
|
||
symbol: "diamond",
|
||
symbolOffset: ["75%", "50%"],
|
||
symbolSize: [barWidth, 10],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color3
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
z: 3,
|
||
name: '海上丝绸之路运价指数',
|
||
type: "pictorialBar",
|
||
symbolPosition: "end",
|
||
data: arr[3],
|
||
symbol: "diamond",
|
||
symbolOffset: ["75%", "-50%"],
|
||
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 2,
|
||
color: colorArr3[2]
|
||
},
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
},
|
||
|
||
],
|
||
};
|
||
serveTBar.setOption(option);
|
||
});
|
||
|
||
})();
|
||
|
||
// 折线图 左2
|
||
(function () {
|
||
// 1. 实例化对象
|
||
let myChart = echarts.init(document.querySelector(".line .chart"));
|
||
let arr = diverseForMonth('2014', 'ExportnInport') // arr获取拆分后的Exln文件的数据
|
||
console.log(arr) //f12查看详细数据
|
||
// 2.指定配置
|
||
let option = {
|
||
color: ["#57A8FF", "#E69119", "#FA0C1D"],
|
||
tooltip: {
|
||
trigger: "axis"
|
||
},
|
||
legend: {
|
||
// 如果series 对象有name 值，则 legend可以不用写data
|
||
// 修改图例组件 文字颜色
|
||
textStyle: {
|
||
color: "#4c9bfd"
|
||
},
|
||
// 这个10% 必须加引号
|
||
right: "10%"
|
||
},
|
||
grid: {
|
||
top: "20%",
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
show: true, // 显示边框
|
||
borderColor: "#012f4a", // 边框颜色
|
||
containLabel: true // 包含刻度文字在内
|
||
},
|
||
// 柱状图与折线图切换
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
/* line是折线图，bar是柱形图*/
|
||
magicType: { show: true, type: ['line', 'bar'] },
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: arr[0],
|
||
axisTick: {
|
||
show: false // 去除刻度线
|
||
},
|
||
axisLabel: {
|
||
color: "#3C34FF" // 文本颜色
|
||
},
|
||
axisLine: {
|
||
show: false // 去除轴线
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false // 去除刻度线
|
||
},
|
||
axisLabel: {
|
||
color: "#3C34FF" // 文本颜色
|
||
},
|
||
axisLine: {
|
||
show: false // 去除轴线
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#012f4a" // 分割线颜色
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: "进出口贸易指数",
|
||
type: "line",
|
||
// true 可以让我们的折线显示带有弧度
|
||
smooth: true,
|
||
data: arr[1]
|
||
},
|
||
{
|
||
name: "出口贸易指数",
|
||
type: "line",
|
||
// true 可以让我们的折线显示带有弧度
|
||
smooth: true,
|
||
data: arr[2]
|
||
},
|
||
{
|
||
name: "进口贸易指数",
|
||
type: "line",
|
||
// true 可以让我们的折线显示带有弧度
|
||
smooth: true,
|
||
data: arr[3]
|
||
},
|
||
]
|
||
};
|
||
// 3. 把配置给实例对象
|
||
myChart.setOption(option);
|
||
// 4. 让图表跟随屏幕自动的去适应
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
console.log("OK!")
|
||
// 5.点击切换效果
|
||
$(".year2-link").on("click", function () {
|
||
//let value = document.getElementById("year-link").getAttribute("value")
|
||
let value = $(this).val()
|
||
console.log("link Succeed!");
|
||
console.log(value);
|
||
arr = diverseForMonth(value, 'ExportnInport')
|
||
// 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
|
||
let option = {
|
||
color: ["#57A8FF", "#E69119", "#FA0C1D"],
|
||
tooltip: {
|
||
trigger: "axis"
|
||
},
|
||
legend: {
|
||
// 如果series 对象有name 值，则 legend可以不用写data
|
||
// 修改图例组件 文字颜色
|
||
textStyle: {
|
||
color: "#4c9bfd"
|
||
},
|
||
// 这个10% 必须加引号
|
||
right: "10%"
|
||
},
|
||
grid: {
|
||
top: "20%",
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
show: true, // 显示边框
|
||
borderColor: "#012f4a", // 边框颜色
|
||
containLabel: true // 包含刻度文字在内
|
||
},
|
||
// 柱状图与折线图切换
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
/* line是折线图，bar是柱形图*/
|
||
magicType: { show: true, type: ['line', 'bar'] },
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: arr[0],
|
||
axisTick: {
|
||
show: false // 去除刻度线
|
||
},
|
||
axisLabel: {
|
||
color: "#3C34FF" // 文本颜色
|
||
},
|
||
axisLine: {
|
||
show: false // 去除轴线
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false // 去除刻度线
|
||
},
|
||
axisLabel: {
|
||
color: "#3C34FF" // 文本颜色
|
||
},
|
||
axisLine: {
|
||
show: false // 去除轴线
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#012f4a" // 分割线颜色
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: "进出口贸易指数",
|
||
type: "line",
|
||
// true 可以让我们的折线显示带有弧度
|
||
smooth: true,
|
||
data: arr[1]
|
||
},
|
||
{
|
||
name: "出口贸易指数",
|
||
type: "line",
|
||
// true 可以让我们的折线显示带有弧度
|
||
smooth: true,
|
||
data: arr[2]
|
||
},
|
||
{
|
||
name: "进口贸易指数",
|
||
type: "line",
|
||
// true 可以让我们的折线显示带有弧度
|
||
smooth: true,
|
||
data: arr[3]
|
||
},
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
});
|
||
})();
|
||
|
||
// 柱状图 左3
|
||
(function () {
|
||
// 1实例化对象
|
||
let myChart = echarts.init(document.querySelector(".bar2 .chart "));
|
||
let arr = diverseForMonth('2014', 'WaiMao'); // arr获取拆分后的WaiMao文件的数据
|
||
console.log(arr) //f12查看详细数据
|
||
|
||
// 2. 指定配置项和数据
|
||
let option = {
|
||
color: ["#FFBF3E", "#6687E6", "#8f1d19", "#EB7060"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
left: "0%",
|
||
top: "10px",
|
||
right: "0%",
|
||
bottom: "4%",
|
||
containLabel: true
|
||
},
|
||
// 柱状图与折线图切换
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
/* line是折线图，bar是柱形图*/
|
||
magicType: { show: true, type: ['line', 'bar'] },
|
||
}
|
||
},
|
||
xAxis: [{
|
||
type: "category",
|
||
data: arr[0],
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
// 修改刻度标签 相关样式
|
||
axisLabel: {
|
||
color: "#3C34FF ",
|
||
fontSize: "8",
|
||
// rotate: -90,
|
||
},
|
||
// x坐标轴的样式
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "grey",
|
||
width: 2
|
||
}
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: "value",
|
||
// 修改刻度标签 相关样式
|
||
axisLabel: {
|
||
color: "#3C34FF ",
|
||
fontSize: 12
|
||
},
|
||
// y轴的线条改为了 2像素
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "grey",
|
||
width: 2
|
||
}
|
||
},
|
||
// y轴分割线的颜色
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)"
|
||
}
|
||
}
|
||
}],
|
||
series: [{
|
||
name: "外贸出口先导指数",
|
||
type: "bar",
|
||
barWidth: "20%",
|
||
data: arr[1],
|
||
itemStyle: {
|
||
// 修改柱子圆角
|
||
barBorderRadius: 5
|
||
},
|
||
},
|
||
{
|
||
name: "出口经理人指数",
|
||
type: "bar",
|
||
barWidth: "20%",
|
||
data: arr[2],
|
||
itemStyle: {
|
||
// 修改柱子圆角
|
||
barBorderRadius: 5
|
||
},
|
||
},
|
||
{
|
||
name: "新增出口订单指数",
|
||
type: "bar",
|
||
barWidth: "20%",
|
||
data: arr[3],
|
||
itemStyle: {
|
||
// 修改柱子圆角
|
||
barBorderRadius: 5
|
||
},
|
||
},
|
||
{
|
||
name: "出口企业综合成本指数",
|
||
type: "bar",
|
||
barWidth: "20%",
|
||
data: arr[4],
|
||
itemStyle: {
|
||
// 修改柱子圆角
|
||
barBorderRadius: 5
|
||
},
|
||
}
|
||
]
|
||
};
|
||
console.log("setStart");
|
||
// 3. 把配置项给实例对象
|
||
myChart.setOption(option);
|
||
// 4. 让图表跟随屏幕自动的去适应
|
||
console.log("setCompleted");
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
// 5.点击切换效果
|
||
$(".year1-link").on("click", function () {
|
||
//let value = document.getElementById("year-link").getAttribute("value")
|
||
let value = $(this).val()
|
||
console.log("link Succeed!");
|
||
console.log(value);
|
||
arr = diverseForMonth(value, 'Waimao');
|
||
// 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
|
||
let option = {
|
||
color: ["#1089E7", "#F57474", "#56D0E3", "#F8B448"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
// 修改图表的大小
|
||
grid: {
|
||
left: "0%",
|
||
top: "10px",
|
||
right: "0%",
|
||
bottom: "4%",
|
||
containLabel: true
|
||
},
|
||
// 柱状图与折线图切换
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
/* line是折线图，bar是柱形图*/
|
||
magicType: { show: true, type: ['line', 'bar'] },
|
||
}
|
||
},
|
||
xAxis: [{
|
||
type: "category",
|
||
data: arr[0],
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
// 修改刻度标签 相关样式
|
||
axisLabel: {
|
||
color: "#3C34FF ",
|
||
fontSize: "8",
|
||
// rotate: -90,
|
||
},
|
||
// x坐标轴的样式
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "grey",
|
||
width: 2
|
||
}
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: "value",
|
||
// 修改刻度标签 相关样式
|
||
axisLabel: {
|
||
color: "#3C34FF ",
|
||
fontSize: 12
|
||
},
|
||
// y轴的线条改为了 2像素
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "grey",
|
||
width: 2
|
||
}
|
||
},
|
||
// y轴分割线的颜色
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)"
|
||
}
|
||
}
|
||
}],
|
||
series: [{
|
||
name: "外贸出口先导指数",
|
||
type: "bar",
|
||
barWidth: "20%",
|
||
data: arr[1],
|
||
itemStyle: {
|
||
// 修改柱子圆角
|
||
barBorderRadius: 5
|
||
},
|
||
},
|
||
{
|
||
name: "出口经理人指数",
|
||
type: "bar",
|
||
barWidth: "20%",
|
||
data: arr[2],
|
||
itemStyle: {
|
||
// 修改柱子圆角
|
||
barBorderRadius: 5
|
||
},
|
||
},
|
||
{
|
||
name: "新增出口订单指数",
|
||
type: "bar",
|
||
barWidth: "20%",
|
||
data: arr[3],
|
||
itemStyle: {
|
||
// 修改柱子圆角
|
||
barBorderRadius: 5
|
||
},
|
||
},
|
||
{
|
||
name: "出口企业综合成本指数",
|
||
type: "bar",
|
||
barWidth: "20%",
|
||
data: arr[4],
|
||
itemStyle: {
|
||
// 修改柱子圆角
|
||
barBorderRadius: 5
|
||
},
|
||
},
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
});
|
||
})();
|
||
|
||
// 饼形图1 右1
|
||
(function () {
|
||
// 1. 实例化对象
|
||
let myChart = echarts.init(document.querySelector(".pie .chart"));
|
||
let arr = dijson('shouru') // arr获取拆分后的WaiMao文件的数据
|
||
console.log(arr) //f12查看详细数据
|
||
// 2.指定配置
|
||
let option = {
|
||
color: ["#FFB861", "#AF71E5", "#6FBCFA", "#EA726C",],
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||
},
|
||
|
||
legend: {
|
||
bottom: "0%",
|
||
// 修改小图标的大小
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
// 修改图例组件的文字为 12px
|
||
textStyle: {
|
||
color: "#3C34FF",
|
||
fontSize: "8"
|
||
}
|
||
},
|
||
series: [{
|
||
name: "国民总收入(亿元):",
|
||
type: "pie",
|
||
// 这个radius可以修改饼形图的大小
|
||
// radius 第一个值是内圆的半径 第二个值是外圆的半径
|
||
// radius: ["40%", "90%"],
|
||
radius: ["30%", "90%"],
|
||
center: ["50%", "45%"],
|
||
avoidLabelOverlap: false,
|
||
// 图形上的文字
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
// 链接文字和图形的线是否显示
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [{
|
||
value: arr[1][15],
|
||
name: arr[0][15]
|
||
},
|
||
{
|
||
value: arr[1][14],
|
||
name: arr[0][14]
|
||
},
|
||
{
|
||
value: arr[1][13],
|
||
name: arr[0][13]
|
||
},
|
||
{
|
||
value: arr[1][12],
|
||
name: arr[0][12]
|
||
},
|
||
{
|
||
value: arr[1][11],
|
||
name: arr[0][11]
|
||
},
|
||
{
|
||
value: arr[1][10],
|
||
name: arr[0][10]
|
||
},
|
||
{
|
||
value: arr[1][9],
|
||
name: arr[0][9]
|
||
},
|
||
{
|
||
value: arr[1][8],
|
||
name: arr[0][8]
|
||
},
|
||
{
|
||
value: arr[1][7],
|
||
name: arr[0][7]
|
||
},
|
||
{
|
||
value: arr[1][6],
|
||
name: arr[0][6]
|
||
},
|
||
{
|
||
value: arr[1][5],
|
||
name: arr[0][5]
|
||
},
|
||
{
|
||
value: arr[1][4],
|
||
name: arr[0][4]
|
||
},
|
||
{
|
||
value: arr[1][3],
|
||
name: arr[0][3]
|
||
},
|
||
{
|
||
value: arr[1][2],
|
||
name: arr[0][2]
|
||
},
|
||
{
|
||
value: arr[1][1],
|
||
name: arr[0][1]
|
||
},
|
||
{
|
||
value: arr[1][0],
|
||
name: arr[0][0]
|
||
},
|
||
]
|
||
}]
|
||
};
|
||
|
||
// 3. 把配置给实例对象
|
||
myChart.setOption(option);
|
||
// 4. 让图表跟随屏幕自动的去适应
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
})();
|
||
|
||
// 饼形图2
|
||
(function () {
|
||
let myChart = echarts.init(document.querySelector(".pie2 .chart"));
|
||
let arr = dijson('shengchan') // arr获取拆分后的WaiMao文件的数据
|
||
console.log(arr) //f12查看详细数据
|
||
let option = {
|
||
color: ["#FF827D", "#E3A53D", "#E2FA51", "#5CE69F", "#468BFA"],
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
bottom: "0%",
|
||
itemWidth: 8,
|
||
itemHeight: 8,
|
||
textStyle: {
|
||
color: "#3C34FF",
|
||
fontSize: "8"
|
||
}
|
||
},
|
||
series: [{
|
||
name: "生产总值(亿元):",
|
||
type: "pie",
|
||
radius: ["20%", "80%"],
|
||
center: ["50%", "50%"],
|
||
roseType: "radius",
|
||
// 图形的文字标签
|
||
label: {
|
||
fontSize: 10
|
||
},
|
||
// 链接图形和文字的线条
|
||
labelLine: {
|
||
// length 链接图形的线条
|
||
length: 6,
|
||
// length2 链接文字的线条
|
||
length2: 8
|
||
},
|
||
data: [{
|
||
value: arr[1][15],
|
||
name: arr[0][15]
|
||
},
|
||
{
|
||
value: arr[1][14],
|
||
name: arr[0][14]
|
||
},
|
||
{
|
||
value: arr[1][13],
|
||
name: arr[0][13]
|
||
},
|
||
{
|
||
value: arr[1][12],
|
||
name: arr[0][12]
|
||
},
|
||
{
|
||
value: arr[1][11],
|
||
name: arr[0][11]
|
||
},
|
||
{
|
||
value: arr[1][10],
|
||
name: arr[0][10]
|
||
},
|
||
{
|
||
value: arr[1][9],
|
||
name: arr[0][9]
|
||
},
|
||
{
|
||
value: arr[1][8],
|
||
name: arr[0][8]
|
||
},
|
||
{
|
||
value: arr[1][7],
|
||
name: arr[0][7]
|
||
},
|
||
{
|
||
value: arr[1][6],
|
||
name: arr[0][6]
|
||
},
|
||
{
|
||
value: arr[1][5],
|
||
name: arr[0][5]
|
||
},
|
||
{
|
||
value: arr[1][4],
|
||
name: arr[0][4]
|
||
},
|
||
{
|
||
value: arr[1][3],
|
||
name: arr[0][3]
|
||
},
|
||
{
|
||
value: arr[1][2],
|
||
name: arr[0][2]
|
||
},
|
||
{
|
||
value: arr[1][1],
|
||
name: arr[0][1]
|
||
},
|
||
{
|
||
value: arr[1][0],
|
||
name: arr[0][0]
|
||
},
|
||
]
|
||
}]
|
||
};
|
||
myChart.setOption(option);
|
||
// 监听浏览器缩放，图表对象调用缩放resize函数
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
})();
|
||
|
||
|
||
|
||
// 地图 中间
|
||
(function () {
|
||
let myChart = echarts.init(document.querySelector(".map .chart2"));
|
||
let geoCoordMap = {
|
||
// 海上丝绸之路
|
||
里斯本: [-9.13, 38.71],
|
||
比雷埃夫斯: [23.66, 37.95],
|
||
亚历山大: [29.92, 31.22],
|
||
吉达: [39.02, 21.05],
|
||
吉布提港: [43.13, 11.6],
|
||
迪拜: [55.3, 25.25],
|
||
孟买: [72.83, 18.97],
|
||
科伦坡: [79.85, 6.93],
|
||
班加罗尔: [77.60, 12.97],
|
||
吉大港: [91.8, 22.3],
|
||
吉隆坡: [101.7, 3.13],
|
||
新加坡: [103.85, 1.3],
|
||
南宁: [107.8, 22.33],
|
||
福州: [119.28, 26.08],
|
||
上海: [121.87, 30.82],
|
||
釜山: [129.03, 35.1],
|
||
北太平洋: [165, 55],
|
||
//新亚欧大陆桥
|
||
杭州: [120.17, 30.25],
|
||
西安: [108.8, 33.75],
|
||
乌鲁木齐: [87.56, 43.92],
|
||
莫斯科: [37.12, 56.13],
|
||
布列斯特: [23.68, 52.1],
|
||
华沙: [21, 52.25],
|
||
柏林: [13, 52],
|
||
伦敦: [0.15, 51.5],
|
||
阿拉木图: [76.89, 43.276],
|
||
塔什干: [69.3, 41.32],
|
||
德黑兰: [51.42, 35.63],
|
||
安卡拉: [32.86, 39.93],
|
||
伊斯坦布尔: [28.97, 41.01],
|
||
//中蒙俄经济走廊
|
||
哈巴罗夫斯克: [135.27, 48.73],
|
||
伊尔库茨克: [104.27, 52.3],
|
||
圣彼得堡: [30.41, 59.92],
|
||
符拉迪沃斯托克: [131, 43],
|
||
北京: [116.32, 39.93],
|
||
乌兰巴托: [106.89, 47.91]
|
||
};
|
||
// 海上丝绸之路
|
||
let XAData = [
|
||
[{
|
||
name: "上海"
|
||
}, {
|
||
name: "福州",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "福州"
|
||
}, {
|
||
name: "南宁",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "南宁"
|
||
}, {
|
||
name: "新加坡",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "新加坡"
|
||
}, {
|
||
name: "吉隆坡",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "吉隆坡"
|
||
}, {
|
||
name: "科伦坡",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "吉大港"
|
||
}, {
|
||
name: "班加罗尔",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "班加罗尔"
|
||
}, {
|
||
name: "科伦坡",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "科伦坡"
|
||
}, {
|
||
name: "孟买",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "孟买"
|
||
}, {
|
||
name: "迪拜",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "迪拜"
|
||
}, {
|
||
name: "吉布提港",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "吉布提港"
|
||
}, {
|
||
name: "吉达",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "吉达"
|
||
}, {
|
||
name: "亚历山大",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "亚历山大"
|
||
}, {
|
||
name: "比雷埃夫斯",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "比雷埃夫斯"
|
||
}, {
|
||
name: "里斯本",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "上海"
|
||
}, {
|
||
name: "釜山",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "釜山"
|
||
}, {
|
||
name: "北太平洋",
|
||
value: 100
|
||
}]
|
||
|
||
];
|
||
//新亚欧大陆桥
|
||
let XNData = [
|
||
[{
|
||
name: "杭州"
|
||
}, {
|
||
name: "西安",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "西安"
|
||
}, {
|
||
name: "乌鲁木齐",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "乌鲁木齐"
|
||
}, {
|
||
name: "莫斯科",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "莫斯科"
|
||
}, {
|
||
name: "布列斯特",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "布列斯特"
|
||
}, {
|
||
name: "华沙",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "华沙"
|
||
}, {
|
||
name: "柏林",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "柏林"
|
||
}, {
|
||
name: "伦敦",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "乌鲁木齐"
|
||
}, {
|
||
name: "阿拉木图",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "阿拉木图"
|
||
}, {
|
||
name: "塔什干",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "塔什干"
|
||
}, {
|
||
name: "德黑兰",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "德黑兰"
|
||
}, {
|
||
name: "安卡拉",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "安卡拉"
|
||
}, {
|
||
name: "伊斯坦布尔",
|
||
value: 100
|
||
}]
|
||
|
||
];
|
||
//中蒙俄经济走廊
|
||
let YCData = [
|
||
[{
|
||
name: "哈巴罗夫斯克"
|
||
}, {
|
||
name: "伊尔库茨克",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "伊尔库茨克"
|
||
}, {
|
||
name: "莫斯科",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "莫斯科"
|
||
}, {
|
||
name: "圣彼得堡",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "符拉迪沃斯托克"
|
||
}, {
|
||
name: "伊尔库茨克",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "北京"
|
||
}, {
|
||
name: "乌兰巴托",
|
||
value: 100
|
||
}],
|
||
[{
|
||
name: "乌兰巴托"
|
||
}, {
|
||
name: "伊尔库茨克",
|
||
value: 100
|
||
}]
|
||
];
|
||
|
||
let 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";
|
||
|
||
let convertData = function (data) {
|
||
let res = [];
|
||
for (let i = 0; i < data.length; i++) {
|
||
let dataItem = data[i];
|
||
|
||
let fromCoord = geoCoordMap[dataItem[0].name];
|
||
let toCoord = geoCoordMap[dataItem[1].name];
|
||
if (fromCoord && toCoord) {
|
||
res.push({
|
||
fromName: dataItem[0].name,
|
||
toName: dataItem[1].name,
|
||
coords: [fromCoord, toCoord],
|
||
value: dataItem[1].value
|
||
});
|
||
}
|
||
}
|
||
return res;
|
||
};
|
||
|
||
let color = ["#5599FF", "#FF7744", "#9F88FF"]; //航线的颜色
|
||
let root = ["海上丝绸之路", "新亚欧大陆桥", "中蒙俄经济走廊"]//路线名称
|
||
let series = [];
|
||
[
|
||
["海上丝绸之路", XAData],
|
||
["新亚欧大陆桥", XNData],
|
||
["中蒙俄经济走廊", YCData]
|
||
].forEach(function (item, i) {
|
||
series.push({
|
||
name: item[0],//+ " Top3",
|
||
type: "lines",
|
||
zlevel: 1,
|
||
effect: {
|
||
show: true,
|
||
period: 6,
|
||
trailLength: 0.7,
|
||
color: "#FFFFFF", //arrow箭头尾迹的颜色
|
||
symbolSize: 3
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[i],
|
||
width: 0,
|
||
curveness: 0.2
|
||
}
|
||
},
|
||
data: convertData(item[1])
|
||
},
|
||
{ //线条系列数据
|
||
name: item[0],// + " Top3",
|
||
type: "lines",
|
||
zlevel: 2,
|
||
symbol: ["none", "arrow"], //标记的图像：箭头
|
||
symbolSize: 10, //标记的大小
|
||
effect: { //线条特效的配置
|
||
show: true,
|
||
period: 6, //特效动画的时间，单位s
|
||
trailLength: 0, //特效尾迹的长度
|
||
symbol: planePath, //特效图形的标记，可选circle
|
||
// symbol: gtPath,
|
||
|
||
symbolSize: 15 //特效标记的大小
|
||
},
|
||
lineStyle: { //线条样式
|
||
normal: {
|
||
color: color[i],
|
||
width: 1, //线条宽度
|
||
opacity: 0.6, //尾迹线条透明度
|
||
curveness: 0.2 //尾迹线条曲直度
|
||
}
|
||
},
|
||
data: convertData(item[1])
|
||
},
|
||
{
|
||
name: item[0],// + " Top3",
|
||
type: "effectScatter",
|
||
coordinateSystem: "geo",
|
||
zlevel: 2,
|
||
rippleEffect: {
|
||
brushType: "stroke"
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: false, //不显示地名
|
||
position: "right",
|
||
formatter: "{b}"
|
||
}
|
||
},
|
||
symbolSize: function (val) {
|
||
return val[2] / 8;
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: color[i]
|
||
},
|
||
emphasis: {
|
||
areaColor: "#2B91B7"
|
||
}
|
||
},
|
||
data: item[1].map(function (dataItem) {
|
||
return {
|
||
name: dataItem[1].name,
|
||
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
|
||
};
|
||
})
|
||
});
|
||
});
|
||
let option = {
|
||
tooltip: {//提示框
|
||
trigger: "item",//数据项图形触发
|
||
},
|
||
|
||
legend: {
|
||
orient: "vertical",
|
||
top: "bottom",
|
||
left: "right",
|
||
data: ["海上丝绸之路 ", "新亚欧大陆桥 ", "中蒙俄经济走廊"],
|
||
textStyle: {
|
||
color: "#000"
|
||
},
|
||
selectedMode: "multiple"
|
||
},
|
||
|
||
geo: {
|
||
map: "world",
|
||
label: {
|
||
emphasis: {
|
||
show: true, //显示国家名
|
||
color: "#fff"
|
||
}
|
||
},
|
||
// 把世界地图放大了1.2倍
|
||
zoom: 1.5,
|
||
roam: true,
|
||
itemStyle: {
|
||
normal: {
|
||
// 地图省份的背景颜色
|
||
areaColor: "#FFBB66",
|
||
opacity: 0.85,
|
||
borderColor: "#888888",
|
||
borderWidth: 1
|
||
},
|
||
emphasis: {
|
||
areaColor: "#3069a9"
|
||
}
|
||
}
|
||
},
|
||
series: series
|
||
};
|
||
myChart.setOption(option);
|
||
// 监听浏览器缩放，图表对象调用缩放resize函数
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
})();
|
||
}
|
||
|
||
//Builders
|
||
console.log("程婧", "胡雨婷", "邵仁杰") |