Echarts 暂无数据处理

Preface

接手代码的时候发现没有数据的时候echart 会报错不显示。就用 computed 来判断是否有 xAxis(它是起因)，没有的话就显示暂无数据（这里我重新换了一个 options）

🌚 这个 if else 有点多，就没有研究他是怎么去修改 options，直接重新赋值，简单粗暴的解决方式
如有多处使用建议单独放在外部变量引入使用，也方便维护后期样式修改。

解决方式

echarts 提供 graphic 属性，类似 标签🏷之类的功能。

官网给出的例子是比较个性化的: Echarts 官方文档

我这边只做一个简单的暂无数据展示，和我遇到的 配置不生效 的问题
例子:

data = []
option = {
  graphic: {
      silent: true, // Whether response to mouse events / touch events.(是否响应鼠标事件)
      type: 'text', // 这里类型有多种: image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group
      left: 'center',
      top: 'middle',
	  // invisible: 可以理解为 是否隐藏 字段; true: 隐藏; 有数据就隐藏
      invisible: !!data.length,
      style: {
        fill: '#9d9d9d', // 填充颜色 这里为文字填充色
        text: '暂无数据',
        fontWeight: 'bold',
        fontFamily: 'Microsoft YaHei',
        fontSize: '40px'
        // 当以上几个中的属性不生效可以使用下面的属性来设置文字样式
        /**
        	font: 字体样式的简写方式, 可能有些版本 fontSize 无效, 可更换为font属性
        	font的最后一个属性是: 字体,不可缺少,不然样式不生效, 可以随便写几个字母就代替.
        */
        // font: 'bold 30px null',
        // font: 'bold 30px qazwsx',
        // font: 'bold 30px Microsoft YaHei',
      }
    }
};