getChemicalChart(arrData){
console.log(arrData,'echarts中接受的数据');
// arrData = [
// {name: '西来峰分公司', code: '110003007005', JT: 125, YP: 0, JXT: 0},
// {name: '西来峰分公司', code: '110003007002', JT: 0, YP: '169.77', JXT: 0},
// {name: '蒙西公司', code: '110003009003', JT: '131.34', YP: 0, JXT: 0},
// {name: '包头化工', code: '110085008', JT: 0, YP: 0, JXT: '4882.32'}
// ]
if(arrData!=undefined && arrData.length!=0){
var hg = [[], [], [], [], [], []];
let data = {
xData: [],
yData: []
}
for(var i=0; i<arrData.length; i++){
let item = arrData[i]
if(item.JT) hg[0].push({name:item.name, value:item.JT})
if(item.YP) hg[1].push({name:item.name, value:item.YP})
if(item.JXT) hg[2].push({name:item.name, value:item.JXT})
if(item.JC) hg[3].push({name:item.name, value:item.JC})
if(item.JQ) hg[4].push({name:item.name, value:item.JQ})
if(item.HXT) hg[5].push({name:item.name, value:item.HXT})
}
for(var k=0;k<hg.length; k++){
var array = hg[k]
for(var j=0; j<array.length; j++){
var obj = array[j];
data.xData.push(obj.name);
data.yData.push(obj.value);
}
}
var totalLength = hg[0].length + hg[1].length + hg[2].length + hg[3].length + hg[4].length + hg[5].length;
console.log(totalLength,'总数量');
console.log(hg,'不同类型的数据值');
var jt = [],
yp = [],
jxt = [],
jc = [];
for (let i = 0; i < hg[0].length; i++) {
jt.push('115');
}
for (let i = 0; i < hg[0].length; i++) {
yp.push(null);
}
for (let i = 0; i < hg[0].length + hg[1].length; i++) {
jxt.push(null);
}
for (let i = 0; i < hg[0].length + hg[1].length + hg[2].length; i++) {
jc.push(null);
}
for (let i = 0; i < hg[1].length; i++) {
yp.push('1900');
}
for (let i = 0; i < hg[2].length; i++) {
jxt.push('3700');
}
for (let i = 0; i < hg[3].length; i++) {
jc.push('1700');
}
console.log(jt,yp,jxt,jc,'jjjjj');
/**
双X轴标签对应，伪实现思路：
底部的标签也是柱状图，对应包含的区域为上方X轴条数占总数的比例，设为宽度即可
*/
const echartsNew = this.$echarts
let instancec = this.$echarts.init(this.$refs.chemicalEchart)
let option={
tooltip:{
trigger:'axios',
axisPointer:{
type:'shadow'
},
formatter:function(params){
var arr = params;
if (params.length > 2) {
arr = params.slice(0, 2);
}
var str = "<div style='lineHeight:22px;height:24px;'><div style='display:inline-block;width:10px;height:10px;margin-right:6px;background:" + arr[0].color.colorStops[0].color + ";border-radius:50%;margin-bottom:2px;'></div>" + arr[0].name + "：" + arr[0].value + "</div>";
if (arr.length > 1) {
str += "<div style='lineHeight:22px;height:24px;'><div style='display:inline-block;width:10px;height:10px;margin-right:6px;background:" + arr[1].color + ";border-radius:50%;margin-bottom:2px;'></div>" + arr[1].seriesName + "：" + arr[1].value + "</div>";
}
return str;
}
},
grid:[
{
top: 28,
left: 38,
right: 0,
bottom: 90
},
{
height: 75,
bottom: 15,
left: 30,
right: 0
}
],
xAxis:[
{
type:"category",
data:data.xData,
gridIndex: 0, //x 轴所在的 grid 的索引
axisLabel: {
padding: [40, 0, 0, 0],
rotate: 20,
interval: 0, //刻度标签的显示间隔，用于类目轴中
formatter: function (value) {
return value.split("-").join("\n")
},
color: '#C4A87D',
fontSize: 28,
align: 'center',
},
axisLine: {
lineStyle: {
color: '#686868'
}
},
axisTick: {
lineStyle: {
color: '#686868'
}
},
zlevel: 2
},
{
type: 'category',
gridIndex: 1,
axisLine: {
show: false
},
zlevel: 1
}
],
yAxis:[
{
type: 'value',
gridIndex: 0,
axisLabel: {
color: '#d8bb93'
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#686868'
}
},
axisLine: {
lineStyle: {
color: '#686868'
}
},
axisTick: {
lineStyle: {
color: '#686868'
}
}
},{
type: 'value',
gridIndex: 1,
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}
],
series:[
{
data: data.yData,
type: 'bar',
barWidth: 48,
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize:24
}
},
itemStyle:{
normal:{
color:function(params){
let colors = ['#1F4757', '#945D31', '#516254', '#29466E', '#245447', '#895547'];
if(params.dataIndex <= hg[0].length - 1){
return new echartsNew.graphic.LinearGradient(0, 0, 0, 1, [{
offset:0,
color:colors[0] // 0% 处的颜色
},{
offset: 1,
color: '#252525' // 100% 处的颜色
}], false)
}
else if(hg[0].length - 1 < params.dataIndex && params.dataIndex <= hg[0].length + hg[1].length - 1){
return new echartsNew.graphic.LinearGradient(0, 0, 0, 1, [{
offset:0,
color:colors[1] //0% 处的颜色
},{
offset: 1,
color: '#252525' // 100% 处的颜色
}], false)
}
else if (hg[0].length + hg[1].length - 1 < params.dataIndex && params.dataIndex <= hg[0].length + hg[1].length + hg[2].length - 1) {
return new echartsNew.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colors[2] // 0% 处的颜色
}, {
offset: 1,
color: '#252525' // 100% 处的颜色
}], false)
}
else if (hg[0].length + hg[1].length + hg[2].length - 1 < params.dataIndex && params.dataIndex <= totalLength - hg[5].length - hg[4].length - 1) {
return new echartsNew.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colors[3] // 0% 处的颜色
}, {
offset: 1,
color: '#252525' // 100% 处的颜色
}], false)
}
else if (totalLength - hg[5].length - hg[4].length - 1 < params.dataIndex && params.dataIndex <= totalLength - hg[5].length - 1) {
return new echartsNew.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colors[4] // 0% 处的颜色
}, {
offset: 1,
color: '#252525' // 100% 处的颜色
}], false)
}
else if (totalLength - hg[5].length - 1 < params.dataIndex && params.dataIndex <= totalLength - 1) {
return new echartsNew.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colors[5] // 0% 处的颜色
}, {
offset: 1,
color: '#252525' // 100% 处的颜色
}], false)
}
}
}
},
xAxisIndex: 0, //用于多个x轴
yAxisIndex: 0 //用于多个y轴
},{
type: 'bar',
data: [{
name: '焦炭',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 30],
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 26
}
},
barGap: 0, //柱间距
barWidth: (totalLength ? (hg[0].length / totalLength) * 100 : 16.6667) + '%',
itemStyle: {
normal: {
color: '#173643'
}
},
xAxisIndex: 1, //用于多个x轴
yAxisIndex: 1 //用于多个y轴
//下面是结束对象标签
},{
type: 'bar',
data: [{
name: '油品',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 30],
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 26
}
},
barGap: 0, //柱间距
barWidth: (totalLength ? (hg[1].length / totalLength) * 100 : 16.6667) + '%',
itemStyle: {
normal: {
color: '#945D31'
}
},
xAxisIndex: 1, //用于多个x轴
yAxisIndex: 1 //用于多个y轴
//下面是结束对象标签
},{
type: 'bar',
data: [{
name: '聚烯烃',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 30],
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 26
}
},
barGap: 0, //柱间距
barWidth: (totalLength ? (hg[2].length / totalLength) * 100 : 16.6667) + '%',
itemStyle: {
normal: {
color: '#516254'
}
},
xAxisIndex: 1, //用于多个x轴
yAxisIndex: 1 //用于多个y轴
//下面是结束对象标签
},{
type: 'bar',
data: [{
name: '甲醇',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 30],
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 26
}
},
barGap: 0, //柱间距
barWidth: (totalLength ? (hg[3].length / totalLength) * 100 : 16.6667) + '%',
itemStyle: {
normal: {
color: '#293F5D'
}
},
xAxisIndex: 1, //用于多个x轴
yAxisIndex: 1 //用于多个y轴
//下面是结束对象标签
},{
type: 'bar',
data: [{
name: '甲醛',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 30],
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 26
}
},
barGap: 0, //柱间距
barWidth: (totalLength ? (hg[4].length / totalLength) * 100 : 16.6667) + '%',
itemStyle: {
normal: {
color: '#245447'
}
},
xAxisIndex: 1, //用于多个x轴
yAxisIndex: 1 //用于多个y轴
//下面是结束对象标签
},{
type: 'bar',
data: [{
name: '活性炭',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 30],
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 26
}
},
barGap: 0, //柱间距
barWidth: (totalLength ? (hg[5].length / totalLength) * 100 : 16.6667) + '%',
itemStyle: {
normal: {
color: '#895547'
}
},
xAxisIndex: 1, //用于多个x轴
yAxisIndex: 1 //用于多个y轴
//下面是结束对象标签
},{
type:'line',
name:'先进值',
data:jt,
symbol: hg[0].length == 1 ? "pin" : "none", //标记类型
itemStyle: {
normal: {
color: 'yellow'
}
},
},{
type: 'line',
name: '先进值(煤直接液化)',
data: yp,
symbol: hg[1].length == 1 ? "pin" : "none",
itemStyle: {
normal: {
color: 'red'
}
},
},{
type: 'line',
name: '先进值(乙烯和丙烯)',
data: jxt,
symbol: hg[2].length == 1 ? "pin" : "none",
itemStyle: {
normal: {
color: 'blue'
}
},
},{
type: 'line',
name: '先进值(烟煤)',
data: jc,
symbol: hg[3].length == 1 ? "pin" : "none",
itemStyle: {
normal: {
color: 'pink'
}
},
}
]
}
instancec.setOption(option)
}
}