2021-09-24

一、饼状图 带环

在series对象中，每个对象都当作一个环

// 诈骗类别情况分析饼状图
    zplbqkfxbzt() {
      var zplbqkxfbztCharts = echarts.init(document.getElementById("zplbqkxf"));
      var zplbqkData = [
        { value: 40, name: "rose 1" },
        { value: 38, name: "rose 2" },
        { value: 32, name: "rose 3" },
        { value: 30, name: "rose 4" },
        { value: 28, name: "rose 5" },
      ];
      var color = "#22A0e2";
      // this.zplbqkxfData.sort(this.compare("TJCOUNT"));
      // this.zplbqkxfData = this.zplbqkxfData.splice(
      //   0,
      //   10
      // );
      // this.zplbqkxfData = this.zplbqkxfData.filter(
      //   item => {
      //     return item.TJCOUNT != 0;
      //   }
      // );
      // this.zplbqkxfData.forEach((item) => {
      //   var zplbqkDataTemp = {};
      //   zplbqkDataTemp.value = item.TJCOUNT;
      //   zplbqkDataTemp.name = item.QHMC;
      //   zplbqkData.push(zplbqkDataTemp);
      // });
      var option = (option = {
        title: {
          text: `总起数：${this.count}`,
          left: "75%",
          top: "15%",
          textAlign: "center",
          textStyle: {
            color: "#2EFE2E",
            fontSize: 14,
            fontWeight: 0,
          },
        },
        legend: {
          orient: "vertical",
          top: "center",
          right: "5%",
          itemGap: 30,
          padding: 40,
          textStyle: {
            color: "#22A0e2",
            fontSize: "14px",
          },
          formatter: function (name) {
            var data = zplbqkData;
            var total = 0;
            var tarValue;
            for (var i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            var v = tarValue;
            // var p = Math.round(((tarValue / total) * 100));
            var p = ((tarValue / total) * 100).toFixed(2);
            return `${name}: ${v}(${p}%)`;
          },
        },
        grid: {
          left: -100,
          top: 50,
          bottom: 10,
          right: 10,
          containLabel: true,
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          // 内环
          {
            type: "pie",
            radius: ["5%", "8%"],
            center: ["35%", "50%"],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: false,
              },
            },
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#00BFFF",
                  },
                },
              },
            ],
          },
          // 外环1
          {
            type: "pie",
            radius: ["50%", "50.5%"],
            center: ["35%", "50%"],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: false,
              },
            },
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#0B4A6B",
                  },
                },
              },
            ],
          },
          // 外环2
          {
            type: "pie",
            radius: ["55%", "55.5%"],
            center: ["35%", "50%"],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: false,
              },
            },
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#0B4A6B",
                  },
                },
              },
            ],
          },
          // 外环3
          {
            type: "pie",
            radius: ["60%", "61%"],
            center: ["35%", "50%"],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: false,
              },
            },
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#00BFFF",
                  },
                },
              },
            ],
          },
          // 实际饼图
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: ["15%", "55%"],
            center: ["35%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 3,
            },
            label: {
              normal: {
                // 显示百分比文本,\n\n将文本移到引线上方，很关键！！
                formatter: "{d}%\n\n",
                fontSize: 14,
                // 系列色
                color: "inherit",
                padding: [0, -50],
              },
            },
            labelLine: {
              length: 35,
              length2: 50,
            },
            data: zplbqkData,
          },
        ],
        // 雷达配置
      });
      setTimeout(zplbqkxfbztCharts.setOption(option), 500);
      // zplbqkxfbztCharts.setOption(option);
    },

二、单页多图自适应

参考

1.使用window.onresize

let myChart = echarts.init(document.getElementById(dom))
window.onresize = function () {
      myChat.resize()
}

优点：可以根据窗口大小实现自适应
缺点：

多个图表自适应写法比较麻烦（当一个页面的图表太多时，这样写法不是很灵活）；

let myChart1 = echarts.init(document.getElementById(dom1))
let myChart2 = echarts.init(document.getElementById(dom2))
window.onresize = function () {
      myChat1.resize()
      myChat2.resize()
}

