echarts的各种样式配置

项目中使用到echarts时需要对图标样式做个性化定制，在此记录各种样式的设置组合

样式一：普通柱状图 + 数值跟随 + 整体颜色调整

var options = {
    title:{
        show:false
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow"
        }
    },
    grid:{
        left:"10%",
        right:0,
        top:"7%",
        bottom:"14%",
    },
    xAxis: {
        type: 'category',
        axisLabel:{
            align:"center",
            interval:0,
            fontSize:10
        },
        data:[]
    },
    yAxis: {
        type: 'value',
        max: function(val) {
            return (parseInt(val.max/10) + 2) * 10;
        },
        splitLine: {
            lineStyle:{
                color: '#102570'
            }
        },
    },
    series: [
        {
            data: [],
            type: 'bar',
            barWidth:"30%",
            color:["#24c768"],
            label: {
                show: true,
                position: 'top',
                fontSize: 12,
                color:"#888cad"
            }
        }
    ]
}

样式二：普通柱状图 + 分类标题缩略 + 整体颜色调整

var options = {
    title:{
        show:false
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow"
        }
    },
    grid:{
        left:"10%",
        right:0,
        top:"5%",
        bottom:"11%",
    },
    xAxis: {
        type: 'category',
        axisLabel:{
            align:"center",
            interval:0,
            fontSize:10,
            lineHeight: 12,
            width:50,
            overflow:"truncate"
        },
        data:[]
    },
    yAxis: {
        type: 'value',
        interval: 2,
        max: function(val) {
            return (parseInt(val.max/10) + 1) * 10;
        },
        splitLine: {
            lineStyle:{
                color: '#102570'
            }
        },
    },
    series: [
        {
            data: [],
            type: 'bar',
            barWidth:"40%",
            color:["#00d9fe"],
        }
    ]
}

样式三：横向柱状图 + 分类显示在数值上方 + 数值显示在最右边 + 各数值分别调整颜色

var options = {
    title:{
        show:false
    },
    grid:{
        left:"0%",
        right:"0%",
        top:"8%",
        bottom:"-12%",
    },
    xAxis: {
        type: 'value',
        axisLabel:{
            show:false
        },
        splitLine: {
            show:false
        },
    },
    yAxis: {
        type: 'category',
        interval: 0,
        inverse:true,
        axisLabel:{
            inside:true,
            align:"left",
            margin:2,
            verticalAlign:"bottom",
            interval:0,
            color:"#fff",
            fontSize:12,
            lineHeight:29
        },
        axisLine:{
            show:false
        },
        axisTick:{
            show:false
        },
        splitLine: {
            show:false
        },
    },
    series: [
        {
            data: [],
            type: 'bar',
            colorBy:"data",
            color:["#21e1f6","#3be012","#d8d610"],
            barWidth:"25%",
            label: {
                show: true,
                fontSize: 12,
                offset:[0,-18],
                color:"#00dafb"
            },
            labelLayout:{
                x: "99%",
                align:"right",
            },
            showBackground:true,
            backgroundStyle:{
                color:"rgba(0, 0, 0, 0.2)",
                borderRadius:[5,5,5,5]
            },
            itemStyle:{
                borderRadius:[5,5,5,5]
            }
        }
    ]
}