echarts-柱状图实现正负坐标倒圆角设置及bar颜色设置

需求

1.每根bar正负坐标倒圆角
2.每根bar颜色渐变
3.每根bar透明度不同，当factor_rank这个值小于50%，则透明度为0.4

实现

主要是根据series-bar中的data它能进行个性化定义，所以我们可以在我们传给echarts的data添加itemStyle这个属性,这样我们每一根bar都有自己独有的样式

const obj ={
	          name: "动量",
	          value: 20,
	          // echarts对个别数据记性个性化设置
	          itemStyle: {
	          // 颜色设置渐变
	            color: new echarts.graphic.LinearGradient(
	              0,
	              0,
	              0,
	              1,
	              [
			          {
			            offset: 0,
			            color: "#ee2f79"
			          },
			          {
			            offset: 1,
			            color: "#f46a6a"
			          }
			        ]
	            ),
	            // 给bar设置倒角
	            barBorderRadius:
	              obj.value > 0
	                ? [15, 15, 0, 0]
	                : [0, 0, 15, 15],
	            // 给bar设置透明度
	            opacity: obj.value >= 50 ? 1 : 0.4
	          }
	        }
	        // 将obj添加到data中,数据有多个，我只弄了一个
	        data.push(obj)

// 在echarts的配置中
series: [
          {
            type: "bar", //设置类型为柱状图
            barWidth: 30, //柱子的宽度
            data: data // 上面那个js的data
          }
        ]

展示效果

拓展

echarts.graphic.LinearGradient
有5个参数，其中, 前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始.
第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color不用多说肯定是表示颜色了.