Echarts在Vue移动端项目横竖屏切换时自适应屏幕

1.安装echarts

npm install echarts --save

2.引入echarts

import * as echarts from "echarts";

3.初始化echarts柱状图

//柱状图css
 <div>
      <div class="cl">
        <div> 柱状图 </div>
      <div id="mapCountChartContent"></div>
 </div>   
// 柱状图 初始化
    barChartInit(xData, yData) {
//判断x轴数据量,控制滑块功能是否开启
if(xData.length>40){
this.showslider=true
}else{
this.showslider=false
}
      !!this.myChart ? this.myChart.dispose() : "";
//绑定id展示柱状图
      var chartDom = document.getElementById("mapCountChartContent");
      this.myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "名称",
          subtext:"文字",
        },
        // 数据过多 文字重叠 滚动加载
 dataZoom : [
          {
                        type: 'slider',
                        // realtime: true,
                        height: 20, //组件高度
                        left: 5, //左边的距离
                        right: 5, //右边的距离
                        bottom: 0, //下边的距离
                        show:this.showslider?true:false,  // x轴数据超过40条展示
                        fillerColor: "#007aff", // 滚动条颜色
                        borderColor: "rgba(17, 100, 210, 0.12)",
                        // backgroundColor: '#007aff',
                        handleSize: 0,      //两边手柄尺寸
                        showDetail: false, //拖拽时是否展示滚动条两侧的文字
                        zoomLock: true,         //是否只平移不缩放
                        // moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
                        zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
                         
                         //下面是自己发现的一个问题，当点击滚动条横向拖拽拉长滚动条时，会出现文字重叠，导致效果很不好，以此用下面四个属性进行设置，当拖拽时，始终保持显示10个柱状图，可结合自己情况进行设置。
                         startValue: 0, // 从头开始。
                         endValue:40,  // 最多40个
                         minValueSpan: 40,  // 放大到最少几个
                         maxValueSpan: 40,  //  缩小到最多几个
                    },
        ],
        grid: {
          left: "1%",
          right: "2%",
          bottom: "3%",
          with:'100%',
          containLabel: true,
        },
        // echart工具箱
            tooltip: {
        trigger: 'axis',
        // 点击条形图展示具体数据
        formatter(params){
            return params[0].name+":"+params[0].data;
        }
    },
        xAxis: {
          type: "category",
          data: xData,
          axisLabel: {
            interval: 0,
//x轴文字竖向展示
            formatter: function (value) {
              return value.split("").join("\n");
            },      
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: yData,
            type: "bar",
          },
        ],
      };
      option && this.myChart.setOption(option);
    },

4.开启横竖屏切换(写在apicloud文件下面的index.html中)

  // api.setScreenOrientation({   orientation:'auto'}); 

应用:
    apiready = function() {
     
        api.setScreenOrientation({
                orientation:'auto'
        }); 
        api.openFrame({
            name: 'main',
            url: 'html/main.html',
            bounces: false,
            rect: {
                 // 推荐使用Margin布局，用于适配屏幕的动态变化
                // marginTop: headerH, // main页面距离win顶部的高度
                // marginBottom: footerH, // main页面距离win底部的高度
                w: 'auto', // main页面的宽度 自适应屏幕宽度
                h: 'auto'
            },
            slidBackEnabled:true,
        });
    
    };

5.监听横竖屏变化  采用echart.resize()适配

  mounted() {

//初始化echarts宽度

var w = document.getElementById("map").clientWidth * 0.9 + "px";

      document.getElementById("mapCountChartContent").style.width = w;

//实时监听横竖屏变化 echarts重绘

     window.addEventListener("orientationchange" in window?"orientationchange":"resize", acrossOrVertical, false);

     const that =this

     function acrossOrVertical() {

       if (window.orientation==180||window.orientation==0) {

var w = document.getElementById("map").clientWidth * 0.9 + "px";

      document.getElementById("mapCountChartContent").style.width = w;

      var chartDom = document.getElementById("mapCountChartContent");

      that.myChart = echarts.init(chartDom);

      that.myChart.resize()

 }

  if (window.orientation==90||window.orientation==-90) {

var w = document.getElementById("map").clientWidth * 0.9 + "px";

      document.getElementById("mapCountChartContent").style.width = w;

      var chartDom = document.getElementById("mapCountChartContent");

      that.myChart = echarts.init(chartDom);

    that.myChart.resize()

 }

     }

acrossOrVertical();

  },