HTML饼状图中心添加文字,echarts饼状图环形中间动态文字
let currName = "";
let myChart= echarts.getInstanceByDom(document.getElementById(‘chart-panel‘));//console.log(myChart);
myChart.on(‘mouseover‘, (params) =>{
currName=params.name;
console.log(params)
let op=myChart.getOption();
let _label={
normal:{
show:true,
position:‘center‘,
formatter: [
`{a|${params.name}}`,
`{b|${params.percent + "%"}}`
].join(‘\n‘),
rich: {
a: {
color:‘#fff‘,
fontSize:18,
lineHeight:30},
b: {
color:‘blue‘,
fontSize:20,
foneWeight:‘bold‘,
},
}
}
}if(params.seriesIndex === 1){
_label.normal.formatter= [‘zhiliang‘].join(‘\n‘)
}
op.series[0].label =_label;
myChart.setOption(op,true)
})
option={
tooltip: {
trigger:‘item‘,
formatter:‘{a}
{b}: {c} (ozvdkddzhkzd%)‘},
legend: {
orient:‘vertical‘,
right:10,
top:20,
bottom:20,
data: [‘直接訪問‘, ‘郵件營銷‘, ‘聯盟廣告‘, ‘視頻廣告‘, ‘搜索引擎‘]
},
color : [‘red‘, ‘orange‘, ‘yellow‘, ‘green‘, ‘blue‘, ‘indigo‘, ‘purple‘],
series: [
{
name:‘訪問來源‘,
type:‘pie‘,
radius: [‘50%‘, ‘70%‘],
avoidLabelOverlap:false,
label: {
normal:{
show:true,
position:‘center‘,
formatter: [‘zhiliang‘].join(‘\n‘),
rich: {
a: {
color:‘#fff‘,
fontSize:18,
lineHeight:30},
b: {
color:‘yellow‘,
fontSize:20,
foneWeight:‘bold‘,
textShadowBlur:20,
textShadowColor:‘yellow‘},
}
}
},
labelLine: {
normal: {
show:false}
},
data: [
{value:335, name: ‘直接訪問‘,color:"#cccccc"},
{value:310, name: ‘郵件營銷‘},
{value:234, name: ‘聯盟廣告‘},
{value:135, name: ‘視頻廣告‘},
{value:1548, name: ‘搜索引擎‘}
]
},
{
name:‘邊框1‘,
type:‘pie‘,
hoverAnimation:false,
radius:[‘75%‘, ‘75%‘],
labelLine:{
normal:{
show:false}
},
itemStyle:{
normal:{
borderWidth:1,
borderColor:"#ffffff",
opacity:0}
},
data: [
{
value:100,
tooltip:{
show:false}
}
]
},
]
};
總結
以上是生活随笔為你收集整理的HTML饼状图中心添加文字,echarts饼状图环形中间动态文字的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python决策树的应用_机器学习-决策
- 下一篇： 2017年html5行业报告,云适配发布