echarts自定義餅圖

前端經常會用到圖示，本人用到的不多，但是積累下來也能慢慢了解它的規律，看懂它的API，今天就積累了一類餅圖，用到的知識點當然還是官方文檔的配置，有時間可以結合執行個體去看一下

祝大家越來越進步

Echarts官方文檔的配置項：http://www.echartsjs.com/option.html#series

實作效果

今天的餅圖實作漸變色和資料背景色的添加及餅圖對應的名稱

實作步驟

var option_1 = {
	//餅圖名的名稱、位置及樣式
	title: {
	    text: 'USDJPY',
	    x:'center',
	    y:'bottom',
	    textStyle: {
	        color:'#7E7E7E',
	        fontSize:'16',
	        fontWeight:'normal',
	    }
	},
	//提示框的樣式、提示框顯示什麼資料
	tooltip: {
	    show:true,
	    trigger: 'item',
	    //有a,b,c,d四種
	    //a代表系列名稱(在這裡就是USDJPY)，b代表資料項名稱(在這裡就是上漲或下跌)，
	    //c代表資料(在這裡就是335或310)，
	    //d代表資料項所占的百分比數(在這裡就是40.04或59.96，要顯示百分比樣子要自己加百分号)
	    formatter: "{d}%",
	    padding:[10, 10],
	    backgroundColor:'#FFFFFF',
	    textStyle:{
	        color:'#333',
	        fontSize:'16',
	    },
	},
	//系列清單
	series: [
	    {
	        name:'USDJPY',
	        //圖示類型，pie是餅圖
	        type:'pie',
	        //内外半徑
	        radius: ['50%', '90%'],
	        //是否啟用防止标簽重疊政策,預設是true，一般圓環圓設為false
	        avoidLabelOverlap: false,
	        //餅圖圖形上的文本标簽(在這裡是上漲或下跌)是否在中心環中顯示
	        label: {
	            normal: {
	                show: false,
	                position: 'center'
	            },
	            emphasis: {
	                show: false,
	                textStyle: {
	                    fontSize: '10',
	                    fontWeight: 'bold'
	                }
	            }
	        },
	        //系列中的資料内容數組
	        data:[{
	        	//資料值
	            value:335,
	            //資料項名稱
	            name:'上漲',
	            //圖形樣式
	            itemStyle:{
	                normal:{
	                    show:true,
	                    borderColor:'#F6F7FB',
	                    borderWidth:10,
	                    //漸變色，一共五個參數，前四個0,0,0,1代表漸變色從正上方開始
	                    //第5個參數則是一個數組, 用于配置顔色的漸變過程; 每一項為一個對象, 包含offset和color兩個參數. offset的範圍是0 ~ 1, 用于表示位置, color不用多說肯定是表示顔色了. 像示例代碼的配置則表示:
	                    color: new echarts.graphic.LinearGradient(
	                        0, 0, 0, 1,
	                        [
	                            {offset: 0, color: '#A949DE'},
	                            {offset: 1, color: '#5341A0'}
	                        ]
	                    ),
	                },
	            },
	        },{
	            value:310,
	            name:'下跌',
	            //定義資料項的樣式
	            itemStyle:{
	                normal:{
	                    show:true,
	                    borderColor:'#F6F7FB',
	                    borderWidth:10,
	                    color: new echarts.graphic.LinearGradient(
	                        0, 0, 0, 1,
	                        [
	                            {offset: 0, color: '#79E6F6'},
	                            {offset: 1, color: '#59C2F5'}
	                        ]
	                    ),
	                },
	            },
	        }]
	    }
	]
};
var dom = document.getElementById("pie_1");
var myChart = echarts.init(dom);
myChart.setOption(option_1, true);