Echarts柱状图下方带表格
<div style="width: 100%;height: 100%" id="ruleCharts"></div>
import {problemOrderDetail} from "@/views/overallSituation/api/index"
import {houseFormat,} from "@/mixins";
data(){
return{
allNumber:"",//问题总计
checkedNumber:"",//已整改
checkingNumber:"",//整改中
orgNameList:[],//单位
orgNoList:[],
problemCheckedNumberList:[],//已整改
problemCheckProList:[],//已整改占比
problemCheckProList2:[],//已整改占比
problemNumberList:[],//问题总计
problemCheckingNumberList:[],//整改中
nameList:[],
}
},
async getEcharts(){
let axisData={}
await problemOrderDetail(
{
// beginTime: "2020-09-23",
// endTime: "2023-09-23",
// orgNo: "33101",
beginTime:this.oneParams.startTime,
endTime:this.oneParams.endTime,
orgNo:this.oneParams.org
}
).then(res => {
// (res, "res")
this.allNumber=res.data.allNumber
this.checkedNumber=res.data.checkedNumber
this.checkingNumber=res.data.checkingNumber
this.nameList = res.data.list;
this.orgNameList=[]
this.orgNoList=[]
this.problemCheckedNumberList=[]
this.problemCheckProList=[]
this.problemCheckProList2=[]
this.problemNumberList=[]
this.problemCheckingNumberList=[]
res.data.list.forEach(item=>{
this.orgNameList.push(item.orgName)
this.orgNoList.push(item.orgNo)
this.problemCheckedNumberList.push(item.problemCheckedNumber)
this.problemCheckProList.push(item.problemCheckPro)
this.problemCheckProList2.push(Number(item.problemCheckPro.replace(/%/g,'')))
this.problemNumberList.push(item.problemNumber)
this.problemCheckingNumberList.push(item.problemCheckingNumber)
})
if(res.data.list){
axisData= houseFormat(this.problemNumberList,this.problemCheckProList2)
}
// (this.problemCheckProList2,66)
})
let myChart = this.$echarts.init(document.getElementById("ruleCharts"))
let option = {
darkMode: true,
grid: {
x: 150,
// y:45,
x2: 50,
y2: 210
// borderWidth:1
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
crossStyle: {
color: "#999"
}
}
},
// toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ["line", "bar"] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
legend: {
align: "left",
itemGap: 30,
orient: "vertical",
textStyle: { color: "#000" },
bottom: 10,
left: 0,
// data: [ "问题总计", "已整改","整改中", "已整改占比",],
data:[{name:'问题总计',icon:'none'},{name:'已整改',icon:'stack'},{name:'整改中',icon:'stack'},{name:'已整改占比',icon:'stack'}],
selected:{ //默认不显示
'问题总计':false,
// "已整改占比":false
},
// show: false,
// icon:"none"
// selectedMode:false,//取消图标点击事件
},
xAxis: [
{
type: "category",
triggerEvent:true,
axisLabel: {
interval:0,
rotate:15,
show: true,
textStyle: {
fontSize: "14px"
}
},
data:this.orgNameList,
axisPointer: {
type: "shadow"
},
axisLine:{
onZero:false,
},
},
{
position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
offset: 45, // 向下偏移，使分组文字显示位置不与原x轴重叠
// axisLine: {
// show: false // 隐藏分组x轴的轴线
// },
axisTick: {
length: -200, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
// interval: function(index, value) {
// return index === 0 || index === 2 || index === 5; // 在0、5、6处各画一条刻度线
// }
// interval: 1,
},
// min: -30,
// max: 11,
interval: 1,
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: [""]
},
{
position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
offset: 36, // 向下偏移，使分组文字显示位置不与原x轴重叠
// max: 12,
// interval: (12) / 12,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
}
},
{
position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
offset: 75, // 向下偏移，使分组文字显示位置不与原x轴重叠
// max: 12,
interval: 1,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: this.problemNumberList//问题总计
},
{
position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
offset: 120, // 向下偏移，使分组文字显示位置不与原x轴重叠
// max: 12,
// interval: (12) / 12,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: this.problemCheckedNumberList//已整改
},
{
position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
offset: 160, // 向下偏移，使分组文字显示位置不与原x轴重叠
// max: 12,
interval: 1,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: this.problemCheckingNumberList//整改中
},
{
position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
offset: 200, // 向下偏移，使分组文字显示位置不与原x轴重叠
// max: 12,
interval: 1,
axisTick: {
length: 0, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0 // 强制显示全部刻度名
},
data: this.problemCheckProList//已整改占比
}
],
yAxis: [
{
type: "value",
min: axisData.ymin,
max: axisData.ymax,
interval:axisData.yinterval,
axisLabel: {
formatter: "{value}",
textStyle: {
// color: "#f4f4f4",
fontSize: "14px"
}
}
},
{
type: 'value',
name: '',
min: axisData.xmin,
max: axisData.xmax,
interval:axisData.xinterval,
axisLabel: {
formatter: '{value} %'
}
},
],
// yAxis: [
// {
// type: "value",
// // name: "数量：吨",
// // min: 0,
// // max: (115),
// // interval: (115) / 5,
// minInterval:1,//设置成1 ，保证纵轴显示为整数
// axisLabel: {
// formatter: "{value}",
// textStyle: {
// // color: "#f4f4f4",
// fontSize: "14px"
// }
// }
// },
// {
// type: "value",
// show:false,
// // name: "价格：元/吨",
// // min: 0,
// // max: (22500),
// // splitNumber: 6,
// // interval: (22500) / 5,
// axisLabel: {
// formatter: "{value}"
// }
// }
// ],
series: [
{
name: "整改中",
type: "bar",
unit: "吨",
stack: 'sum',
// groupName: "整改中/已整改占比",
data: this.problemCheckingNumberList,
itemStyle: {
color:"#36a2f9"
},
},
{
name: '已整改占比',
type: 'line',
data: this.problemCheckProList2,
yAxisIndex: 1,
color:"#3aa1ff",
},
// {
// name: "已整改占比",
// type: "line",
// unit: "吨",
// // groupName: "整改中/已整改占比",
// data: this.problemCheckProList2,
// itemStyle: {
// color: "#3aa1ff",
// // width:10,//线宽为0,就不会显示了
// },
// axisLine:{
// lineStyle:{
// width:10,
// color: "#3aa1ff",
// }
// },
// showSymbol:true,
// // symbolSize:0,
// },
{
name: "问题总计",
type: "line",
// yAxisIndex: 1,
unit: "元/吨",
data: this.problemNumberList,
lineStyle: {
color: "rgb(0, 0, 0)",
width:0,//线宽为0,就不会显示了
},
showSymbol:false,
symbolSize:0,
},
{
name: "已整改",
type: "bar",
// yAxisIndex: 1,
stack: 'sum',
unit: "元/吨",
data: this.problemCheckedNumberList,
itemStyle: {
color: "#00ffff"
},
lineStyle: {
width: 5,
type: [10, 10],
dashOffset: 5
}
}
]
};
myChart.setOption(option)
myChart.on('click',(params)=>{
// (params)
let clickOrgNo = '';
let clickOrgName=''
if ((params.componentType=='xAxis')){
this.nameList.forEach(i=>{
if(params.value == i.orgName){
clickOrgNo = i.orgNo;
clickOrgName=i.orgName
}
})
// (clickOrgNo,clickOrgName)
let aa={clickOrgNo,clickOrgName}
let newParams=Object.assign(this.oneParams,aa)
newParams.bb = "1"
// (newParams)
// ('getnewParams',(newParams));
this.$router.push({
path:"/genmgt/selfinspectcompresuper/rectificationDetails",
query: newParams
})
// ('http://localhost:9090/genmgt/selfinspectcompresuper/rectificationDetails')
}
})
window.addEventListener('resize',()=>{
myChart.resize()
})
}