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

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

echarts中,可以使用graphic属性来定义自定义文字。具体的方法如下: 1. 首先,在setOption({})中添加graphic属性,并设置type为'text'。 2. 然后,通过left和top属性来设置文字的位置。 3. 最后,使用style属性来设置文字的内容。 以下是一个示例代码: ``` graphic: { type: 'text', left: 10, top: '70%', style: { text: '成交量: ' + data.cjl, }, }, ``` 在上述代码中,我们使用graphic属性来定义了一个文字,位置在左上角,内容为'成交量: '加上data.cjl的值。你可以根据自己的需求来修改文字的位置和内容。\[2\] #### 引用[.reference_title] - *1* *2* [关于在echarts中插入/自定义动态文字文本](https://blog.csdn.net/weixin_44830518/article/details/123525046)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Echarts中常用的参数总结以及参数自定义示例](https://blog.csdn.net/qq_38951259/article/details/128207995)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值