前端經常會用到圖示，本人用到的不多，但是積累下來也能慢慢了解它的規律，看懂它的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);