餅圖

基礎餅圖配置

var chartDom=document.getElementById("pie");
var myChart=echarts.init(chartDom);
var option;
option = {
  title: {
    text: '主標題',
    textStyle: {
      fontSize: 20,
      fontStyle: 'oblique',
      fontWeight: 'bolder',
      color: 'red'
    },
    subtext: '副標題',
    subtextStyle: {
      fontSize: 16,
      fontStyle: 'normal',
      fontWeight: 'bolder',
      color: 'blue'
    },
    left: '10%',
    top: '30%'
  },
  legend: {
    data: ['pie1', 'pie2', 'pie3', 'pie4', 'pie5', 'pie6', 'pie7', 'pie8']
  },
  series: [
    {
      type: 'pie',
      label: {//餅圖圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等
        show: false,//預設為true
      },
      data: [
        { name: 'pie1', value: 65 },
        { name: 'pie2', value: 60 },
        { name: 'pie3', value: 55 },
        { name: 'pie4', value: 50 },
        { name: 'pie5', value: 40 },
        { name: 'pie6', value: 35 },
        { name: 'pie7', value: 30 },
        { name: 'pie8', value: 25 }
      ]
    }
  ]
};
option & myChart.setOption(option);
 

效果圖

南丁格爾玫瑰圖

改動基礎程式碼如下：

series:[
  {  
     type:"pie",
     label:{
        show:true,
      },
      radius:[40,120],//陣列的第一項是內半徑，第二項是外半徑。
      itemStyle:{
        borderRadius:10//圓角半徑
      },
      roseType:"area",//扇區圓心角相同，只通過半徑比大小
      //roseType:"radius",//扇區圓心角展現資料的百分比，半徑展現資料的大小
      data: [.....]
  },
]
 

效果圖

環形圖

改動基礎餅圖配置如下：

series: [
    {
      type: 'pie',
      label:{
        show:false,
      },
      radius:[40,80],//陣列的第一項是內半徑，第二項是外半徑。
      data: [.....]
    }
  ]

效果圖：

圓角環形圖

改動基礎程式碼如下

series:[
    {
      type: 'pie',
      label:{
        show:false,
      },
      radius:[40,80],//陣列的第一項是內半徑，第二項是外半徑。
      itemStyle:{
        borderRadius:10,//圓角半徑
        borderWidth:5,
        borderColor:"#fff"
      },
      data: [.....]
    }
  ]

 

效果圖