增加了顯示比例，顯示內容

顯示比例代碼顯示完整代碼：

series: [{name:'訪問來源',type:'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {normal: {formatter: '{b}:{c}' + 'nr' + '(ozvdkddzhkzd%)',show: true,position: 'left'},emphasis: {show: true,textStyle: {fontSize: '30',fontWeight: 'bold'}}},labelLine: {normal: {show: true}},data:[{value:335, name:'直接訪問'},{value:310, name:'郵件營銷'},{value:234, name:'聯盟廣告'},{value:135, name:'視頻廣告'},{value:1548, name:'搜索引擎'}]}] 具體添加的代碼就是： formatter: '{b}:{c}' + 'nr' + '(ozvdkddzhkzd%)', //增加了格式

如果要增加餅圖的橫線，則把橫線標簽設置為true即可:

labelLine: {normal: {show: true}},

原圖

效果圖

另外對于{a} {b} {c} ozvdkddzhkzd變量的解釋：

{a} <br/>{b}: {c} (ozvdkddzhkzd%)"//模板變量有 {a}、{b}、{c}、ozvdkddzhkzd，分別表示系列名，數據名，數據值，百分比;

如果要修改圖形的顏色則增加與以下代碼：color

tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: (ozvdkddzhkzd%)"},color:['red', 'green','yellow','blueviolet'],legend: {

如圖希望圖例不顯示，則增加代碼：show: false，如下：

legend: {show: false,orient: 'vertical',x: 'right',data:['男','女']},

更改圖例，加入代碼：icon，具體代碼如下：

legend: {icon: 'circle',orient: 'vertical',left: 'left',data: ['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']},

另外還支持以下圖形：

標志圖形類型，默認自動選擇（8種類型循環使用，不顯示標志圖形可設為'none'），默認循環選擇類型有： 'circle' | 'rectangle' | 'triangle' | 'diamond' | 'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' 另外，還支持五種更特別的標志圖形'heart'（心形）、'droplet'（水滴）、'pin'（標注）、'arrow'（箭頭）和'star'（五角星），這并不出現在常規的8類圖形中，但無論是在系列級還是數據級上你都可以指定使用，同時，'star' + n（n>=3)可變化出N角星，如指定為'star6'則可以顯示6角星 自1.3.5起支持symbol為自定義圖片，格式為'image://' + '圖片路徑'， 如'image://../asset/ico/favicon.png'

原圖

效果圖

更改圖例位置：增加以下代碼：

orient: 'horizontal',//水平方向left: 'center',bottom:"bottom",

legend的具體參數信息如下：

legend={show:true, //是否顯示zlevel:0, //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面z:2, //所屬組件的z分層，z值小的圖形會被z值大的圖形覆蓋left:"center", //組件離容器左側的距離,'left', 'center', 'right','20%'top:"top", //組件離容器上側的距離,'top', 'middle', 'bottom','20%'right:"auto", //組件離容器右側的距離,'20%'bottom:"auto", //組件離容器下側的距離,'20%'width:"auto", //圖例寬度height:"auto", //圖例高度orient:"horizontal", //圖例排列方向align:"auto", //圖例標記和文本的對齊,left,rightpadding:5, //圖例內邊距，單位px 5 [5, 10] [5,10,5,10]itemGap:10, //圖例每項之間的間隔itemWidth:25, //圖例標記的圖形寬度itemHeight:14, //圖例標記的圖形高度formatter:function (name) { //用來格式化圖例文本，支持字符串模板和回調函數兩種形式。模板變量為圖例名稱 {name}return 'Legend ' + name;},selectedMode:"single", //圖例選擇的模式,true開啟,false關閉,single單選,multiple多選inactiveColor:"#ccc", //圖例關閉時的顏色textStyle:mytextStyle, //文本樣式data:['類別1', '類別2', '類別3'], //series中根據名稱區分backgroundColor:"transparent", //標題背景色borderColor:"#ccc", //邊框顏色borderWidth:0, //邊框線寬shadowColor:"red", //陰影顏色shadowOffsetX:0, //陰影水平方向上的偏移距離shadowOffsetY:0, //陰影垂直方向上的偏移距離shadowBlur:10, //陰影的模糊大小 };

原圖

效果圖

更多源代碼可以關注我個人公眾號：隨記草堂

總結

以上是生活随笔為你收集整理的echarts柱状图显示百分比_Echarts 饼状图显示信息,内容,值,百分比都显示的代码 更改图例等问题汇总...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。