Echarts 遇见的一些问题

一、自适应Echarts 图表

        单个 Echarts 图表

 // 获取当前 Echarts 的实例
 
    const chart = this.$refs.SetEcharts; //数据可视实例

 // 获取 echarts 对象
      
    this.mychart = this.$echarts.init(chart) 

 // 设置 echarts 属性
     
    this.mychart.setOption(option)

 //自适应 Echarts 窗口
            
    window.onresize = this.mychart.resize;

完整代码 

methods:{

        draWEcharts(){

            //Echarts字体跟随窗口变化
            // function  fontSize(res){
            //     let clientwidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
            //     if(!clientwidth) return;
            //     let fontSize = 100 * (clientwidth / 1920)
            //     return res * fontSize
            // }

            //获取dom实例
            
            let barEarch = this.$refs.EnergyEarch

            //销毁实例
            // this.$Echarts.dispose(barEarch)

            if(this.mychart == null){

                // 初始化echarts实例
                this.mychart = this.$Echarts.init(barEarch);

            }

            let that = this

            //单个 Echarts 图表   自适应
            window.onresize = function (){
                that.mychart.resize();
            }

            this.mychart.setOption(this.OptionEarchars,true)
                    
        },

   },

   mounted() {
        
        this.draWEcharts()
    
    }

 多个 Echarts 图表

// 获取当前 Echarts 的实例
 
    const chart = this.$refs.SetEcharts; //数据可视实例

 // 获取 echarts 对象
      
    this.mychart = this.$echarts.init(chart) 

 // 设置 echarts 属性
     
    this.mychart.setOption(option)

 //自适应 Echarts 窗口

    let that = this    
    
    window.addEventListener("resize",function(){

          that.mychart.resize();

    })

完整代码

 

methods:{

        draWEcharts(){

            //Echarts字体跟随窗口变化
            // function  fontSize(res){
            //     let clientwidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
            //     if(!clientwidth) return;
            //     let fontSize = 100 * (clientwidth / 1920)
            //     return res * fontSize
            // }

            //获取dom实例
            
            let barEarch = this.$refs.EnergyEarch

            //销毁实例
            // this.$Echarts.dispose(barEarch)

            if(this.mychart == null){

                // 初始化echarts实例
                this.mychart = this.$Echarts.init(barEarch);

            }

            let that = this

            // 多个 Echarts 图表   自适应
            window.addEventListener("resize",() => {
                this.mychart.resize();
            })

            this.mychart.setOption(this.OptionEarchars,true)
                    
        },

   },

   mounted() {
        
        this.draWEcharts()
    
    },
    
    beforeDestroy() {
      //页面组件销毁时，移除绑定的resize事件。否则会导致内存泄漏和CPU与GPU占用
      window.removeEventListener("resize", () => {
        this.mychart.resize();
      })
    }

图表字体大小跟随窗口变化

  //Echarts字体跟随窗口变化
    // function  fontSize(res){
    //     let clientwidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    //     if(!clientwidth) return;
    //     let fontSize = 100 * (clientwidth / 1920)   【设计稿宽度】
    //     return res * fontSize
    // }

Echarts常用api 

yAxis: {
   show: false, //不显示坐标轴刻度线、坐标轴线、坐标轴文字、网格线
   axisTick:{
      show: false //不显示坐标轴刻度线
   },
   axisLine: {
      show: false, //不显示坐标轴线
   },
   axisLabel: {
      show: false, //不显示坐标轴文字
   },
   splitLine: {     //网格线
      show: false
   }
}，

//工具栏(图表右边的下载与其他功能)
toolbox:{

},

series: [{
    name: "罚款总金额",
    type: "line",
    smooth: true,  //曲线
    //如果有多个数据在一个图表   该属性可以设置为是在同一个y轴还是单独一个（用于多个数据用同一个y轴）
    // yAxisIndex: 1,

 }],

//数据区域缩放组件
"dataZoom": [{
        "type":"slider",
        //组件的高度
        "height": 30,
        //dataZoom-slider组件离容器下侧的距离
        bottom: 30,
        // 开始位置的百分比，0 - 100
        "start": 10,
        //结束位置的百分比，0 - 100
        "end": 80,
        //两侧缩放手柄的 icon 形状
        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: '110%',
        //两侧缩放手柄的样式配置
        handleStyle:{
            color:"#d3dee5",
        },
        //dataZoom 文字的颜色
        textStyle:{
            color:"#fff"
        },
        //边框颜色
        borderColor:"#90979c"
        
    }
    //是否鼠标控制缩放（如果不写则不可以缩放）
    , {
        "type": "inside",
        //数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
        "start": 1,
        //数据窗口范围的结束百分比。范围是：0 ~ 100。表示 0% ~ 100%。
        "end": 35
      }
  ],