Echarts中的柱状图--前后台接口联调

使用Echarts，与后台接口对接，图表中所展示的值为后端传来的实时值。

1.tempalte中的样式

访问总量

//此处的访问总量数据为后台传来的

{{ serviceData.totalData }}

//Echarts图表

**2.接口（api下的js文件中）** //平台概述--服务概况 export function queryAllServiceAndCount() { return fetch.get(`${flowUrl}/queryAllServiceAndCount`) } **3.方法（vue文件中）** //服务概况图表初始化 initSevericeChart() { //调用接口，queryAllServiceAndCount在本文件中先使用import引入 queryAllServiceAndCount().then(res => { //serviceData在data中已经声明 this.serviceData.totalData = 0; this.serviceData.xAxisData = []; this.serviceData.seriesData = []; res.forEach(item => { this.serviceData.totalData += item.visitNumb; this.serviceData.xAxisData.push(item.serviceName); this.serviceData.seriesData.push(item.visitNumb); });

    //调用该方法，该方法名与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.最终传值成功，实现效果