echarts柱状图自定义样式（一）

在最近业务开展过程中，涉及到highcharts和echarts的图表数据展示颇多，后UI设计师根据数据展示要求设计出花里胡哨的图表样式，正好最近也来研究一下，后续会补几篇相关博文。废话也不多说，先上效果：

以下为实例代码（可直接复制至echarts官网查看效果）

option = {
        grid: {
        left: '-5%',
        right: '7%',
        bottom: '3%',
        top:'7%',
        containLabel: true
    },
    xAxis: {
        type: 'category',// x轴写为value Y轴写为category为横向
        axisLine:{
            show:false // 是否显示坐标轴
        },
        axisTick: {
            show: false  //是否显示坐标轴刻度
        },
        splitLine:{show: false},//去除网格线
        data: ['手术室', '手术室', '手术室', '手术室', '手术室', '手术室', '手术室', '手术室', '手术室', '手术室']
    },
    yAxis: {
        type: 'value',
        show:false
    },
    series: [{
        type: 'bar',
        color:'#3f9ed4',
        barWidth:'25',
        label:{ // 数据标签
            show:true,
            position: 'insideTop' ,
            backgroundColor:'#fff',
            padding:10,
            borderRadius :10,
            formatter:''
        },
        itemStyle:{
            barBorderRadius:15
        },
        markPoint:{ // 标记的图形
            symbol:'pin',
            itemStyle: {
                borderWidth: 3 ,
            },
            label:{
                color:'#000',
            },
            data: [
                {
                    value:210,
                    itemStyle: {
                        borderColor: "#0ea8ff" ,
                        color:'#fff'
                    },
                    coord: [0, 215]
                },{
                    value:190,
                    itemStyle: {
                        borderColor: "#ed5162" ,
                        color:'#fff'
                    },
                    coord: [1, 195]
                },{
                    value:180,
                    itemStyle: {
                        borderColor: "#ff8f28" ,
                        color:'#fff'
                    },
                    coord: [2, 185]
                },{
                    value:170,
                    itemStyle: {
                        borderColor: "#feaf03" ,
                        color:'#fff'
                    },
                    coord: [3, 175]
                },{
                    value:160,
                    itemStyle: {
                        borderColor: "#34b2e4" ,
                        color:'#fff'
                    },
                    coord: [4, 165]
                },{
                    value:150,
                    itemStyle: {
                        borderColor: "#62d3dc" ,
                        color:'#fff'
                    },
                    coord: [5, 155]
                },{
                    value:140,
                    itemStyle: {
                        borderColor: "#6cdabd" ,
                        color:'#fff'
                    },
                    coord: [6, 145]
                },{
                    value:130,
                    itemStyle: {
                        borderColor: "#915fbe" ,
                        color:'#fff'
                    },
                    coord: [7, 135]
                },{
                    value:120,
                    itemStyle: {
                        borderColor: "#d06083" ,
                        color:'#fff'
                    },
                    coord: [8, 125]
                },{
                    value:110,
                    itemStyle: {
                        borderColor: "#7e74ff" ,
                        color:'#fff'
                    },
                    coord: [9, 115]
                }
            ]
        },
        data: [210, 190, 180, 170, 160, 150, 140, 130, 120, 110],
    }]
}