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

最新推荐文章于 2023-10-27 15:01:16 发布

qq_41737172

最新推荐文章于 2023-10-27 15:01:16 发布

阅读量734

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_41737172/article/details/130481136

版权

在这里插入图片描述

    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);
            });
          }
        }
      },