我想用颤抖填充电子图表雷达图的颜色

时间:2020-05-04 08:12:35

标签: flutter dart graph echarts

我在一个flutter应用程序中使用了电子图表,该图表专门是雷达图,并且其中有2个图表,希望以零透明度不同地填充它们。以下是我正确实现的结果。内部图形为红色,外部图形为绿色,但是由于内置的​​功能,当我填充颜色时,它们会相互覆盖,如下所示。

What I have achieved

What I want to achieve

您可以在屏幕截图中清楚地看到我的问题所在。我正在使用echarts,因此在下面粘贴了负责显示屏幕截图的代码

option: '''
                {
                  grid: {
                    color: '#999',
                    left: '4%',
                    right: '0%',
                    bottom: '0%',
                    top: '14%',
                    height: '85%',
                    containLabel: true,
                    z: 2,
                  },
                  xAxis: [{
                    type: 'category',
                    gridIndex: 0,
                    axisTick: {
                      show: false,
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#0c3b71',
                      },
                    },
                  }],
                  yAxis: {
                    type: 'value',
                    gridIndex: 0,
                    splitLine: {
                      show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#0c3b71',
                      },
                    },
                  },
                  radar:{
                    axisLine: {
                      lineStyle: {
                        color: '#478dd0',
                      },
                    },
                    splitLine: {
                      lineStyle: {
                        color: '#478dd0',
                      },
                    },
                    shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 3,
                            padding: [3, 5]
                        },
                    },
                    indicator: [
                        { name: 'Sales', max: 6500},
                        { name: 'Admin', max: 16000},
                        { name: 'IT', max: 30000},
                        { name: 'Customer Support', max: 38000},
                        { name: 'Development', max: 52000},
                        { name: 'Market', max: 25000}
                    ]
                  },
                  series: [{
                    name: '合格率',
                    type: 'radar',
                    areaStyle: {}, //this makes the graphs translucent, giving                         
                                   opacity to this element makes the graph change
                    data: [
                      {
                          value: [1500, 4000, 22000, 5000, 35000, 13000],
                          name: '预算分配(Allocated Budget)',
                          itemStyle: {
                            color: '#E93F33' //this color is red
                          }
                      },
                      {
                          value: [5000, 14000, 28000, 31000, 42000, 21000],
                          name: '预算分配(Allocated Budget)',
                          itemStyle: {
                            color: '#54c19f' //this color is green
                          }
                      }
                    ]
                  },],
                }
              ''',

非常感谢您提供任何帮助。

0 个答案:

没有答案