Echarts使用注意事项

1. 没有数据时候的显示效果

一般，默认echarts没有数据时（这里自行根据后端返回的数据来判断），就没任何展示，此时容器是一片空白，很不好看。此时可以有以下几种方法来优化：

1. 放一张图片

• 网络地址上的图片
• 本地图片 vue项目在data中 noDataImg: [{src: require('Assets/img/nodata.png')}], 引入你本地的图片

2. 使用一段文字来提示

option = {
  title: {
    text: "暂无数据",
    x: "center",
    y: "center",
    textStyle: {
      color: "#8693B0",
      fontWeight: "normal",
      fontSize: 16,
    },
  },
};

3. 使用容器中有数据时会绘制的echarts类型的默认值，这里可以写死一些假的数据，比如这是默认的pie图实例

option = {
  color: "#30A9DE",
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "5%",
    left: "center",
    textStyle: {
      color: "#f2f2f2",
    },
  },
  series: [
    {
      type: "pie",
      radius: ["35%", "60%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "25",
        },
      },
      labelLine: {
        show: false,
      },
      data: [{ value: 0, name: "暂无数据" }],
    },
  ],
};

2. 有数据时，容器中还有设置的暂无数据效果

切记使用echarts的时候，在setOption(option)之前一般都要clear()一下

this.nameChart.clear();
this.nameChart.setOption(option);