首页 前端知识 echarts文字显示部分,超出显示省略号

echarts文字显示部分,超出显示省略号

2024-02-08 15:02:31 前端知识 前端哥 345 246 我要收藏

在这里插入图片描述

    getEquipEch(arr, totla) {
        if (arr) {
          const chart = this.$refs.getEquipEchart;
          if (chart) {
            let barChart = this.$echarts.init(chart);

            const option = {
              color: ["#9933ce", "#285feb", "#04b7f9", "#6b5bf4"],
              title: {
                text: totla + "台", //图形标题,配置在中间对应效果图的位置
                left: "72%",
                top: "32%",
                textStyle: {
                  color: "rgb(50,197,233)",
                  fontSize: 20,
                  align: "center",
                },
              },
              tooltip: {
                trigger: "item",
              },
              legend: {
                type: "scroll",
                orient: "vertical",
                left: "left",
                textStyle: { color: "#fft", fontSize: 14 },
                itemGap: 20,
                formatter: function (name) {
                  return name.length > 16 ? name.substr(0, 16) + "..." : name;
                },
              },
              series: [
                {
                  type: "pie",
                  radius: ["55%", "80%"],
                  center: ["80%", "40%"], // left   top
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    //position: 'center'
                    position: "inner",
                  },
                  emphasis: {
                    label: {
                      show: false,
                      fontSize: "20",
                      fontWeight: "bold",
                    },
                  },
                  labelLine: {
                    show: false,
                  },
                  // data: [
                  //   { value: 1048, name: '土壤水分监测器' },
                  // ]
                  data: arr,
                },
              ],
            };
            barChart.setOption(option);

            var _this = this;
            barChart.on("legendselectchanged", function (params) {
              barChart.setOption({
                legend: { selected: { [params.name]: true } },
              });
              console.log("点击了", params.name);
              var str = params.name;
              var result = /^\D+(?=\d)/.exec(str);
              _this.goDeviceDate(result);
            });
          }
        }
      },

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1549.html
标签
ecmascript
评论
会员中心 联系我 留言建议 回顶部
复制成功!