echarts篇III——带圆角的渐变柱形图

圆角，颜色渐变，x轴为项+百分比

配置如下：

var caseStateNum = [100, 80, 80, 50, 70, 110, 130, 80, 70, 50, 45, 60, 60];
var total = 0;
var caseStateRatio = [];
caseStateNum.map(function(d ,i){
    total += d;
})
caseStateNum.map(function(d,i){
    caseStateRatio.push(parseInt(d/total*100)+'%');
})
var option = {
backgroundColor: '#051c71',
    tooltip: {
        trigger: "axis",
        backgroundColor: 'rgb(11,11,81)',
        padding: [15,30],
        extraCssText: 'box-shadow: 0px 0px 25px 5px rgb(41, 95, 159) inset;border-radius:10px'
   },
    grid: {
        top: '15%',
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
    },
    xAxis: {
  	    type: "category",
      	axisTick: {
      		show: false
      	},
      	axisLabel: {
      		interval: 0,
      		color: '#ddd',
      		fontSize: 14,
      		formatter: function(value, index){
      		   return value+'\n'+caseStateRatio[index];
      		}
      	},
      	axisLine: {
      		lineStyle: {
      			color: "#5475c8"
      		}
      	},
      	data: ["一类", "二类", "三类", "四类", 
      	"五类", "六类", "七类", "八类", "九类", 
      	"十类", "十一类", "十二类", "十三类"]
    },
    yAxis: [{
      	type: "value",
      	name: "单位:(件)",
      	min: 0,
      	axisTick: {
      		show: false
      	},
      	splitLine: {
      	    show: true,
           lineStyle: {
               color: 'rgba(255,255,255,0.2)'
           }  
      	},
      	splitNumber: 5,
      	axisLabel: {
      		show: true,
      		textStyle: {
      			color: "#ddd"
      		}
      	},
      	nameTextStyle: {
      		color: "#ddd"
      	},
      	axisLine: {
      		lineStyle: {
      			color: "#5475c8"
      		}
      	}
    }],
    series: [{
      	name: "数量",
      	type: "bar",
      	barWidth: 15,
      	label: {
      		normal: {
      			show: false,
      			position: "insideRight"
      		}
      	},
      	itemStyle: {
      		normal: {
      			// color: "rgb(249, 153, 139)",
      			color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: 'rgb(253,146,166)'},
                    {offset: 0.5, color: 'rgb(255, 162, 156)'},
                    {offset: 1, color: 'rgb(249, 153, 139)'}
                ]
            ),
      			barBorderRadius: [8, 8, 8, 8]
      		}
      	},
      	data: caseStateNum
    }]
};

效果如下：