vue2可视化大屏浏览器自适应响应

        本文章主要讲述vue2开发可视化大屏,echars图形会随着浏览器窗口大小而自适应,用到了 .flexible.js 插件把屏幕分成24等分达到目的,公司需求是一个页面多个不同的图表.图表有些是相同的,所以我对图表做了个封装,以其中一个图表为例子

1-把下载好的flexible.js,放在所需项目里,之后直接导入到可视化大屏页面即可

2-页面分成24等分,以1920为例,1rem等于80px,把页面的px全部写为rem单位

3-封装的echars代码如下,一个页面多个相同图表,就用ref的方式初始化实例,不然页面只有最后一个图表会自适应.前面的自适应不了,注意!!每个图表的id值必须要不一致,不然只会显示一个图表

<template>
  <div :id="id" ref="echarts" style="width: 100%; height: 100%"></div>
</template>

<script>
// import echartMixins from '@/utils/resizeMixins'
import * as echarts from 'echarts'
export default {
  props: ['id', 'setOption'],
  // mixins: [echartMixins],
  created() {
    window.setTimeout(() => {
      this.columnar_echarts()
    }, 1000)
  },
  watch: {
    setOption: {
      deep: true,
      handler() {
        this.columnar_echarts()
      }
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    // this.columnar_echarts(
  },
  methods: {
    columnar_echarts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.echarts)
      this.$nextTick(() => {
        myChart.resize()
      })
      // setTimeout(() => {
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      // }, 300)

      //  this.myChart = echarts.init(document.querySelector(`#${this.id}`))
      var option = {
        backgroundColor: '#0c1d49',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '15%',
          top: '17%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.setOption.xAxis,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.12)'
              }
            },
            axisLabel: {
              color: '#e2e9ff',
              textStyle: {
                fontSize: ".15rem"
              },
              interval: 0,
              rotate: 0
            }
          }
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: '{value}',
              color: '#e2e9ff'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255,1)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.12)'
              }
            }
          }
        ],
        // 滚动条
        dataZoom: [
          {
            show: true,
            height: 15,
            xAxisIndex: [0],
            bottom: 10,
            start: 10,
            end: 80,
            // handleIcon:
            //   'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '100%',
            handleStyle: {
              color: '#d3dee5'
            },
            textStyle: {
              color: '#fff'
            },
            borderColor: '#90979c'
          },
          {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            type: 'bar',
            data: this.setOption.series,
            barWidth: '15px',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00e8f5' },
                { offset: 0.5, color: '#00a6d6' },
                { offset: 1, color: '#188df0' }
              ]),
              barBorderRadius: [10, 10, 0, 0],
              shadowColor: 'rgba(0,160,221,1)',
              shadowBlur: 4
            },
            label: {
                show: true,
                lineHeight: 30,
                position: ['5', '-30'],
                distance: 1,

                rich: {
                  d: {
                    color: '#3CDDCF'
                  },
                  a: {
                    color: '#fff',
                    align: 'center'
                  },
                  b: {
                    width: 1,
                    height: 10,
                    borderWidth: 1,
                    borderColor: '#234e6c',
                    align: 'left'
                  }
                }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  },

  destroyed() {
    //在组件生命周期结束的时候销毁。  removeEventListener和addEventListener中对应的参数要一致。
    window.removeEventListener('resize', function () {
      myChart.resize()
    })
  }
}
</script>

<style lang="less" scoped>
</style>

4-如果只需要响应一个图表的话,可以使用

  // 1.单个组件封装调用，用下面这个
     var myChart = echarts.init(document.getElementById("id名"));
   window.onresize = myChart.resize;

文章到此结束,希望对你有所帮助~