echarts 中添加图片/图标

javascript 复制代码
let myChart = echarts.init(this.$refs.chartOne); // 注意这里的 ref 引用  
  myChart.setOption({  
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}'
     },
     series: [{
       type: 'pie',
       radius: '50%',
       data: this.swjList,
       label: {
         formatter: (params) => {
           if (params.name !== '') {
             let percentl = params.percent === undefined ? 0 : params.percent
               if(Number(percentl) > 15){
                  return params.percent + '%{Sunny|}'
                }else{
                  return `${percentl}%`
                }
              }
              return ''
           },
          rich: {
             cValue: {
                height: 25,
                padding: [0, 10, 0, 30],
                align: 'right'
               },
              Sunny: {
                 height: 15,
                 width: 15,
                 align: 'left',
                 backgroundColor: {
                   image: require('../../../assets/images/warning.png'),
                   repeat: 'no-repeat',
                   repeat: 'no-repeat',
                   position: 'center'

                 }
                },
              }
           },
           emphasis: {
               itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
         }]
       });  
      window.addEventListener('resize', () => {  
         myChart.resize();  
      });  

Echarts ---自定义label标签的样式(formatter,rich,添加图标等操作)_echarts label-CSDN博客

相关推荐
蜗牛攻城狮24 分钟前
CSS中的 `dvh` 与 `vh`: 深入理解视口单位
前端·css
啥都不懂的小小白30 分钟前
Shell脚本编程入门:从零基础到实战掌握
前端·shell
东东5161 小时前
校园短期闲置资源置换平台 ssm+vue
java·前端·javascript·vue.js·毕业设计·毕设
qq_419854051 小时前
富文本编辑器
前端
悟能不能悟1 小时前
VUE的国际化,怎么实现
前端·javascript·vue.js
Mr Xu_1 小时前
解决 Vue + Axios 热更新导致响应拦截器重复注册的问题
前端·javascript·vue.js
岁岁种桃花儿1 小时前
NodeJs从入门到上天:什么是Node.js
前端·node.js
colicode1 小时前
语音报警接口开发参考:紧急情况下快速调用语音API发送安全警报
前端·语音识别
夏河始溢1 小时前
一八四、Zustand 状态管理详解、与 Redux、MobX 的对比分析
前端·javascript·react.js·状态管理·zustand
Code小翊1 小时前
TypeScript 核心语法速查
前端·javascript·typescript