自定义图表（Echarts）问题记录

1.改变图表类型时数据更新图表不更新

原因：代码 myChart.setOption(option);

setOption有3个属性，setOption(option,notMerge,lazyUpdate);

第二个notMerge默认为false,即默认合并两个数据

解决：设置为true

myChart.setOption(option,true);
转载自 https://blog.youkuaiyun.com/cll1224666878/article/details/106073111

2.监听浏览器窗口变化执行resize方法

// vue 中使用
methods: {
	userCharts () {
		// 配置项
		this.myCharts = this.$echarts.init(document.getElementById('myCharts'))
		// 清楚图表后 再重新生成 保证切换图表类型时有loading动画
	    this.myCharts.clear()
	    // 问题一  改变图表类型时数据更新图表不更新
	    this.myCharts.setOption(this.option, true)
		window.addEventListener('resize', this.resizeChart)
	}
	resizeChart () {
	      if (this.myCharts !== null) {
	        this.myCharts.resize()
	        console.log(1111111111)
	      }
	},
}
// destroyed 中移除resie事件
destroyed () {
    window.removeEventListener('resize', this.resizeChart)
}

3.左侧导航栏宽度变化，图表不能执行resize

看这儿：解决办法
需要下载依赖，然后巴拉巴拉一顿操作就可以了，有大佬写好了，我在这儿记录一下。。。。

4.具体实现思路

• 通过拖拽字段到维度（x）指标(y1，y2…)上 ，托放上去后就发送请求这样子可以减少请求的次数，将获取到的数据保存下来，自己前端进行处理
• 点击不同的图表类型，执行不同的方法，全局定义一个option对象，在每个方法里面写不同的配置项即可，具体对应echarts官网
• 表的具体控制，就写全局变量，然后再最后userCharts中判断当前变量的type类型，然后配置不同的配置项即可，例如图例位置，曲线直线，整体颜色，单个颜色，文字方向等。

5.结合vue-grid-layout实现图表的拖拽排序

• 注意这个组件传递的参数过去只能一样，不能多，也不能少，字段名也必须都得一样才能实现
• 缩放这个组件时，echarts图表大小不会执行resize方法，可以通过resizedEvent (i ,newX, newY, newHPx, newWPx)方法获取到当前改变后的grid-item的宽度和高度来对当前图表进行重新的宽度高度赋值

6.echarts自定义工具栏

• 首先自定义工具栏命名必须时my开头的，例如myTool
• 再设置icon图片的时候有三种方式，如果要使用本地图片时必须用这种格式
  icon: 'image://' + require('../../assets/images/charts/edit.png')
  其他方式，可以移步官网或别人的博客

7.实现全屏放大的功能

7.1使用requestFullScreen这个API就可以了 这是封装的一个方法，调用这个方法传入一个element（DOM元素）就可以实现具体到哪一个DOM元素全屏放大

screenFull (element) {
      if (element.requestFullScreen) { // HTML W3C 提议
        element.requestFullScreen()
      } else if (element.msRequestFullscreen) { // IE11
        element.msRequestFullScreen()
      } else if (element.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
        element.webkitRequestFullScreen()
      } else if (element.mozRequestFullScreen) { // Firefox (works in nightly)
        element.mozRequestFullScreen()
      }
      // 退出全屏
      if (element.requestFullScreen) {
        document.exitFullscreen()
      } else if (element.msRequestFullScreen) {
        document.msExitFullscreen()
      } else if (element.webkitRequestFullScreen) {
        document.webkitCancelFullScreen()
      } else if (element.mozRequestFullScreen) {
        document.mozCancelFullScreen()
      }
    },

注意此方法是异步的
7.2 获取当前是否为全屏状态

window.addEventListener('resize', () => {
      // 判断是否为全屏
      if (this.group_id !== 0) {
        const fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement
        this.full = fullscreenElement
      }
    })

更多api方法，看别人的博客
7.3 此方法再h5端也能实现，并且手机横竖屏都可

8.展示效果

自定义图表