html：
@Ref("chartRef") chartRef!: any; private chartDom = null; private myChart: any = null; //初始化 private option = null;
this.myChart = echarts.init(this.chartRef); this.myChart.setOption(this.options); this.myChart.resize();
**处理数据**
private nameData: any = []; //名称数组
private numData: any = []; //数量总数组 private numDataList: any = []; //数量数组 private keyNumListData: any = []; //悬浮部门数组
//获取图表数据 从接口处理数据。 private getData() { this.myChart = echarts.init(this.chartRef); this.nameData.splice(0); //名称数组 this.numData.splice(0); //入库量 this.numDataList.splice(0); //入库量 this.keyNumListData.splice(0); //部门 this.loading = true; getStaticColumnard({ ...this.formData, }).then((res: any) => { if (res.data) { for (let index = 0; index < res.data.length; index++) { const element = res.data[index]; if (element.keyNumList == null) { element.keyNumList = []; } } const { name, num, keyNumList } = res.data.reduce( (pre: any, cur: any) => { for (const i in pre) { pre[i].push(cur[i] || 0); } return pre; }, { name: [], num: [], keyNumList: [], } ); name.forEach((itemA: any) => { this.nameData.push(itemA); }); num.forEach((itemB: any) => { this.numDataList.push(itemB); }); keyNumList.forEach((itemC: any) => { this.keyNumListData.push(itemC); }); console.log(this.keyNumListData, "悬浮部门"); // this.chemicalLedgerItemListData = this.keyNumListData; this.numDataList.forEach((e: any, i: any) => { const totalData = []; this.keyNumListData[i].forEach((el: any) => { totalData.push({ name: el.name, sum: el.num, }); }); this.numData.push({ value: e, totalData: totalData, }); }); } this.myChart.setOption(this.options); this.myChart.resize(); this.loading = false; }); }
** //渲染数据**
private options: any = {
legend: {
data: ["数量"],
},
dataset: {
// 提供一份数据集
source: [this.numData],
},
tooltip: {
show: "true",
trigger: "axis",
backgroundColor: "#FFFFFF",
padding: [12, 16],
textStyle: {
color: "#3F5ACC",
},
borderColor: "#1ABDA2",
borderWidth: 1,
formatter: function (params) {
console.log(params, "你是啥");
const oTotalData = params[0].data.totalData;
var result = "";
console.log(oTotalData, "处理玩的数据");
for (var i = 0, l = oTotalData.length; i < l; i++) {
result += ${ "<span style='color:#333333'>" + oTotalData[i].name + "</span>" + "：" + "<span style='color:#3F5ACC;margin-left:5px'>" + "数量(" + oTotalData[i].sum + ")" + "</span>" + "<br/>" };
}
return result;
},
},
xAxis: {
type: "category",
boundaryGap: true,
axisTick: { show: false },
data: this.nameData,
// name: "类",
},
yAxis: {
// name: "数值",
type: "value",
axisLabel: { show: true },
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
axisTick: { show: false },
axisLine: { show: true },
},
series: [
{
name: "数量",
type: "bar",
barWidth: 30,
data: this.numData,
smooth: true,
showSymbol: false,
emphasis: {
focus: "series",
},
},
],
};
