Echarts遇见的小问题方法解决

饼状图legend属性(菜单标签)文字以中间值换行

 legend: {
          type: 'scroll', // 让其可以滚动
          orient: 'vertical', // 标签页
          top: '10%', // 位置
          left: '70%', // 位置
          itemWidth: 22, // 宽
          itemHeight: 13, // 高
          formatter: (val) => {
            // 首先查看这里的值(val)  是什么形式 我这里是string
            // 换行操作
            if (val.length > 6) {
              if (val.length % 2 == 0) {
                return (
                  val.slice(0, val.length / 2) +
                  '\n' +
                  val.slice(val.length / 2)
                )
              } else {
                return (
                  val.slice(0, (val.length - 1) / 2) +
                  '\n' +
                  val.slice((val.length - 1) / 2)
                )
              }
            } else {
              return val
            }
          }
        },

"TypeError: Cannot read property 'getAttribute' of null"的问题

有两种情况  

1.         第一种是直接使用echarts在出现这种错误
2.         第二种就是使用echarts并且在容器上使用了v-if出现这种情况

        第一种的方法：

                1、 使用将获取节点的方法document.getElementById()的方式更换使用vue的ref与$refs来进行获取图表容器节点

  <div id="Echarts" ref="Echarts"></div>


    mounted() {
      this.myEcharts();
    },
    methods: {
      myEcharts() {
        //var Echarts = document.getElementById('Echarts');
        var Echarts = this.$refs.Echarts;
        // 将之前的方法更换为$refs来进行获取
        // 在进行判断当前节点存在后进行echarts图表数据的填写

        if (Echarts){
          console.log('bar_dv不为空');
          let myChart = this.$echarts.init(Echarts)

          图表代码 ...

        }
      }
    }

                2、正常开发难免调用接口返回数据渲染，可能更改为ref与$refs的方法不能完全解决这个问题。这个时候就可以在async await接口之后，这ref与$refs的方法的基础上添加一个定时器来延时执行

  <div id="Echarts" ref="Echarts"></div>


    mounted() {
      // 进入页面请求数据
      this.myData();
    },
    methods: {
      async myData(){
          let {code, data, msg } = await myData()
          if(code == 200){
            this.xxx = data
            // 数据请求成功 --- 添加定时器setTimeout 将任务更改为异步
            setTimeout(() => {
                this.myEcharts();
            },500)
          }else{
            return false
          }
      },
      myEcharts() {
        //var Echarts = document.getElementById('Echarts');
        var Echarts = this.$refs.Echarts;
        // 将之前的方法更换为$refs来进行获取
        // 在进行判断当前节点存在后进行echarts图表数据的填写

        if (Echarts){
          console.log('bar_dv不为空');
          let myChart = this.$echarts.init(Echarts)

          图表代码 ...

        }
      }
    }

                3、最后的情况就是添加this.$nextTick方法  我们需要 包裹在渲染图表的方法外层等待dom加载完成后执行的钩子

  <div id="Echarts" ref="Echarts"></div>


    mounted() {
      // 进入页面请求数据
      this.myData();
    },
    methods: {
      async myData(){
          let {code, data, msg } = await myData()
          if(code == 200){
            this.xxx = data
            // 数据请求成功 --- 添加定时器setTimeout 将任务更改为异步
            // 添加$nextTick   dom加载完后执行的钩子
            this.$nextTick(() => {
                 setTimeout(() => {
                     this.myEcharts();
                 },500)
            })
          }else{
            return false
          }
      },
      myEcharts() {
        //var Echarts = document.getElementById('Echarts');
        var Echarts = this.$refs.Echarts;
        // 将之前的方法更换为$refs来进行获取
        // 在进行判断当前节点存在后进行echarts图表数据的填写

        if (Echarts){
          console.log('bar_dv不为空');
          let myChart = this.$echarts.init(Echarts)

          图表代码 ...

        }
      }
    }

        第二种方法:

                其实解决很简单，只需要将v-if更换成v-show即可。对比v-if和v-show的不同和渲染机制就可以简单理解一点。，深层的dom渲染机制不理解。大佬可以补充
      

   // <div id="Echarts" ref="Echarts" v-if="shipEcharts"></div> 

     <div id="Echarts" ref="Echarts" v-show="shipEcharts"></div>

添加图表下载功能

          toolbox: {
            show: true,
            feature: {
              restore: { show: true },
              saveAsImage: { show: true }   // echarts自带下载到本地功能
            }
          },

在tooltip中获取点击事件

在图表配置的tooltip中进行下方配置

...
let that = this;
option = {
   tooltip: {
    show: true,
     enterable: true, // 这个必须为 true
     triggerOn: 'click',// 必须为click  
     trigger: 'item',// item 图形触发， axis 坐标轴触发， none 不触发
     // 浮层隐藏的延迟
     hideDelay: 800,
     formatter: function(params) {
       var html = `<div οnclick="${that.todoSthLook(params.type)}">查看画像</div>
       return html;  
     }
}
...

之后定义方法来进行调用和逻辑代码的处理

    todoSthLook (type) {
         // 逻辑代码......
         console.log(type)
    },

重置echarts图表API

                // 重置图表
                let myChart = this.$echarts.init(document.getElementById('main'))
                myChart.clear()


// 1. 使用clear（） 方法
// 2. 使用setOption（）方法重新执行一下

解决Echarts图标中纵坐标的数值被遮挡，显示一半的问题

                // 解决Y坐标的数值被遮挡，显示一半的问题
                grid: {
                    containLabel: true
                },

y轴的数据的值处理 自定义

                yAxis: {
                    type: 'value',
                    axisLabel: {
                        //y轴的数据的值处理 自定义 
                        formatter: (value) => {
                            return (+value).toFixed(2)
                        },
                    },
                },