Vue+DataV+echarts大屏可视化开发注意点

前提是装好所需依赖开发包，默认都已经装好。
1.页面最外层使用DataV全屏容器组件

<dv-full-screen-container>content</dv-full-screen-container>

2.一般最外层div设置宽度(width:100vw),高度(height:100vh)。一定要设置。不然全屏组件显示页面不全。
3.echart一般封装成组件，下面是基本示例(能自适应屏幕宽度)：

<template>
  <div style="width: 100%; height: calc(100% - 40px);" :id="charid">
    <dv-loading></dv-loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      charid: Math.random(1),
      chart: null //关键一
    };
  },
  props: ["chardata"],
  watch: {
    chardata() {
      this.initcarinfo();
      this.init();
    }
  },
  methods: {
    initcarinfo() {
      let that = this;

      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById(this.charid));
      // 指定图表的配置项和数据
      var colorList = [
        "#1bb1f5",
        "#ffbb19",
        "#ed4014", //红
        "#af89ff",
        "#67c23a", //绿
        "#ff9599",
        "#00a1ff",
        "#fad254",
        "#ffa149",
        "#aac3e0",
        "#ffbb19",
        "#ed4041",
        "#af89ef",
        "#67c2a3"
      ];
      let rounddata = [];
      for (let item of that.chardata) {
        rounddata.push({ name: item.name, value: item.num });
      }
      let option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          show: false,
          bottom: -4,
          orient: "horizontal",
          align: "auto",
          itemGap: 10,
          itemWidth: 10,
          itemHeight: 10,
          formatter: function(name) {
            for (let item of rounddata) {
              if (item.name == name) {
                return `${name} (${item.value})`;
              }
            }
            // console.log(name);
          },
          textStyle: {
            color: function(params) {
              return colorList[params.dataIndex];
            },
            fontSize: 12
          }
        },
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["40%", "62%"],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 5,
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex];
                }
              }
            },
            label: {
              show: true,
              position: "outside",
              formatter: function(params) {
                // console.log(params);
                return `${params.name}(${params.value})`;
              }
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 10,
                lineStyle: {
                  width: 1
                }
              }
            },
            data: rounddata
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(option);
    },
    init() {
      //关键三   init的时候使用定时器监听窗口的变化，再调用echarts的resize方法
      setTimeout(() => {
        window.addEventListener("resize", () => {
          this.chart.resize();
        });
      }, 20);
    }
  },
  destroyed() {
    //关键四   定时清除init带来的定时器
    window.removeEventListener("resize", this.init, 20);
  }
};
</script>

4.有时候会出现屏幕大小改变，echart大小并没有适应新的屏幕大小，出现样式错乱。可以给外层元素添加动态key值，屏幕大小改变时，key值改变发生diff算法，重新渲染元素。

 <div class="mainbar" :key="timer">
 ...
//包含echart代码
 </div>

 window.onresize = () => {
      this.timer = new Date().getTime();
      this.goinitmethods();//重新请求echart数据接口
    };

标签：Vue,return,name,item,init,params,大屏,let,DataV
来源： https://blog.csdn.net/qq_34684704/article/details/119217392