native-echarts:柱状图渐变,圆角矩形

1、需求：

1. 柱状图的item填充色为渐变
2. 柱状图的item上顶角为圆角矩形

ui给出的设计图：

官网直接有示例，官网给出的代码：

rn中引入的是native-echarts,直接按照官网的例子写，new echarts.graphic.LinearGradient{}报错，
打印出来new echarts.graphic.LinearGradient:

2、解决：

直接定义，不用new

  series: [
                {
                    name: '用电量',
                    type: 'bar',
                    data: data,
                    barWidth: AppViewSize(25), // 柱的宽度
                    itemStyle: {
                    
                        // 一定要加normal,否则设置的color属性不生效，
                        // native-echarts设置的很多属性不生效，但是在外面包一层normal就可能生效
                        normal:{ 
                        
                            // 柱状图：圆角矩形
                            // 方向：左上、右上、右下、左下
                            barBorderRadius: [15, 15, 0, 0], 
                            color:  {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#657BC3' }, // 0% 处的颜色 
                                    { offset: 0.5, color: '#3598FD' }, // 50% 处的颜色 
                                    {offset: 1, color: '#3598FD' }, // 100% 处的颜色
                                ],
                                global: false // 缺省为 false
                            },
                            
                            
                        }, 
                    },
                }
            ]

3、效果图

木木模拟器效果图：

注意：

• native-echarts：series有一些属性直接按照echarts官网文档写，有些样式不生效，可以在要设置的属性外面再套上一层normal试试