1.演示效果图
2.写死数据的echatrts代码
var option = {
tooltip: {
trigger: 'axis',
},
legend: {
width: 392,
top: 7,
icon: 'rec1t',
itemHeight: 10,
itemWidth: 10,
// 设置间距
itemGap: 17,
textStyle: {
color: '#fff',
fontSize: 14,
},
data: ['委托利用处置量', '产生量', '自行利用处置量', '贮存量']
},
grid: {
left: 0,
right: 0,
bottom: 18,
top: 50,
containLabel: true,
},
xAxis: [{
type: 'category',
axisLabel: {
color: '#fff',
fontSize: 14,
fontFamily: 'SourceHanSansCN-Normal',
interval: 0,
// align: 'left',
lineHeight: 20,
formatter: function (value) {
// 拼接加 \n 返回的类目项
var ret = '';
// 每项显示文字个数
var maxLength = 4;
// X轴类目项的文字个数
var valLength = value.length;
// 类目项需要换行的行数
var rowN = Math.ceil(valLength / maxLength);
if (rowN > 1) {
for (var i = 0; i < rowN; i++) {
// 每次截取的字符串
var temp = '';
// 开始截取的位置
var start = i * maxLength;
// 结束截取的位置
var end = start + maxLength;
temp = value.substring(start, end) + '\n';
// 拼接最终的字符串
ret += temp;
}
return ret;
} else {
return value;
}
},
},
axisLine: {
lineStyle: {
color: '#2E3636',
},
},
axisTick: {
show: false,
},
data: [
'2018',
'2019',
'2020',
'2021',
'2022',
],
}, ],
yAxis: [{
type: 'value',
name: '吨',
nameTextStyle: {
color: '#fff',
fontSize: 14,
padding: [0, 56, 0, 20]
},
axisLabel: {
color: '#fff',
fontSize: 14,
fontFamily: 'SourceHanSansCN-Normal',
},
axisLine: {
lineStyle: {
color: '#2E3636',
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#2E3636',
},
},
}, ],
series: [
{
name: '委托利用处置量',
type: 'line',
label: {
// 是否在柱形图上显示数字
show: false,
position: 'insideRight',
}, // 设置柱状图大小
barWidth: 7,
itemStyle: {
color: '#00B0EA'
},
data: [320, 332, 301, 334, 390, 234],
},
{
name: '产生量',
type: 'line',
label: {
// 是否在柱形图上显示数字
show: false,
position: 'insideRight',
}, // 设置柱状图大小
barWidth: 7,
itemStyle: {
color: '#00FFEE'
},
data: [862, 1018, 964, 1026, 1279, 124],
},
{
name: '自行利用处置量',
type: 'line',
label: {
// 是否在柱形图上显示数字
show: false,
position: 'insideRight',
}, // 设置柱状图大小
barWidth: 7,
iitemStyle: {
color: '#44D400'
},
data: [562, 918, 544, 726, 679, 235],
},
{
name: '贮存量',
type: 'line',
label: {
// 是否在柱形图上显示数字
show: false,
position: 'insideRight',
}, // 设置柱状图大小
barWidth: 7,
itemStyle: {
color: '#FFEC01'
},
data: [562, 918, 544, 726, 679, 564],
},
],
};
3.从接口接收数据进行组装代码
var cityRiskWasteStatis = echarts.init(
document.querySelector('#city-risk-waste-statis')
);
$.ajax({
url: 'http://182.48.115.108:7070/service/serviceinterface/search/run.action?interfaceId=629617deec5ad1ac42be173892d1ba52&token=cjdbh',
type: 'post',
datatype: 'json',
async: false,
success: function (result) {
var xArray = [];
var series = [];
var serienames = [];
var colors = ['#00B0EA','#00FFEE','#44D400','#FFEC01'];
for(var i = 0;i<result.data.length;i++){
var item = result.data[i];
if(xArray.indexOf(item.YEARNUMBER)==-1){
xArray.push(item.YEARNUMBER);
}
if(serienames.indexOf(item.NYTYPENAME)==-1){
serienames.push(item.NYTYPENAME);
}
}
for(var j = 0;j<serienames.length;j++){
var serie = {
name: serienames[j],
type: 'line',
label: {
// 是否在柱形图上显示数字
show: false,
position: 'insideRight',
}, // 设置柱状图大小
barWidth: 7,
itemStyle: {
color: colors[j]
}
}
var yArray=[];
for(var i = 0;i<result.data.length;i++){
var item = result.data[i];
if(item.NYTYPENAME==serienames[j]){
yArray.push(item.CONSUMPTION);
}
serie.data=yArray;
}
series.push(serie);
}
console.log(series);
console.log(xArray);
console.log(serienames);
var option = {
tooltip: {
trigger: 'axis',
},
legend: {
width: 392,
top: 7,
icon: 'rec1t',
itemHeight: 10,
itemWidth: 10,
// 设置间距
itemGap: 17,
textStyle: {
color: '#fff',
fontSize: 14,
},
data: serienames
},
grid: {
left: 0,
right: 0,
bottom: 18,
top: 50,
containLabel: true,
},
xAxis: [{
type: 'category',
axisLabel: {
color: '#fff',
fontSize: 14,
fontFamily: 'SourceHanSansCN-Normal',
interval: 0,
// align: 'left',
lineHeight: 20,
formatter: function (value) {
// 拼接加 \n 返回的类目项
var ret = '';
// 每项显示文字个数
var maxLength = 4;
// X轴类目项的文字个数
var valLength = value.length;
// 类目项需要换行的行数
var rowN = Math.ceil(valLength / maxLength);
if (rowN > 1) {
for (var i = 0; i < rowN; i++) {
// 每次截取的字符串
var temp = '';
// 开始截取的位置
var start = i * maxLength;
// 结束截取的位置
var end = start + maxLength;
temp = value.substring(start, end) + '\n';
// 拼接最终的字符串
ret += temp;
}
return ret;
} else {
return value;
}
},
},
axisLine: {
lineStyle: {
color: '#2E3636',
},
},
axisTick: {
show: false,
},
data: xArray,
}, ],
yAxis: [{
type: 'value',
name: '吨',
nameTextStyle: {
color: '#fff',
fontSize: 14,
padding: [0, 56, 0, 20]
},
axisLabel: {
color: '#fff',
fontSize: 14,
fontFamily: 'SourceHanSansCN-Normal',
},
axisLine: {
lineStyle: {
color: '#2E3636',
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#2E3636',
},
},
}, ],
series: series,
};
cityRiskWasteStatis.setOption(option);
window.addEventListener('resize', function () {
cityRiskWasteStatis.resize();
});
}
});