echarts 柱形图

 

 代码如下：

function mychart3() {
    myChart3 = echarts.init(document.getElementById('profitIncome'));
    var xData = ["境内", "境外"]
    var line = ["2942", "1834"];
    var attr ={
        'name':'月平均单价',
        'unit':'元/单'
    }
    var max =Math.max.apply(null,line);
    var maxnum=max+1000;
    // console.log(maxnum)
    var colors = []
    option = {
        // tooltip: {
        //     trigger: 'item',
        //     padding: 1,
        //     formatter: function(param) {
        //         var resultTooltip =
        //             "<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
        //             "<div style='text-align:center;'>" +  param.name + "</div>" +
        //             "<div style='padding-top:5px;'>"+
        //             "<span style=''> " +attr.name + ": </span>" +
        //             "<span style=''>" + param.value + "</span><span>" + attr.unit + "</span>"+
        //             "</div>" +
        //             "</div>";
        //         return resultTooltip
        //     }
        // },
        grid: {
            left: '15%',
            top: '20%',
            right: '8%',
            bottom: '25%',
        },
        legend: {
            show: true,
            icon: 'circle',
            orient: 'horizontal',
            top: '90.5%',
            right: 'center',
            itemWidth: 16.5,
            itemHeight: 6,
            // itemGap: 30,
            textStyle: {
                // color: '#FFFFFF'
                color: '#C9C8CD',
                fontSize: 14
            }
        },
        xAxis: [{
            // show:false,
            data: ["境内", "境外"],
            triggerEvent:true,//设置坐标点击事件
            axisLabel: {
                color: '#77C8FF',
                fontSize: 12,
                height:40,
                lineHeight:40
            },
            axisLine: {
                show: false //不显示x轴
            },
            axisTick: {
                show: false //不显示刻度
            },
            boundaryGap: true,
            splitLine: {
                show: false,
                width: 0.08,
                lineStyle: {
                    type: "solid",
                    color: "#03202E"
                }
            }
        }],
        yAxis: [{
            // max: maxnum,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#0C57A9',
                    type: 'dotted'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle:{
                    color:"#2A6FDA",
                    type:"dotted",
                    width:'2'
                }
            },
            axisLabel: {
                color: '#4F88BD',
                fontSize: 12,
                textStyle: {
                    // color: '#888'
                },
            },
        }],
        series: [
            {//柱底圆片
                name: "",
                type: "pictorialBar",
                symbolSize: [46, 10],//调整截面形状
                symbolOffset: [0, 5],
                z: 12,
                itemStyle: {
                        normal: {
                            color: function(params){
                                var a = params.name.slice(0,2);
                                if(a === '境内'){
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "rgba(21, 106, 199, 0.4)"
                                    },{
                                        offset: 1,
                                        color: "rgba(55, 130, 211, .5)"
                                    }], false)
                                }else if(a === '境外'){
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(0, 203, 159, 0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color:  'rgba(0, 203, 159, 0.7)'// 100% 处的颜色
                                    }], false)
                                }
                            },
                            label:{
                                show:true,
                                position:'top',
                                padding:[0,0,5,0],
                                backgroundColor:"transparent",
                                color:"#77C8FF"
                            },
                        },
                    },
                data: line
            }, 
            //柱体
            {
                name: '',
                type: 'bar',
                barWidth: 46,
                barGap: '0%',
                itemStyle: {
                        normal: {
                            color: function(params){
                                var a = params.name.slice(0,2);
                                if(a === '境内'){
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "rgba(33, 109, 196, 1)"
                                    },{
                                        offset: 1,
                                        color: "rgba(29, 95, 176, 0.3)"
                                    }], false)
                                }else if(a === '境外'){
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color:  'rgba(0, 203, 159, 1)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 203, 159, 0.3)' // 100% 处的颜色
                                    }], false)
                                }
                            },
                        }
                    },
                data: line
            }, 
            //柱顶圆片
            {
                name: "",
                type: "pictorialBar",
                symbolSize: [46, 10],//调整截面形状
                symbolOffset: [0, -5],
                z: 12,
                symbolPosition: "end",
                itemStyle: {
                    normal: {
                        color: function(params){
                            var a = params.name.slice(0,2);
                            if(a === '境内'){
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "rgba(21, 106, 199, 0.4)"
                                },{
                                    offset: 1,
                                    color: "rgba(55, 130, 211, .5)"
                                }], false)
                            }else if(a === '境外'){
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 203, 159, 0.4)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 203, 159, 0)' // 100% 处的颜色
                                }], false)
                            }
                        },
                    }
                },
                data: line
            }
        ]
    };
    myChart3.setOption(option);
}