• echarts Y轴设置刻度间隔 和 饼图 数据为空问题


      yAxis: {
              type: "value",
              max: 30,
              min:0,
              minInterval: 5,
              interval: 5//刻度增加几个
            },

    基本配置

    html

      <div id="classAll" :style="{  '500px', height: '300px' }"></div>
    View Code

    和数据配置

     classAll: {
            title: {
              // text: "班级总数",
              // subtext: '纯属虚构',
              show: null,
              text: "暂无数据",
              left: "center",
              top:"80",
              textStyle: {
                fontSize: 25,
                fontWeight: 400,
              },
            },
            tooltip: {
              trigger: "item",
              formatter: "", //这是关键,在需要的地方加上就行了
              // formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            legend: {
              orient: "vertical",
              top: "top",
              bottom: 10,
              right: 20,
              data: null,//数据为空时 侧边栏 文字也不现实  
            },
            series: [
              {
                name: "班级总数",
                type: "pie",
                radius: "80%",
                center: ["30%", "50%"], //显示位置
                label: {
                  //饼图图形上的文本标签
                  normal: {
                    show: true,
                    position: "inner", //标签的位置
                    textStyle: {
                      fontWeight: 300,
                      fontSize: 16, //文字的字体大小
                    },
                    formatter: function (e) {
                      let data = e.data;
                      if (data.value == 0) {
                        // data.labelLine.show = false;
                        // data.label.show = false;
                        return "";
                      } else {
                        // return `${data.value}
    ${e.percent}%`;
                        return `${e.percent}%`;
                      }
                    },
                  },
                },
                data: [],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
              // percent: number,
            ],
          },
    View Code

    画图封装方法

    drawLine(dom) {
          let domId = document.getElementById(dom);
          // 基于准备好的dom,初始化echarts实例
          let myChart = this.$echarts.init(domId);
          // 绘制图表
          myChart.setOption(this[dom]);
        },
    View Code

    请求后台拿数据渲染 数据为空显示暂时无数据

     getSchoolAllData(this.region, this.groupType).then((res) => {
            console.log(res);
            this.schoolSum = res.data.data.schoolSum;
            this.studentSum = res.data.data.studentSum;
            this.teacherSum = res.data.data.teacherSum;
            this.teamSum = res.data.data.teamSum;
            let province = res.data.data.province;
            let city = res.data.data.city;
            let region = res.data.data.region;
    
            if (region != undefined && region != "" && region != null) {
              this.selectedOptions = [];
              this.selectedOptions.push(province);
              this.selectedOptions.push(city);
              this.selectedOptions.push(region);
              this.region = region;
    
              this.disabled = true;
            }
    
            let list = res.data.data.list;
            this.tableData = list;
    
            let data = [];
            list.forEach(function (ele) {
              let value = { value: ele.teamNumber, name: ele.name };
              data.push(value);
            });
    
            let showed = data.length ? false : true;
            this.classAll.title.show = showed;
            this.classAll.series[0].data = data;
            this.classAll.legend.data = data.length ? null : "false";
            this.drawLine("classAll");
    }
    View Code
  • 相关阅读:
    单词篇:(单词应用10~11)
    单词篇:(单词识记11)
    单词篇:(单词识记10)
    单词篇:(单词识记8~9)
    单词篇:(单词应用9)
    单词篇:(单词识记8)
    单词篇:(单词应用6~7)
    单词篇:(单词识记7)
    单词篇:(单词识记6)
    单词篇:(单词应用4~5)
  • 原文地址:https://www.cnblogs.com/lvlisn/p/14898484.html
Copyright © 2020-2023  润新知