echarts饼图直观显示数值最实用的方式
默認:echarts餅圖直接顯示數值(如圖 無需光標懸空觸發)
?
var optionOne = {
?? ??? ??? ? ? ?title : {
?? ??? ??? ? ? ? ? ?text: '開通渠道餅圖',
?? ??? ??? ? ? ? ? ?subtext: '',
?? ??? ??? ? ? ? ? ?x:'center'
?? ??? ??? ? ? ?},
?? ??? ??? ? ? ?tooltip : {
?? ??? ??? ? ? ? ? ?trigger: 'item',
?? ??? ??? ? ? ? ? ?formatter: "{a} <br/>{b} : {c} (ze8trgl8bvbq%)"
?? ??? ??? ? ? ?},
?? ??? ??? ? ? ?legend: {
?? ??? ??? ? ? ? ? ?orient : 'horizontal',
?? ??? ??? ? ? ? ? ?x : 'center',
?? ??? ??? ? ? ? ? ?y : 'bottom',
?? ??? ??? ? ? ? ? ?data:['xxxxAPP','xxxx微信端','xxxxAPP','xxxAPP','xxx機頂盒']
?? ??? ??? ? ? ?},
?? ??? ??? ? ? ?toolbox: {
?? ??? ??? ? ? ? ? ?show : true,
?? ??? ??? ? ? ? ? ?feature : {
?? ??? ??? ? ? ? ? ? ? ?mark : {show: true},
?? ??? ??? ? ? ? ? ? ? ?dataView : {show: true, readOnly: false},
?? ??? ??? ? ? ? ? ? ? ?magicType : {
?? ??? ??? ? ? ? ? ? ? ? ? ?show: true,?
?? ??? ??? ? ? ? ? ? ? ? ? ?type: ['pie', 'funnel'],
?? ??? ??? ? ? ? ? ? ? ? ? ?option: {
?? ??? ??? ? ? ? ? ? ? ? ? ? ? ?funnel: {
?? ??? ??? ? ? ? ? ? ? ? ? ? ? ? ? ?x: '25%',
?? ??? ??? ? ? ? ? ? ? ? ? ? ? ? ? ?width: '50%',
?? ??? ??? ? ? ? ? ? ? ? ? ? ? ? ? ?funnelAlign: 'left',
?? ??? ??? ? ? ? ? ? ? ? ? ? ? ? ? ?max: 1548
?? ??? ??? ? ? ? ? ? ? ? ? ? ? ?}
?? ??? ??? ? ? ? ? ? ? ? ? ?}
?? ??? ??? ? ? ? ? ? ? ?},
?? ??? ??? ? ? ? ? ? ? ?restore : {show: true},
?? ??? ??? ? ? ? ? ? ? ?saveAsImage : {show: true}
?? ??? ??? ? ? ? ? ?}
?? ??? ??? ? ? ?},
?? ??? ??? ? ? ?calculable : true,
?? ??? ??? ? ? ?series : [
?? ??? ??? ? ? ? ? ?{
?? ??? ??? ? ? ? ? ? ? ?name:'',
?? ??? ??? ? ? ? ? ? ? ?type:'pie',
?? ??? ??? ? ? ? ? ? ? ?radius : '65%',
?? ??? ??? ? ? ? ? ? ? ?center: ['50%', '50%'],
?? ??? ??? ? ? ? ? ? ? ?/* label: {
?? ??? ??? ? ? ? ? ? ? ??? ?normal: {
?? ??? ??? ? ? ? ? ? ? ??? ?show: true,
?? ??? ??? ? ? ? ? ? ? ??? ?formatter: '{b}: {c}(ze8trgl8bvbq%)'},
?? ??? ??? ? ? ? ? ? ? ??? ?textStyle : {
?? ??? ??? ??? ? ? ? ? ? ? ??? ?fontWeight : 'normal',
?? ??? ??? ??? ? ? ? ? ? ? ??? ?fontSize : 15
?? ??? ??? ? ? ? ? ? ? ??? ?},labelLine :{show:true}
?? ??? ??? ? ? ? ? ? ? ?}, */
?? ??? ??? ? ? ? ? ? ? ?itemStyle:{?
?? ??? ??? ??? ??? ? ? ? ? ?normal:{?
?? ??? ??? ??? ??? ? ? ? ? ? ? label:{?
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ?show: true,?
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ?formatter: '{b} : {c} (ze8trgl8bvbq%)'?
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ?},?
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ?labelLine :{show:true}?
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ?}?
?? ??? ??? ??? ??? ? ? ? ? ? },
?? ??? ??? ? ? ? ? ? ? ?data:[
?? ??? ??? ? ? ? ? ? ? ? ? ?{value:500, name:'xxxAPP'},
?? ??? ??? ? ? ? ? ? ? ? ? ?{value:400, name:'xxxx微信端'},
?? ??? ??? ? ? ? ? ? ? ? ? ?{value:300, name:'xxxxAPP'},
?? ??? ??? ? ? ? ? ? ? ? ? ?{value:200, name:'xxxAPP'},
?? ??? ??? ? ? ? ? ? ? ? ? ?{value:100, name:'xxx頂盒'}
?? ??? ??? ? ? ? ? ? ? ?]
?? ??? ??? ? ? ? ? ?}
?? ??? ??? ? ? ?]
?? ??? ??? ?};
?? ? ? ?//4.設置加載動畫(非必須)
?? ? ? //VisOneEchart.showLoading(); //數據加載完之前先顯示一段簡單的loading動畫?? ? ? ? ? ? ? ? ? ? ? ?
?? ? ? VisOneEchart.setOption(optionOne);
?
?
?
?
?
?
總結
以上是生活随笔為你收集整理的echarts饼图直观显示数值最实用的方式的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 基于STM32F103单片机的智能婴儿床
- 下一篇: 聊聊 iframe 的优缺点以及使用场景