// 参考地址:https://www.isqqw.com/echartsdetail?id=31404
//加载数据
function LoadDataX() {
GetApiDataSync2("url"
, 'POST'
, {
annual: 2022
}
, function (result) {
if (result.Success) {
setMap(result.data, "map1","line");//使用折线
}
}, true
);
}
function LoadData() {
GetApiDataSync2("url"
, 'POST'
, {
annual:2022
}
, function (result) {
if (result.Success) {
setMap(result.data, "map2","bar");//柱状图
}
}, true
);
}
function setMap(data,chartid,type) {
var x_data = [];
var legendData = [];
var selected = {};
var seriesData = [];
avalon.each(data, function (index, el) {
legendData.push(el.name);
selected[el.name] = index < 2;
var leftdata = [], rightdata = [];
avalon.each(el.children, function (idx, item) {
if (index === 0) {
x_data.push(item.name);
}
leftdata.push(item.dfje);
rightdata.push(item.corpnum);
});
seriesData.push({
name: el.name,
type: type,
xAxisIndex: 0,
yAxisIndex: 0,
data: leftdata
});
seriesData.push({
name: el.name,
type: type,
xAxisIndex: 1,
yAxisIndex: 1,
data: rightdata
});
});
/*
var dataAll = {
"leftdata": { //leftdata
"y_data": leftdata,
"total": 8000
},
"rightdata": { //rightdata
"y_data": rightdata,
"total": 8000
},
"x_data": x_data
};
*/
var markLineOpt = {
animation: false,
label: {
normal: {
//formatter: 'y = 0.5 * x + 3',
textStyle: {
align: 'right'
}
}
},
lineStyle: {
normal: {
type: 'solid'
}
},
tooltip: {
//formatter: 'y = 0.5 * x + 3'
},
data: [
[{
coord: [0, 3],
symbol: 'none'
}, {
coord: [20, 13],
symbol: 'none'
}]
]
};
var markxAxis = function (len) {
var Axis = [];
for (var i = 0; i < len; i++) {
Axis.push(createxAxis(x_data,i));
}
return Axis;
};
var markyAxis = function (len) {
var Axis = [];
for (var i = 0; i < len; i++) {
Axis.push(createyAxis(i));
}
return Axis;
};
option = {
title: [{
top: '0%',
x: '25%',
textStyle: {
fontSize: 14,
color:"#fff"
},
textAlign: 'center',
text: '投入金额'
}, {
x: '75%',
textStyle: {
fontSize: 14,
color: "#fff"
},
textAlign: 'center',
top: '0%',
text: '覆盖企业'
}],
grid: [{
left: '3%',
top: '20%',
width: '45%',
//height: '20%'
},
{
left: '53%',
top: '20%',
width: '45%',
//height: '20%'
}
],
legend: {
data: legendData,
selected: selected,
top: '',
left: 'center',
textStyle: {
color: '#fff',
fontSize: 12,
},
},
tooltip: {
show: 'true',
trigger: "axis",
axisPointer: { type: "cross" },
},
xAxis: markxAxis(2),
yAxis: markyAxis(2),
series: seriesData
};
var chartDom = document.getElementById(chartid);
if (chartDom) {
var myChart = echarts.init(chartDom);
option && myChart.setOption(option,true);
}
}
function createxAxis(data, gridIndex) {
return {
data: data,
gridIndex: gridIndex ,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#7B7F9C",
// width: 1,
//type: 'dashed',
},
},
splitLine: {
show: false,
interval: 'auto',
lineStyle: {
color: ['#502297'],
//type: 'dashed',
},
},
axisTick: {
show: false, //隐藏X轴刻度
alignWithLabel: true,
},
axisLabel: {
show: true,
textStyle: {
color: '#FFFFFF', //X轴文字颜色
fontSize: 12,
},
margin: 12,
interval: 0,
rotate: 30,
/*
formatter: function (value) {
if (value.length > 3) {
return value.substring(0, 3);
}
return value;
},
*/
},
}
}
function createyAxis(gridIndex) {
return {
type: 'value',
gridIndex: gridIndex,
name: '单位:万元',
nameTextStyle: {
color: "#00b09b",
fontSize: 12,
},
splitLine: {
show: true,
interval: 'auto',
lineStyle: {
color: '#2D3A52'
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#7b7f9c',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#FFFFFF',
fontSize: 12,
},
},
}
}