【Echarts】图表添加背景图片，文字

写 echarts 时，通常 ui 会设计有背景图，而且会有文字；

使用 css 布局时，如果宽高发生变化，图表可以进行 resize，但这时背景图就不好重新设计了

查看 echarts，结果发现了 graphic — 原生图形元素组件

Documentation – Apache ECharts

const options ={
  graphic: [
    // 插入图片
    {
      type: "image",
      left: "center",
      top: "center",
      style: {
        image: "图片路径",
        width: 130,
        height: 130
      }
    },
    // 文字
    {
      type: "text",
      left: "center", // 相对父元素居中
      top: "130", // 相对父元素上下的位置
      style: {
        fill: "#c8c8c894",
        text: "文字",
        font: "12px Arial Normal"
      }
    },
    // 文字
    {
      type: "text",
      left: "center", // 相对父元素居中
      top: "center", // 相对父元素上下的位置
      style: {
        fill: "#fdfdfc",
        text: "2578",
        font: "22px Arial Normal"
      }
    },
    // 外置圆环
    {
      type: "ring",
      left: "center", // 相对父元素居中
      top: "center", // 相对父元素上下的位置
      style: {fill: "rgba(128, 128, 128, 0.3)",
        lineWidth: 4
      },
      shape: {
        cx: 0,
        cy: 0,
        r: 92,
        r0: 85
      }
    }
  ],
}

最后呈现的效果就是