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);