Echarts 饼状图自定义颜色

 

今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码
 $.ajax({
            url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx",
            data: { method: "QuanShiDuanMianShuiZhiLeiBieTongJi" },
            dataType: "json",
            cache: false,
            success: function (data) {
                if (data.length > 0) {
                    echarts.init(document.getElementById('WaterCategoryStatistics')).setOption({
                        legend: {
                            orient:'vertical',
                            left:'left',
                            data: ['II', 'III', 'IV', 'V', '劣V']
                        },

                        series: {
                            left:'center',//离容器左侧的距离
                            top: 'top',//距离容器上测的距离
                            center: ['50%', '50%'],
                            radius: '85%',
                            type: 'pie',
                            data: [
                                { name: 'II', value: data[0].CNT },
                                { name: 'III', value: data[1].CNT },
                                { name: 'IV', value: data[2].CNT },
                                { name: 'V', value: data[3].CNT },
                                { name: '劣V', value: data[4].CNT },
                            ],

                            itemStyle: {
	        	                 emphasis: {
	        	                     shadowBlur: 10,
	        	                     shadowOffsetX: 0,
	        	                     shadowColor: 'rgba(0, 0, 0, 0.5)'
	        	                  },
			                     normal:{
		    	                     color:function(params) {
		    	                     //自定义颜色
		    	                     var colorList = [           
                                             '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
		    	                         ];
		    	                         return colorList[params.dataIndex]
		    	                      }
		    	                 }
	                       }
                        }
                    });
                }
            }
        });

  

效果图

 

 

 

posted @ 2018-10-19 15:58  Felix-Zhang  阅读(57613)  评论(5编辑  收藏  举报