html
<el-card
class="box-card"
style="height:700px;margin:10px 0 10px 10px"
v-loading="loadingIndex == 1"
>
<div slot="header">
<span>产出统计</span>
<span style="float:right;margin-top:-8px">
<el-select v-model="listQuery.lineId" clearable @change="getList" placeholder="请选择产线">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-select v-model="listQuery.shiftType" @change="getList" placeholder="请选择班次">
<el-option
v-for="item in banciOptions"
:key="item.key"
:label="item.display_banciOption"
:value="item.display_banciOption"
></el-option>
</el-select>
<el-date-picker v-model="listQuery.dateNum" value-format="yyyyMMdd" type="date" @change="getList" placeholder="选择日期"></el-date-picker>
</span>
</div>
<div id="chart1" style="height:620px"></div>
</el-card>
getXYData(type) {
if (type == "xData") {
let xData = [];
this.modelList.map(item => {
for (let v in item) {
// console.log(v, "v");
if (v == "pName") {
xData.push(item[v]);
}
}
});
return xData;
console.log(xData, "x轴");
} else if (type == "yData") {
let yData = [];
console.log(this.modelList, "--this.modelList");
this.modelList.map(item => {
for (let v in item) {
// console.log(v, "w");
if (v == "pValue") {
yData.push(item[v]);
}
}
});
return yData;
}
},
getCharts() {
var myChart1 = echarts.init(document.getElementById("chart1"));
myChart1.setOption({
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
},
// formatter: "{a} <br/>{b}: {c} 个"
},
legend: {
date: this.getXYData("xData"),
show: true
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "category",
data: this.getXYData("xData"),
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "",
type: "bar",
barWidth: "60%",
data: this.getXYData("yData"),
animationDelay: function(idx) {
return idx * 10;
}
}
],
animationEasing: "elasticOut",
animationDelayUpdate: function(idx) {
return idx * 5;
}
});
}
效果图: