image.png
getyktdByareaData () {
getyktdByarea(this.startTime, this.endTime).then( res => {
let listX = []
let listY = []
let listZ = []
if (res.data.code !== 0) {
this.$message.error(res.data.msg)
} else {
res.data.data.forEach(item => {
listX.push(item.area)
listY.push(item.households)
listZ.push(item.cap)
})
for (let i = 0; i < this.xAxisData.length; i++) {
let num = 0
let numz = 0
for (let j = 0; j < listX.length; j++) {
if(this.xAxisData[i] === listX[j]){
this.yAxisData.push(listY[j])
} else {
num++
}
}
for (let z = 0; z < listX.length; z++) {
if(this.xAxisData[i] === listX[z]){
this.zAxisData.push(listZ[z])
} else {
numz++
}
}
if (num === listX.length) {
this.yAxisData.push('无数据')
}
if (numz === listX.length) {
this.zAxisData.push('0')
}
}
this.drawLine()
}
})
},
drawLine() {
const myCharts = echarts.init(document.getElementById('myChart3'));
// let yMax = 1000;
// 绘制图表 宽度 4.3 * fontSize = 430 + 'px' 高度 3.2 * fontSize = 300 + 'px'
const options = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999',
},
},
},
legend: {
data: ['通电数', '通电容量'],
textStyle: {
color: '#fff',
// fontSize: '14',
},
},
grid: {
left: '2%'
},
xAxis: [
{
type: 'category',
data: this.xAxisData,
axisPointer: {
type: 'shadow',
},
// 坐标线
axisLine: {
symbol: ['none', 'arrow'],
lineStyle: {
type: 'solid',
color: ['rgba(255,255,255,0.4)'], // 左边线的颜色
width: '1', // 坐标线的宽度
},
},
// 坐标值颜色设置
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '18',
},
},
},
],
yAxis: [
{
type: 'value',
name: '单位(户)',
nameTextStyle: {
color: '#fff',
},
// min: 0,
// max: 250,
// interval: 5,
// 网格样式
splitLine: {
show: true,
lineStyle: {
color: ['rgba(255,255,255,0.1)'],
width: 1,
type: 'dotted',
},
},
axisLine: {
symbol: ['none', 'arrow'],
lineStyle: {
type: 'solid',
color: ['rgba(255,255,255,0.4)'], // 左边线的颜色
width: '1', // 坐标线的宽度
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '18',
},
},
},
{
type: 'value',
name: '单位：万千伏安',
// interval: 5000,
// min: 0,
// max: 50,
// 网格样式
splitLine: {
show: true,
lineStyle: {
color: ['rgba(255,255,255,0.1)'],
width: 1,
type: 'dotted',
},
},
axisLine: {
symbol: ['none', 'arrow'],
lineStyle: {
type: 'solid',
color: ['rgba(255,255,255,0.4)'], // 左边线的颜色
width: '1', // 坐标线的宽度
},
},
axisLabel: {
show: true,
textStyle: {
color: '#ddeaff',
fontSize: '18',
},
},
},
],
barWidth: '30%',
series: [
{
name: '通电数',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#d2b55e' },
{ offset: 0.5, color: '#73695b' },
{ offset: 1, color: '#282d59' },
],
),
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#d2b55e' },
{ offset: 0.5, color: '#73695b' },
{ offset: 1, color: '#282d59' },
],
),
},
},
data: this.yAxisData,
},
{
name: '通电容量',
type: 'line',
smooth: true,
yAxisIndex: 1,
data: this.zAxisData,
},
],
};
myCharts.setOption(options);
window.addEventListener('resize', () => {
myCharts.resize();
});
},
网友评论