图表类可视化开发采坑记录之旅5

图标类看前面4期代码的控制台，各种黄色警告，也是不允许的。

今天来补坑喽。

框架基于：vue2,echart5.0.0

问题1：

 原文：

log.js?3de6:61 [ECharts] DEPRECATED: textStyle hierarchy in axisLabel has been 
removed since 4.0. All textStyle properties are configured in axisLabel directly now.

定位到代码：（错误展现在前4篇，有兴趣的朋友可以往回翻找找茬）

        axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,0.3)' // y轴字体颜色
            }
          },

修改为：

        axisLabel: {
            color: 'rgba(255,255,255,0.3)' // y轴字体颜色
          },

问题2：

 原文：

log.js?3de6:61 [ECharts] There is a chart instance already initialized on the dom.

定位到代码：（错误展现在前4篇，有兴趣的朋友可以往回翻找找茬）

initEchartsTwo () {
      let StickerPower = this.$echarts.init(document.getElementById('StickerPower'))
      this.options && StickerPower.setOption(this.options)
    },

修改为：

initEchartsTwo () {
      let StickerPower = this.$echarts.getInstanceByDom(document.getElementById('StickerPower'))
      if (StickerPower == null) {
        StickerPower = this.$echarts.init(document.getElementById('StickerPower'))
      }
      this.options && StickerPower.setOption(this.options)
    },

还有一种来源于网络上的解法，暂时记录一下：

initEchartsTwo () {
      let StickerPower = this.$echarts.getInstanceByDom(document.getElementById('StickerPower'))
      // if (StickerPower == null) {
      //   StickerPower = this.$echarts.init(document.getElementById('StickerPower'))
      // }
      if (StickerPower !== null && StickerPower !== '' && StickerPower !== undefined) {
        StickerPower.dispose() // 解决echarts dom已经加载的报错
      }
      StickerPower = this.$echarts.init(document.getElementById('StickerPower'))
      this.options && StickerPower.setOption(this.options)
    },

问题3：

 原文：

[ECharts] DEPRECATED: 'normal' hierarchy in label has been removed since 4.0. All style properties are configured in label directly now.

定位到代码：（错误展现在前面扇形图，有兴趣的朋友可以往回翻找找茬）

label: {
              position: 'center',
              normal: {
                show: true,
                fontSize: 12,
                color: 'rgba(255,255,255,0.82)', // 设置文字颜色
                lineHeight: 18,
                extraCssText: 'width:60px; white-space:pre-wrap',
                // 扇形图需求文字截断对齐
                formatter: (e) => {
                  let newStr = ''
                  let start = 0// 开始截取位置
                  let end = 0// 截取结束位置
                  const namelen = e.name.length // 每个内容名称的长度
                  const maxname = 5// 每行显示的最大长度
                  const newrow = Math.ceil(namelen / maxname)// 显示行数
                  if (namelen > maxname) { // 如果名称长度大于每行最大显示长度，则
                    for (let i = 0; i < newrow; i++) { // 循环行数
                      let old = ''// 每次截取的字符
                      start = i * maxname// 截取的起点
                      end = start + maxname// 截取的终点
                      if (i === newrow - 1) { // 如果是最后一行
                        old = e.name.substring(start)
                      } else {
                        old = e.name.substring(start, end) + '\n'// 截取内容加换行
                      }
                      newStr += old// 拼接字符串
                    }
                  } else { // 否则不变显示
                    newStr = e.name
                  }
                  return newStr + '\n' + e.value
                }
              }
            }

修改为：

 label: {
              position: 'center',
              show: true,
              fontSize: 12,
              color: 'rgba(255,255,255,0.82)', // 设置文字颜色
              lineHeight: 18,
              extraCssText: 'width:60px; white-space:pre-wrap',
              // 扇形图需求文字截断对齐
              formatter: (e) => {
                let newStr = ''
                let start = 0// 开始截取位置
                let end = 0// 截取结束位置
                const namelen = e.name.length // 每个内容名称的长度
                const maxname = 5// 每行显示的最大长度
                const newrow = Math.ceil(namelen / maxname)// 显示行数
                if (namelen > maxname) { // 如果名称长度大于每行最大显示长度，则
                  for (let i = 0; i < newrow; i++) { // 循环行数
                    let old = ''// 每次截取的字符
                    start = i * maxname// 截取的起点
                    end = start + maxname// 截取的终点
                    if (i === newrow - 1) { // 如果是最后一行
                      old = e.name.substring(start)
                    } else {
                      old = e.name.substring(start, end) + '\n'// 截取内容加换行
                    }
                    newStr += old// 拼接字符串
                  }
                } else { // 否则不变显示
                  newStr = e.name
                }
                return newStr + '\n' + e.value
              }
            }

问题4：

还有个题外问题：

原文：

Error handling response: TypeError: self.processResponse is not a function

 报错原因是因为开启了扩展程序 WhatRuns，关闭就不报错了。我这边关了还是存在，我就删除这个浏览器插件了：

 

 终于没有黄色和红色的报错了，舒服了舒芙蕾~~~

关注我，大家一起进步！~