Echarts中的柱状图--与后台接口对接

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

1.tempalte中的样式

<div class="content-bottom-right">
            <LittleTitle name="服务概况" />
            <div class="server-left">
              <div class="server-left-box">
                <div class="server-box-title">访问总量</div>
                <div class="box-style">
                  <div class="box-style-one"></div>
                  <div class="box-style-two"></div>
                </div>
                //此处的访问总量数据为后台传来的
                <div class="server-box-data">{{ serviceData.totalData }}</div>
              </div>
            </div>
            //Echarts图表
            <div class="server-chart" id="serverChart"></div>
  </div>

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.最终传值成功，实现效果