ECharts 雷达图自适应

XXXTENTACIONXXXX

已于 2023-05-23 11:25:52 修改

阅读量320

点赞数

文章标签： echarts 前端 javascript

于 2023-05-23 11:02:04 首次发布

本文链接：https://blog.csdn.net/XXXTENTACIONXXXX/article/details/130822902

版权

{
      console.log(this.evaluationCensusNamess, 165666666666);
      // return ;
      this.state = localStorage.getItem("skin");
      var _this = this;
      if (this.state == "light") {
        this.zhpgtxt = "#7687b7";
      } else {
        this.zhpgtxt = "white";
      }
      // console.log(123);
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("zhpg"));
      this.zhpgs = myChart;
      this.myChartx = myChart;
      let option = {
        textStyle: {
          color: this.zhpgtxt,
          fontSize: "0.9rem",
        },
        legend: {
          right: "1%",
          icon: "circle",
          textStyle: {
            //图例文字的样式
            color: this.zhpgtxt,

            fontSize: 15,
          },
        },
        color: ["#56c0f3", "#bf8dfe"],
        tooltip: {
          //提示框组件
          trigger: "item", //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          // axisPointer: {
          //   // 坐标轴指示器，坐标轴触发有效
          //   type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          // },
          // formatter: "{a} <br/>{b} : {c} <br/>百分比 : {d}%", //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        },
        radar: [
          {
            indicator: _this.evaluationCensusNamess,
            radius: 200,
            center: ["50%", "55%"],
          },
        ],
        // title: {
        //   text: "综合评估",
        // },
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            areaStyle: {},

            data: [
              {
                color: "rgba(169, 146, 95, 0.6)",
                value: this.evaluationCensusValue,
                name: "本校",
                areaStyle: {
                  // color: "rgba(169, 146, 95, 0.6)",
                },
              },
              {
                color: "rgba(169, 146, 95, 0.6)",
                value: this.evaluationCensusValuess,
                name: "市平均",
                areaStyle: {
                  // color: "rgba(169, 146, 95, 0.6)",
                },
              },
            ],
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);

       $(window).resize(function() {//这是能够让图表自适应的代码
            myChart.resize(); //!!!!!!!!!!这个地方
        });  
    },

很重要的就是要把 radius: '85%',

把radius改成百分比