echarts饼图中间文字,固定,改成自己想要的值

echarts饼图中间文字,固定,改成自己想要的值

(仅供自己参考)

中间是可以放两行文字的,一行是自己计算的比例,还可以放一个如:(这里就不多描述了上面的文字是在titletop中设置的可以看看echarts API的配置项)

设置主标题副标题,通过x轴和y轴控制再通过top定位就ok了下面的比例调整下位置就行

改动注意点

这个地方也可以加入字体展示

效果展示代码代码语言:javascript代码运行次数:0运行复制 let option = {

title: {

text: '主标题',

// 副标题

subtext: "50%",

// 主副标题间距

itemGap: 40,

x: 'center',

y: 'center',

top: '280',

// 主标题样式

textStyle: {

fontSize: '20',

color: 'black'

},

// 副标题样式

subtextStyle: {

fontSize: '20',

fontWeight: '800',

color: 'black'

}

},

legend: {

data: ['直接访问', '邮件营销']

},

series: [

{

name: '访问来源',

type: 'pie',

radius: ['50%', '70%'],

avoidLabelOverlap: false,

label: {

show: false,

position: 'center'

},

// 自定义中心内容的话需要把这个关闭

emphasis: {

label: {

show: false,

fontSize: '30',

fontWeight: 'bold'

}

},

labelLine: {

show: false

},

data: [

{

value: 335, name: '直接访问'},

{

value: 310, name: '邮件营销'},

]

}

]

} Jetbrains全家桶1年46,售后保障稳定

echarts 添加点击事件记录代码语言:javascript代码运行次数:0运行复制title. triggerEvent boolean

是否触发事件。

(在title中设置此属性为true,在监听就可以打印出以下属性)代码语言:javascript代码运行次数:0运行复制 myChart.on('click', (params) => {

console.log(params)

})

加上triggerEvent 属性后发现所有的都可以点击没往下细看,可以根据componentType属性来判断点击的是不是title

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/200916.html原文链接:https://javaforall.cn

相关推荐

阿胶不能随便吃吗?医生建议:这5类人,平时尽量少吃,要听劝
京东七天无理由退换货规则在哪看?流程是什么?
365bet足球直播

京东七天无理由退换货规则在哪看?流程是什么?

⌛ 09-18 👁️ 1007
5大高效员工任务分配技巧:如何激发团队潜能?
日月同辉的意思、近义词、反义词、造句
365-002 bet

日月同辉的意思、近义词、反义词、造句

⌛ 07-13 👁️ 2335
春日负暄的小说作品集
365bet在线足球开户

春日负暄的小说作品集

⌛ 08-28 👁️ 1986
世界杯预测分析丹麦vs澳大利亚,世界杯预测分析丹麦vs澳大利亚比分