echarts屬性真的太太多了 需求也是五花八門的 先記下來
使用graphic屬性
const datas = [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' },{ value: 30, name: 'Video Ads1' },{ value: 36, name: 'hhh Ads1' },{ value: 100, name: 'llll Ads1' }
];
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {renderer: 'canvas',useDirtyRect: false
});
var app = {};var option;option = {tooltip: {trigger: 'item'},legend: {orient: 'vertical',// left: 'right',top: '40%',right: '5%',textStyle: {align: 'left',verticalAlign: 'middle',rich: {name: {color: 'rgba(0,0,0,0.5)',fontSize: 12,},value: {color: 'rgba(0,0,0,0.5)',fontSize: 12,},rate: {color: 'rgba(0,0,0,0.9)',fontSize: 12,},},},formatter: (name) => {if (datas.length) {const item = datas.filter((item) => item.name === name)[0];return `{name|${name} | }{rate| ${item.value/ 100}%} {value| ${item.value}} `;}},},graphic: {type: 'text',left: 'center',top: 'center',style: {// text: '總數',text:'總數' +'\n\n' +datas.reduce((n, i) => {return (n += i.value);}, 0),textAlign: 'center',fill: '#333',width: 30,height: 30,fontSize: 14}},series: [{name: 'Access From',type: 'pie',radius: ['30%', '50%'],avoidLabelOverlap: false,itemStyle: {// borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,position: 'center'},emphasis: {label: {show: false,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data:datas}]
};if (option && typeof option === 'object') {myChart.setOption(option);
}window.addEventListener('resize', myChart.resize);
總結
以上是生活随笔為你收集整理的echarts饼图, 中间显示总数的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
