Echarts 饼状图自定义颜色

 

1
今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
$.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 @   Felix-Zhang  阅读(57615)  评论(5编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示