【无标题】

最新推荐文章于 2024-07-06 16:47:02 发布

大脸小覃

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量73

点赞数 1

分类专栏： html vue 文章标签： javascript echarts 开发语言

本文链接：https://blog.csdn.net/weixin_50107303/article/details/128830190

版权

vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述


 <div class="bar-zoom" ref="barZoom1" :style="initStyle"></div>



  let option1 = {
        tooltip: {
          //鼠标移入效果
          trigger: "item",
          formatter: " {b} : {c} 个 <br/>  占比：({d}%)",
        },
        legend: {
          top: "center",
          right: 10,
          orient: "vertical",
          formatter: (name, value) => {
            let total = 0;
            let target;
            for (let i = 0; i < _that.info.data1.length; i++) {
              total += _that.info.data1[i].value;
              if (_that.info.data1[i].name === name) {
                target = _that.info.data1[i].value;
              }
            }
            let a = target / total ? ((target / total) * 100).toFixed(2) : 0;

            return (
              name + "{a||}" + "{b|" + a + "}" + "{b|%}" + "   " + target + "个"
            );
          },
          textStyle: {
            // 添加
            rich: {
              a: {
                padding: 4,
                color: "#999999",
              },
              b: {
                color: "#999999",
              },
            },
          },
        },
        color: [
          "#5B8FF9",
          "#61DDAA",
          "#78D3F8",
          "#93AFE4",

          "#BBDEDF",
          "#93CA3F",
          "#7F71FF",
          "#BAE379",
          "#FDCFCF",
          "#FEA76B",
          "#C18AD8",
          "#FAA0C5",
        ],

        series: [
          {
            type: "pie",
            radius: ["40%", "60%"],
            label: {
              //设置数据内容
              position: "center", //center的时候圆环中间显示数据
              show: false, //为false显示中间，为true显示指示线

              color: "#1E7CE8",
              lineHeight: 16,
              fontSize: 12,
              formatter: "{name|{b}} \n{value|{d}%} ",
              // formatter: "{d}% ",

              rich: {
                //设置样式
                value: {
                  fontSize: 14,
                  fontWeight: 600,
                  margin: "20px",
                  color: "#1D2129",
                },
                name: {
                  fontSize: 12,
                  color: "#595959",
                },
              },
            },
            itemStyle: {
              //每个圆环之间的间隙
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              //鼠标移入时效果
              label: {
                show: true,
              },
            },
            center: ["25%", "50%"],
            data: _that.info.data1,
          },
        ],
      };
     
      _that.pieObj1 = this.$echarts.init(this.$refs.barZoom1);

    
      _that.pieObj1.setOption(option1);

      setTimeout(function () {
        window.onresize = function () {
       
          _that.pieObj1.resize();
        };
      }, 200);