Echarts -- graphic 实现自定义图片/文字

最新推荐文章于 2025-04-18 08:54:47 发布

Le_12345679

最新推荐文章于 2025-04-18 08:54:47 发布

阅读量8.6k

点赞数 9

分类专栏： Echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Le_12345679/article/details/122433051

版权

Echarts 专栏收录该内容

1 篇文章

订阅专栏

1. graphic 组件相关配置参考：ECharts图形元素组件（graphic）_w3cschool

2. graphic 是与 series 同级别的对象，参考如下：

series: [{
    // ......
}],
graphic: [{
    type: 'group',// 组（可以包含图形、文字、图片）
    left: 0,
    top: 'bottom',
    children: [{
            type: 'rect',
            z: 100,
            left: '0',
            top: '0',
            shape: {
                width: 180,
                height: 100
            },
            style: {
                fill: '#f6f6f6',
            }
        },
        {
            type: 'image',// 图片
              left:10,
              top: 10,
              z: 100,
              bounding: 'raw',
              style: {
                  image: '/static/UserSys/product/cadre/Report/img/country.png',
                  width: 20,
                  height: 20,
              }
          },
          {
            type: 'text',// 文字
            z: 100,
            left: 45,
            top: 13,
            style: {
                fill: '#e46c11',
                text: '全球分布      ' + countryCounts + ' 国',
                font: '14px Microsoft YaHei'
            }
        },
        {
            type: 'image',
              left:10,
              top: 40,
              z: 100,
              bounding: 'raw',
              style: {
                  image: '/static/UserSys/product/cadre/Report/img/china.png',
                  width: 20,
                  height: 20,
              }
          },
          {
            type: 'text',
            z: 100,
            left: 45,
            top: 43,
            style: {
                fill: '#e46c11',
                text: '中籍员工  ' + chinaNaticeCount + ' 人',
                font: '14px Microsoft YaHei'
            }
        },
        {
            type: 'image',
              left:10,
              top: 70,
              z: 100,
              bounding: 'raw',
              style: {
                  image: '/static/UserSys/product/cadre/Report/img/global.png',
                  width: 20,
                  height: 20,
              }
          },
          {
            type: 'text',
            z: 100,
            left: 45,
            top: 73,
            style: {
                fill: '#e46c11',
                text: '外籍员工  ' + foreignNativeCount + ' 人',
                font: '14px Microsoft YaHei'
            }
        },
    ]
}]