【前端】静态数据和后台数据/echarts

样式

• 菜鸟教程
• 官网

静态数据

柱状图

• html代码

<div class="echart" id="mychart" :style="myChartStyle"></div> // 创建该Echart的容器

• 初始化data数据

	  xData: ["计算机学院", "英语学院", "会计学院"], //横坐标
      yData: [53, 44, 68], //数据
      myChartStyle: { float: "left", width: "100%", height: "550px" }, //图表样式

• 初始化调用方法

  mounted() {
    this.initEcharts(); // 初始化图表
  },

• methods

    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData, // x轴数据
        },
        yAxis: {}, // 设置y轴的样式（没有数据）
        // 设置dataZoom当数据过多的时候滚轮使用
        dataZoom: [
          {
            show: true,
            realtime: true,
            height: 20, //这里可以设置dataZoom的尺寸
            bottom: 8, //滚动体距离底部的距离
            start: 0, //初始化时，滑动条宽度开始标度
            end: 20, //初始化时，滑动条宽度结束标度
          },
          {
            type: "inside", //内置滑动，随鼠标滚轮展示
            realtime: true,
            start: 0,
            end: 20,
          },
        ],
        series: [
          {
            type: "bar", //形状为柱状图
            barWidth: 25,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 13,
                  },
                },
              },
            },
            data: this.yData,
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

圆饼图

• html代码

 <div id="main" style="width: 100%; height: 570px"></div> // 创建容器

• 初始化data数据

	  charts: "",
      opinion: [
        "大赛",
        "挑战杯",
        "大赛",
        "竞赛",
        "竞赛",
      ],
      opinionData: [
        //渲染比赛人数数量
        { value: 123, name: "大赛" },
        { value: 34, name: "挑战杯" },
        { value: 184, name: "大赛" },
        { value: 74, name: "竞赛" },
        { value: 49, name: "竞赛" },
      ],

• 初始化调用方法

  mounted() {
    this.drawPie("main");
  },

• methods

    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: this.opinion,
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"], // 内圈半径和外圈半径
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "blod",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.opinionData,
          },
        ],
      });
    },

动态数据

柱状图

因为后台数据需要第一时间获取 而 图表也需要第一时间获取
所以如果不在获取后台数据时动态绑定 图表的值将为空从而显示空白
也可以直接在异步请求中进行数据操作而不先去初始化图表【如省份数据和柱状图】

• html代码

<div class="echart" id="mychart" :style="myChartStyle"></div>

• 初始化data数据

      xData: [], //横坐标
      yData: [], //数据
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
      chart: null,

• 初始化调用方法

  created() {
    this.getHostRoom(); // 获取后台数据
  },
  mounted() {
    this.$nextTick(() => {
      this.initEcharts();
    });
  },

• methods【异步获取后台数据】

getHostRoom() {
      hostRoom().then((res) => {
        console.log(res);
        this.room = res.data.data; // 获取后台数据
        // 以下操作都要在异步请求中进行
        for (var i = 0; i < this.room.length; i++) {
          this.xData.push(this.room[i].name); // x轴赋值
          this.yData.push(this.room[i].checkedNum); // y轴赋值
        }
        this.chart.setOption({ //动态式将后台数据赋予图表中
          xAxis: {
            data: this.xData,
          },
          series: [
            {
              data: this.yData,
            },
          ],
        });
      });
    },

    initEcharts() {
      this.chart = echarts.init(document.getElementById("mychart")); // 获取图表ID
      // 基本柱状图
      this.chart.setOption({
        title: { // 标题
          text: "热门自习室", // 主标题
          subtext: "根据预约人数进行排序", // 副标题
          x: "center",
          align: "right",
        },
        tooltip: {
          trigger: "item", // tooltip下面的trigger类型要为item
        },
        xAxis: {
          data: this.xData, // x轴值
          axisLabel: {
            show: true,
            interval: 0, //使x轴上的文字显示完全,
            //当x元素超出宽度会有一些元素不显示
            //这里操作让每个元素能个完全显示
            formatter: function (params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 5;
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
          },
        },
        yAxis: {
          minInterval: 1, // 使y轴显示都是整数
        },
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData, //y轴值
            trigger: "axis",
            formatter: this.yData,
            axisPointer: {
              type: "shadow",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
        ],
        // hover时改变状态
        emphasis: {
          itemStyle: {
            color: "#008080", // 改变颜色
          },
        },
      });
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    },

省份地图和多数据柱状图

【前端】基于后端数据的echart中国地图和柱状图