ECharts 饼图实现自定义标签包含图标icon（圆形图标，矩形图标）

1 原始效果图

2 实现代码

<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));myChart.setOption({series : [{name: '访问来源',type: 'pie',    // 设置图表类型为饼图radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。data:[          // 数据数组，name 为数据项名称，value 为数据项值{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}],labelLine:{show:false},label:{formatter: params => {//●return ('{icon|▅}{name|' +params.name+ '}{value|' +params.value  + '}');},rich: {icon: {fontSize: 16},name: {fontSize: 16,padding: [0, 10, 0, 4],},value: {fontSize: 16,}},}}]})</script>
</body>

3 最终效果图

3.1 最终效果图（自定义标签包含圆形图标）

3.2 最终效果图（自定义标签包含矩形图标）

ECharts 饼图实现自定义标签包含图标icon（圆形图标，矩形图标）相关推荐

echart饼图标签重叠_怎么让ECharts饼图的label标签不重叠?
1.怎么让ECharts饼图的label标签不重叠? 使用ECharts饼图,如果有的项目占比很小,饼图所占空间也比较小的时候,会出现label标签重叠.标签被截断的情况(图1). 可以通过设置rad ...
echarts饼图提示文字标签重叠怎么处理
echarts饼图提示文字默认如图二(高危123占比都为0) 即便是存在多个item占比都为0 也是不会重叠的如果如图一提示文字重叠了很可能是series里设置了avoidLabelOver ...
el-table 树形表格自定义展开图标_换图标icon APP下载-换图标icon APP官方版 v3.01.0927...
换图标icon APP是一款可以带来更多不同风格应用图标和壁纸资源给大家尝试的软件,轻松打造个性化的桌面,资源类型丰富,直接在线去搜索查找就可以了,全部免费下载即可体验,重点是设置方便,壁纸等图片的尺 ...
桌面图标icon替换客制图标。图标要比原始图标大，要求一致。应用图标去掉四周白边,保持原有比例。
/vendor/mediatek/proprietary/packages/apps/Launcher3/ src/com/android/launcher3/icons/IconCache.java ...
阿里图标icon二次引入+ 图标引入后是黑色解决办法。
阿里图标icon二次引入第一到第三步. 第四步找到文件夹复制代码阿里图标icon二次引入 , 引入后你就会发现是黑色没有原来图标的颜色就像这种如何让本来的颜色出来呢 ? 1.找到项目设置 ...
echarts饼图解析html标签,解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
idea:Unable to compile class for JSP , jsp自定义标签问题
使用idea编辑器编写jsp自定义标签的时候,与使用eclipse和mye在配置地方有许多不同.特记录下来以防忘记. 先说说报 unable to complie class for JSP问题的解决 ...
js 创建自定义标签
原理: 自定义标签是通过定义class类继承HTMLElement实现的, class特性是ECMAScript6中引入的特性, ES6以下没有这个特性 class 不是新的对象继承模型,它只是原型链 ...
html5创建自定义标签,在html中创建自定义标签
创建并使用自定义标签 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),本篇介绍使用 CustomElem ...

ECharts 饼图实现自定义标签包含图标icon（圆形图标，矩形图标）

1 原始效果图

2 实现代码

3 最终效果图

3.1 最终效果图（自定义标签包含圆形图标）

3.2 最终效果图（自定义标签包含矩形图标）

ECharts 饼图实现自定义标签包含图标icon（圆形图标，矩形图标）相关推荐

最新文章

热门文章