首页 前端知识 【Echarts】图表添加背景图片,文字

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

2024-05-07 13:05:49 前端知识 前端哥 899 39 我要收藏

写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
      }
    }
  ],
}

最后呈现的效果就是

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7279.html
标签
评论
发布的文章

exceljs

2024-05-11 10:05:00

Java研学-JSON与AJAX

2024-05-10 22:05:37

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!