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数据接口};