echarts 使用方法
程序员文章站
2024-02-12 17:33:22
...
1: 为echarts 准备一个div 盒子
<!--为echarts准备一个具备大小的容器dom-->
<div id="divBar"
ref="divBar"
style="width: 100%;
height: 600px;
margin-top: 0.3rem"
>
</div>
2: 导出 echarts报表: import echarts from "echarts";
// 初始化echarts 表格
this.dataBar.charts = echarts.init(document.getElementById(获取DOM 元素));
3:
this.$refs.divBar.style.display = "block";
this.columns = [{ title: "周期", key: "period" }];
this.tableData = [];
if (this.dataBar.charts) {
//清空绘画内容,清空后实例可用,因为并非释放示例的资源,释放资源我们需要dispose()
this.dataBar.charts.clear();
}
api
.getList(this.searchModel, { url: `/api/Report/xxxxxxx` })
.then((res) => {
if (res && res.curperiod && res.curperiod.length) {
let legendData = [],
xCategory = [],
seriesData = [];
let selected = {};
if (this.searchModel.top == "week") {
legendData.push("本周");
legendData.push("上周");
} else {
legendData.push("本月");
legendData.push("上月");
}
let curSeriesDataTmp = [];
this.tableData.push({ period: legendData[0] });
if (res.curperiod && res.curperiod.length) {
res.curperiod.forEach((item, index) => {
xCategory.push(item.quanlitycode);
let columnsCell = {
title: item.quanlitycode,
key: item.quanlitycode,
};
this.columns.push(columnsCell);
//selected[item.alarmclassname] = true;
curSeriesDataTmp.push(item.dotnocount);
//组织列表数据
this.tableData[0][item.quanlitycode] = item.dotnocount;
let dss = this.tableData;
});
}
seriesData.push({
name:
res.curperiod && res.curperiod.length
? legendData[0] + "(" + res.curperiod[0].description + ")"
: "",
type: "bar",
data: curSeriesDataTmp,
});
let preSeriesDataTmp = [];
this.tableData.push({ period: legendData[1] });
if (res.preperiod && res.preperiod.length) {
res.preperiod.forEach((item, index) => {
//selected[item.alarmclassname] = true;
preSeriesDataTmp.push(item.dotnocount);
//组织列表数据
this.tableData[1][item.quanlitycode] = item.dotnocount;
});
}
seriesData.push({
name:
res.preperiod && res.preperiod.length
? legendData[1] + "(" + res.preperiod[0].description + ")"
: "",
type: "bar",
data: preSeriesDataTmp,
});
this.dataBar.xCategory = xCategory;
this.dataBar.legendData = legendData;
this.dataBar.seriesData = seriesData;
this.dataBar.selected = selected;
this.dataBar.id = "divBar";
this.drawChart(this.dataBar);
} else {
if (this.dataBar.charts) {
//清空绘画内容,清空后实例可用,因为并非释放示例的资源,释放资源我们需要dispose()
this.dataBar.charts.clear();
}
}
})
.catch((errData) => {
this.$Modal.error({
title: "错误",
content: errData.message,
});
if (this.dataBar.charts) {
//清空绘画内容,清空后实例可用,因为并非释放示例的资源,释放资源我们需要dispose()
this.dataBar.charts.clear();
}
});
},
4: 配置echarts 表格数据:
drawChart(data) {
this.dataBar.charts = echarts.init(document.getElementById(data.id));
this.dataBar.charts.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
title: {
left: "center",
text: "周/月度环比",
},
legend: { right: 60, data: data.legendData },
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [{ name: "质量原因", type: "category", data: data.xCategory }],
yAxis: [{ name: "值", type: "value" }],
series: data.seriesData,
});
},
上一篇: CSS改变鼠标样式(图片)
下一篇: 华为路由器配置简单NAT实例