//----不太清楚怎么描述 哈哈哈 记录下
queryChart() {
var myChartQueryChart = this.$echarts.init(
document.getElementById('queryChart')
)
// --------------------接口获取时使用,暂时为模拟数据,虽然不太懂设计逻辑,但是为了实现效果....
// this.datax = this.chartData
// if (this.datax.length === 0) {
// // 无数据时：展示暂无数据
// const dom = document.getElementById('queryChart');
// dom.innerHTML = '-暂无相关数据-';
// dom.style.cssText = 'text-align:center; color: #999; border: none;line-height: 300px';
// dom.removeAttribute('_echarts_instance_');
// } else {
// console.log('123', this.datax)
// let arr2 = [];
// for (let i = 0; i < this.datax.length; i++) {
// arr2.push(this.datax[i].clzl);
// }
const colorsData = {
偏其他型: {color: '#00bced'},
偏综合型: {color: '#ffd458'},
粗颗粒物型: {color: '#ffa10d'},
偏二次型: {color: '#78c05f'},
偏机动车型: {color: '#41a01f'},
偏燃煤型: {color: '#ff7171'}
}
const chartData = [[{type: '偏其他型', num: '3'}], [{type: '偏综合型', num: '6'}], [{
type: '偏其他型',
num: '5'
}], [{type: '偏机动车型', num: '9'}], [{type: '偏燃煤型', num: '3'}]]
var series = [];
var xData = []
var xData1 = []
var xData2 = []
var xData3 = []
var xData4 = []
var xData5 = []
var xData6 = []
var colorData = []
var typeData = []
//通过数据处理把一个类型的数据放到一个数组中,不是这个类型的数据用0或者''来占位,
// !!!这样会产生新的问题----x轴一个数据(例如x轴为01;00时)会显示五条柱子(其他柱子数值为0,但是占了位置现有的柱子就不会居中显示)
//-------通过柱子折叠(stack: "AA")合并为一个柱子 就只占了一个柱子的位置
// 但是这样会在tooltip的时候会显示其他类型数值为0 ,通过tooltip formatter函数把数据为0的去掉
//最终展示为正常的
for (var i = 0; i < chartData.length; i++) {
if (chartData[i][0].type === '偏其他型') {
xData1[i] = chartData[i][0].num
} else {
xData1[i] = 0
}
if (chartData[i][0].type === '偏综合型') {
xData2[i] = chartData[i][0].num
} else {
xData2[i] = 0
}
if (chartData[i][0].type === '粗颗粒物型') {
xData3[i] = chartData[i][0].num
} else {
xData3[i] = 0
}
if (chartData[i][0].type === '偏二次型') {
xData4[i] = chartData[i][0].num
} else {
xData4[i] = 0
}
if (chartData[i][0].type === '偏机动车型') {
xData5[i] = chartData[i][0].num
} else {
xData5[i] = 0
}
if (chartData[i][0].type === '偏燃煤型') {
xData6[i] = chartData[i][0].num
} else {
xData6[i] = 0
}
}
this.optionQueryChart = {
// backgroundColor: "#0f375f",
grid: {
top: '12%',
bottom: '10%', //也可设置left和right设置距离来控制图表的大小
left: "8%",
right: "5%",
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
show: true,
color: '#666'
}
},
formatter: (params) => {
// console.log('params', params)
let templete = '';
let title = ''
let pqt = ''
let pzh = ''
let cklw = ''
let pec = ''
let pjdc = ''
let prm = ''
let zx = ''
for (let i = 0; i < params.length; i++) {
let item = params[i];
// console.log('item', item)
title = item.axisValueLabel
// templete += '总数' + '<br>' + (item.seriesName + `: ` + item.data + '(km/h)') + '<br>'
if (item.seriesName === '偏其他型') {
if (item.data) {
pqt = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
}
}
if (item.seriesName === '偏综合型') {
if (item.data) {
pzh = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
}
}
if (item.seriesName === '粗颗粒物型') {
if (item.data) {
cklw = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
}
}
if (item.seriesName === '偏二次型') {
if (item.data) {
pec = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
}
}
if (item.seriesName === '偏机动车型') {
if (item.data) {
pjdc = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
}
}
if (item.seriesName === '偏燃煤型') {
if (item.data) {
prm = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
}
}
if (item.seriesName === '折线') {
if (item.data) {
zx = (item.seriesName + `: ` + item.data + ' ug/m³') + '<br>'
}
}
//
templete = title + '<br>' + pqt + pzh + cklw + pec + pjdc + prm + zx
}
return templete
},
// formatter
confine: true, // 是否将 tooltip 框限制在图表的区域内
backgroundColor: "#fff", // 提示框浮层的背景颜色
padding: [15, 25], // 提示框浮层内边距，单位px
position: "left",
textStyle: {
color: "#333", // 文字的颜色
fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
},
},
legend: {
data: ['偏其他型', '偏综合型', '粗颗粒物型', '偏二次型', '偏机动车型', '偏燃煤型', '折线'],
top: '3%',
// icon: "circle",
// itemHeight: 8,
// itemWidth: 8,
textStyle: {
color: '#666',
fontSize: 14
}
},
xAxis: {
// data: arr2,
data: ['01:00', '02:00', ' 03:00', '04:00', '05:00'],
axisLine: {
show: true,//隐藏X轴轴线
lineStyle: {
color: "#ebeef5"
},
},
axisTick: {
show: false //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#666', //X轴文字颜色,
fontSize: 14
}
}
},
yAxis: [
{
type: 'value',
name: 'PM₂.₅浓度/ug/m³',
nameTextStyle: {
color: '#666',
fontSize: 14
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ebeef5"
},
},
axisLabel: {
show: true,
textStyle: {
color: '#666',
fontSize: 14
}
}
},
{
type: 'value',
// name: '%',
max: '100',
nameTextStyle: {
color: '#666',
fontSize: 14
},
position: 'right',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ebeef5"
},
},
axisLabel: {
show: true,
formatter: '{value} ', //右侧Y轴文字显示
textStyle: {
color: '#666',
fontSize: 14
}
}
}
],
series:
// 一个时间点只显示一条一个类型的数据,
//通过数据为0来隐藏其他柱子,柱子折叠来隐藏数据为0时占得位置
//stack: "AA", 为同一属性,折叠在一块
[
{
name: '偏其他型',
data: xData1,
type: 'bar',
barWidth: 10,
stack: "AA",
lineStyle: {
color: '#00bced'
},
itemStyle: {
color: '#00bced'
},
},
{
name: '偏综合型',
data: xData2,
stack: "AA",
type: 'bar',
barWidth: 10,
lineStyle: {
color: '#ffd458'
},
itemStyle: {
color: '#ffd458'
},
},
{
name: '粗颗粒物型',
data: xData3,
stack: "AA",
type: 'bar',
barWidth: 10,
lineStyle: {
color: '#ffa10d'
},
itemStyle: {
color: '#ffa10d'
},
},
{
name: '偏二次型',
data: xData4,
stack: "AA",
type: 'bar',
barWidth: 10,
lineStyle: {
color: '#78c05f'
},
itemStyle: {
color: '#78c05f'
},
},
{
name: '偏机动车型',
data: xData5,
stack: "AA",
type: 'bar',
barWidth: 10,
lineStyle: {
color: '#41a01f'
},
itemStyle: {
color: '#41a01f'
},
},
{
name: '偏燃煤型',
data: xData6,
stack: "AA",
type: 'bar',
barWidth: 10,
lineStyle: {
color: '#ff7171'
},
itemStyle: {
color: '#ff7171'
},
},
{
name: '折线',
type: 'line',
smooth: false, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
//折线拐点标志的样式
color: '#99acff'
},
lineStyle: {
color: '#99acff'
},
data: ['12', '23', '13', '45', '14']
},
]
}
myChartQueryChart.setOption(this.optionQueryChart, true)
myChartQueryChart.resize({
height: '400px',
// width: '1500px'
})
// }
},
