【react】echarts图表空状态占位

方法一：

效果图：

实现方法：

利用title的副标题subtext，默认为“暂无数据”，当数据加载出来后，设置subtext为空即可

const [subtext, setSubtext] = useState("暂无数据");

option = {
	title: { text: "", subtext: subtext, x: "center", y: "center" },
	...
} 

//得到数据之后更新图表,记得把subtext重置为空
myEcharts.setOption({
      title: { text: "", subtext: subtext },
      series: [...]
})

方法二：

效果图

实现方法

  let option = {
    title: {
      text: "{b_title| }",
      x: "center",
      y: "center",
      textStyle: {
        rich: {
          b_title: {
            backgroundColor: {
              image: require("@/assets/images/empty.png"),
            },
            with: 120,
            height: 120,
          },
        },
      },
    },
 }