需求场景

在echarts的环形图里加上文字和数字并自适应。如下图：

实现思路

在series加上一层，只放文字和数字。
重点代码如下：

// 就是这里！
{name: '',z: -1,type: 'gauge',radius: '-50%',center: [`50%`, `50%`],// 配置中间的数字detail: {// 调节数字位置offsetCenter: [0, 20],fontSize: 30,},pointer: {show: false,},axisTick: {show: false,},axisLine: {show: false,},splitLine: {show: false,},axisLabel: {show: false,},// 中间的字和数字 数据data: [{value: 20,name: '总量',},],},

全部代码示例

这是上面环形图的代码，可直接复制粘贴到 echarts官网试试效果。

option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: false,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]},// 就是这里！{name: '',z: -1,type: 'gauge',radius: '-50%',center: [`50%`, `50%`],// 配置中间的数字detail: {// 调节数字位置offsetCenter: [0, 20],fontSize: 30,},pointer: {show: false,},axisTick: {show: false,},axisLine: {show: false,},splitLine: {show: false,},axisLabel: {show: false,},// 中间的字和数字 数据data: [{value: 20,name: '总量',},],},]
};

完

echarts环形图内实现自定义添加文字数字和缩放自适应相关推荐

在 echarts关系图动态线上添加文字_多折线堆叠图如何制作？
润乾报表有丰富的图形展现效果,不仅自带了多种统计图形,还内置了第三方统计图形 D3 还有 echarts 统计图.最近好多客户提出想要实现多折线堆叠的统计图,我用自带的图形和 echarts 两种方式 ...
修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
echarts 环形图占比_环形图_仪表盘
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
echars 饼图环形图组件修改自定义图例重新渲染显示对应颜色对应区域
如图产品有个需求是要做一个环形图点击图例显示具体数字但图例加起来是超过百分百的如图一个范围内有男有女有丑逼点击男的显示男的点击女的显示女的并且显示占总数的百分比并且鼠标悬浮上去显示的 ...
echarts环形图内部圆，外部圆形以及阴影设置
环形图修改图例自定义icon 完整代码图 Chart1() { // 折算价值户新增构成let chartDom = document.getElementById('main');let myCh ...
Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）
Echarts环形图使用 1.官网找图 Echarts官网链接 2.使用首先要进行下载,打开cmd,输入 npm install echarts --save 如果显示报错,那么使用管理员身份运行c ...
Echarts环形图--自定义图例文本和中心文字
一.设置环形图中心文字可用 titel.text 和 title.subtext 来定义中心处的文本 title:{text:subtext: } 用 graphic 原生图形元素组件每个图形元素 ...
echarts 环形图中间添加html,echarts配置一个中间显示文字的环形图
先贴一张效果图 1.导包我没有用什么框架,直接引入echarts.min.js文件,代码如下: 注意这样引入不要放在header标签里,会阻塞html渲染,导致报错. 2.给echarts一个盒子 ...
echarts 环形图不同区域背景色自定义
app.title = '环形图'; option = { tooltip: { trigger: 'item', formatter: "{a} & ...

echarts环形图内实现自定义添加文字数字和缩放自适应

文章目录

需求场景

实现思路

全部代码示例

echarts环形图内实现自定义添加文字数字和缩放自适应相关推荐

最新文章

热门文章