多个vue页面有onresize方法时，会被覆盖；

当vue页面路由跳转到下一个页面时，上一个页面的onresize方法会继续执行，（这个时候下一个页面已经不需要onresize方法执行了，当图表过多时会造成页面卡顿）

2.使用window.addEventListener添加resize方法

let myChart = echarts.init(document.getElementById(dom))
let sizeFun = function () {
      myChat.resize()
}
window.addEventListener('resize', sizeFun )

优点：

可以根据窗口大小实现自适应；
将图表方法封装以后，只需要执行一遍就可以实现多个图表的自适应；
不会被覆盖
缺点：

当vue页面路由跳转到下一个页面时，上一个页面的onresize方法会继续执行
【造成这个问题的原因是因为vue是单页面应用，echarts中的操作都是基于window，当然也可以使用window.removeEventListener在下一个页面删除绑定的方法】
点击查看window.removeEventListener使用注意点
3.实现在div使用onresize方法

实现原理：在div上实现类似window的onresize 监听，这样既能实现图表的自适应，也不会因为页面跳转之后继续执行三个页面的onresize 方法
实现方法：

1.引入esresize.js（文末贴上代码）

2.在div上绑定对应onresize 方法

优点：

可以根据窗口大小实现自适应
页面跳转不会执行上次操作
多个方法不会覆盖
缺点：暂无发现（如有问题，欢迎各位补充）

文章参考：JS监听div的resize事件

esresize.js代码

var EleResize = {
  _handleResize: function (e) {
    var ele = e.target || e.srcElement
    var trigger = ele.__resizeTrigger__
    if (trigger) {
      var handlers = trigger.__z_resizeListeners
      if (handlers) {
        var size = handlers.length
        for (var i = 0; i < size; i++) {
          var h = handlers[i]
          var handler = h.handler
          var context = h.context
          handler.apply(context, [e])
        }
      }
    }
  },
  _removeHandler: function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (handlers) {
      var size = handlers.length
      for (var i = 0; i < size; i++) {
        var h = handlers[i]
        if (h.handler === handler && h.context === context) {
          handlers.splice(i, 1)
          return
        }
      }
    }
  },
  _createResizeTrigger: function (ele) {
    var obj = document.createElement('object')
    obj.setAttribute('style',
      'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
    obj.onload = EleResize._handleObjectLoad
    obj.type = 'text/html'
    ele.appendChild(obj)
    obj.data = 'about:blank'
    return obj
  },
  _handleObjectLoad: function (evt) {
    this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
    this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
  }
}
if (document.attachEvent) { // ie9-10
  EleResize.on = function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (!handlers) {
      handlers = []
      ele.__z_resizeListeners = handlers
      ele.__resizeTrigger__ = ele
      ele.attachEvent('onresize', EleResize._handleResize)
    }
    handlers.push({
      handler: handler,
      context: context
    })
  }
  EleResize.off = function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (handlers) {
      EleResize._removeHandler(ele, handler, context)
      if (handlers.length === 0) {
        ele.detachEvent('onresize', EleResize._handleResize)
        delete ele.__z_resizeListeners
      }
    }
  }
} else {
  EleResize.on = function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (!handlers) {
      handlers = []
      ele.__z_resizeListeners = handlers

      if (getComputedStyle(ele, null).position === 'static') {
        ele.style.position = 'relative'
      }
      var obj = EleResize._createResizeTrigger(ele)
      ele.__resizeTrigger__ = obj
      obj.__resizeElement__ = ele
    }
    handlers.push({
      handler: handler,
      context: context
    })
  }
  EleResize.off = function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (handlers) {
      EleResize._removeHandler(ele, handler, context)
      if (handlers.length === 0) {
        var trigger = ele.__resizeTrigger__
        if (trigger) {
          trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
          ele.removeChild(trigger)
          delete ele.__resizeTrigger__
        }
        delete ele.__z_resizeListeners
      }
    }
  }
}
export {EleResize}