使用Echarts,与后台接口对接,图表中所展示的值为后端传来的实时值。
1.tempalte中的样式
//调用该方法,该方法名与setChart.js中的方法名对应,setChart.js的参数为形参,此处为实参
initserverChart(
"访问量", //鼠标悬停在某一柱状上显示 访问量:数值
this.serviceData.xAxisData, //实参,横坐标的数据
this.serviceData.seriesData //实参,表中数据
);
});
},
引入queryAllServiceAndCount
import queryAllServiceAndCount from “…/…/api/flowstatisticsApi”;
data中:
serviceData: {
totalData: 0,
xAxisData: [],
seriesData: []
}
4.监听中调用该方法
mounted() {
this.initSevericeChart();
},
5.setChart.js文件中
//服务概况柱状图
function initserverChart(name, xAxis, series) {
if (!document.getElementById(“serverChart”)) return;
//服务概况访问总量柱状图数据
let serverChartOption = {
//柱状图数据
tooltip: {
trigger: “axis”,
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: “” // 默认为直线,可选为:‘line’ | ‘shadow’
}
},
xAxis: {
type: “category”,
data: xAxis,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: “#dcdcdc”
}
},
axisLabel: {
interval: 0,
color: “#606266”
}
},
grid: {
top: "100px",
right: "10px"
},
yAxis: { axisLine: { show: false }, axisTick: { show: false } },
series: [{
type: "bar",
name: name,
data: series,
barWidth: "20%"
}],
itemStyle: {
color: "#24A5F8"
}
};
let serverChart = echarts.init(document.getElementById("serverChart"));
serverChart.setOption(serverChartOption);
}
export initserverChart;
6.最终传值成功,实现效果