ECharts 雷达图自适应

{
      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改成 百分比

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值