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

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

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

2.一般最外层div设置宽度(width:100vw),高度(height:100vh)。一定要设置。不然全屏组件显示页面不全。
3.建议一：(不用做多个echart切换等动态效果使用这个)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() {
      window.addEventListener("resize", () => {
          this.chart.resize();
        });
    }
  }
};
</script>

4.建议二：（echart做动态切换，动效时建议使用）主要结合vue的diff算法，元素绑定的key值变化时，vue认为两个元素不是同一个元素，会重新渲染元素，可以给外层元素添加动态key值，屏幕大小改变时改变绑定元素的key值，key值改变发生diff算法，元素在界面上重新渲染，echart也会重新绘制，实现自适应。缺点：因为重新渲染元素，性能也会有所影响。还有就是改变key值时需要重新绑定echart数据，不然无法显示

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

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