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

      

    效果图

     

  • 相关阅读:
    五、批量插入
    四、操作BLOB类型字段
    三、使用PreparedStatement实现CRUD操作
    二、获取数据库连接
    一、JDBC概述
    最短平均码长(挑出假硬币问题的解法)
    信息量和信息熵
    洛谷P2114
    Servlet续(HttpServletRequest类和HttpServletResponse类)
    Servlet
  • 原文地址:https://www.cnblogs.com/zhangxiaoxia/p/9816971.html
Copyright © 2011-2022 走看看