zoukankan      html  css  js  c++  java
  • 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]
    		    	                      }
    		    	                 }
    	                       }
                            }
                        });
                    }
                }
            });
    

      

    效果图

     

  • 相关阅读:
    POJ
    POJ
    HDU-3374 String Problem (最小最大表示法)
    HDU-2328 Corporate Identity (暴力)
    HDU-1238 Substrings (kmp)
    kmp处理题型总结
    Numpy用户指南
    Docker 容器连接
    Docker 镜像使用
    docker容器的使用
  • 原文地址:https://www.cnblogs.com/zhangxiaoxia/p/9816971.html
Copyright © 2011-2022 走看看