248 lines
8.7 KiB
JavaScript
248 lines
8.7 KiB
JavaScript
|
window.onload = function () {
|
|||
|
|
// 图表部分
|
|||
|
|
(function () {
|
|||
|
|
|
|||
|
|
var myChart = echarts.init(document.querySelector(".chart"));
|
|||
|
|
let arr = dijson('invest') // arr获取拆分后的WaiMao文件的数据
|
|||
|
|
// console.log(arr) //f12查看详细数据
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis"
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 表上方选项
|
|||
|
|
legend: {
|
|||
|
|
top: "0%",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#a62a00",//选项的颜色
|
|||
|
|
fontSize: "18"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 坐标系位置
|
|||
|
|
grid: {
|
|||
|
|
left: "5%",
|
|||
|
|
top: "10%",
|
|||
|
|
right: "5%",
|
|||
|
|
bottom: "0%",
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
// 柱状图与折线图切换
|
|||
|
|
toolbox: {
|
|||
|
|
show: true,
|
|||
|
|
feature: {
|
|||
|
|
/* line是折线图，bar是柱形图*/
|
|||
|
|
magicType: { show: true, type: ['line', 'bar'] },
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
// x轴
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: "category",
|
|||
|
|
boundaryGap: false,
|
|||
|
|
// x轴数据
|
|||
|
|
data: arr[0],
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#a2000c",//x轴数字颜色
|
|||
|
|
fontSize: 14
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#a2000c",// x轴线颜色
|
|||
|
|
width: 1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
// y轴
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: "value",
|
|||
|
|
axisTick: { show: false },
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#a2000c",//y轴数字颜色
|
|||
|
|
fontSize: 14
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#a2000c",
|
|||
|
|
width: 2
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 修改分割线的颜色
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "rgba(0,0,0,0.1)"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
// 数据
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "能源投资(万亿元人民币):",
|
|||
|
|
type: "line",
|
|||
|
|
smooth: true,
|
|||
|
|
// 单独修改当前线条的样式
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#a65600",//线条颜色
|
|||
|
|
width: "1"
|
|||
|
|
},
|
|||
|
|
stack: 'all', // 堆叠图的设置
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
1,
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "#a65600",
|
|||
|
|
opacity: 0.2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.8,
|
|||
|
|
color: "#a65600",
|
|||
|
|
opacity: 0.2
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
false
|
|||
|
|
),
|
|||
|
|
shadowColor: "rgba(0, 0, 0, 0.1)"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 设置拐点
|
|||
|
|
symbol: "circle",
|
|||
|
|
// 拐点大小
|
|||
|
|
symbolSize: 1,
|
|||
|
|
// 开始不显示拐点， 鼠标经过显示
|
|||
|
|
showSymbol: false,
|
|||
|
|
// 设置拐点颜色以及边框
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#a65600",//选项线的颜色
|
|||
|
|
borderColor: "#a65600",
|
|||
|
|
borderWidth: 6
|
|||
|
|
},
|
|||
|
|
data: arr[1]
|
|||
|
|
},
|
|||
|
|
// 一带一路集装箱海运量指数
|
|||
|
|
{
|
|||
|
|
name: "矿产资源投资(万亿元人民币):",
|
|||
|
|
type: "line",
|
|||
|
|
smooth: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: "#ffd740",//线条颜色
|
|||
|
|
width: "1"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
stack: 'all', // 堆叠图的设置
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
1,
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "#ffd740",
|
|||
|
|
opacity: 0.2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.8,
|
|||
|
|
color: "#ffd740",
|
|||
|
|
opacity: 0.2
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
false
|
|||
|
|
),
|
|||
|
|
shadowColor: "rgba(0, 0, 0, 0.1)"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 设置拐点 小圆点
|
|||
|
|
symbol: "circle",
|
|||
|
|
// 拐点大小
|
|||
|
|
symbolSize: 1,
|
|||
|
|
// 设置拐点颜色以及边框
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#ffd740",
|
|||
|
|
borderColor: "#ffd740",//选项线的颜色
|
|||
|
|
borderWidth: 6
|
|||
|
|
},
|
|||
|
|
// 开始不显示拐点， 鼠标经过显示
|
|||
|
|
showSymbol: false,
|
|||
|
|
data: arr[2]
|
|||
|
|
},
|
|||
|
|
// 海上丝绸之路运价指数
|
|||
|
|
{
|
|||
|
|
name: "基础设施投资(万亿元人民币):",
|
|||
|
|
type: "line",
|
|||
|
|
smooth: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: "#a0000f",//线条颜色
|
|||
|
|
width: "1"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
stack: 'all', // 堆叠图的设置
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
1,
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "#a0000f",
|
|||
|
|
opacity: 0.2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.8,
|
|||
|
|
color: "#a0000f",
|
|||
|
|
opacity: 0.2
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
false
|
|||
|
|
),
|
|||
|
|
shadowColor: "rgba(0, 0, 0, 0.1)"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 设置拐点 小圆点
|
|||
|
|
symbol: "circle",
|
|||
|
|
// 拐点大小
|
|||
|
|
symbolSize: 1,
|
|||
|
|
// 设置拐点颜色以及边框
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#a0000f",//选项线的颜色
|
|||
|
|
borderColor: "#a0000f",
|
|||
|
|
borderWidth: 6
|
|||
|
|
},
|
|||
|
|
// 开始不显示拐点， 鼠标经过显示
|
|||
|
|
showSymbol: false,
|
|||
|
|
data: arr[3]
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
// 图表跟随屏幕自适应
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart.resize();
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
}
|