Echarts中的柱状图--前后台接口联调
2023-09-14 09:13:38 时间
使用Echarts,与后台接口对接,图表中所展示的值为后端传来的实时值。
1.tempalte中的样式
访问总量
{{ serviceData.totalData }}
//调用该方法,该方法名与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.最终传值成功,实现效果
相关文章
- echarts画中国地图及省份切换
- 41·灵魂前端工程师养成-数据可视化echarts
- React魔法堂:echarts-for-react源码略读
- vue + echarts 省份地图 以及打包后地图加载不出来(比较详细)「建议收藏」
- cesium加载离线地图_echarts离线地图
- echart旭日图数据转换_echarts横坐标时间轴
- echarts 旭日图_sunburst图表
- echarts 旭日图_ECHARTS
- vue axios轮询更新echarts 页面崩溃问题
- 在vue3 中使用echarts
- Echarts漏斗图形的,怎么保障当数据是0的时候,漏斗图形一直存在。
- echarts饼图鼠标移入时,悬停部分不放大突出 属性 ?
- Vue使用ECharts做图表
- Vue+Echarts实现中国疫情地图
- Echarts中dataZoom添加滚动条
- ECharts多图表与后台交互
- ECharts使用dataset管理数据
- 百度开源项目 ECharts 首进 Apache 孵化器