echars横向柱形图

 

 

function mychart2() {
    myChart2 = echarts.init(document.getElementById('profitTrends'));
    // 指定图表的配置项和数据
    var data = [193,343,343,223,223,343,223,223]
    var list=['其它专项','股权','信息化','科技','修理','技改','基建','前期']
    var barWidth = 10;
    option = {
        grid: {
            left: '15%',
            top: '15%',
            right: '8%',
            bottom: '15%',
        },
        xAxis: {
            show: false,
            splitLine: {
                show: false,
            },
        },
        yAxis: {
            data: list,
            splitLine: {
                show: false,
            },
            axisLabel: {
                textStyle: { fontSize: '80%', color: '#FFFFFF' },
            },
            axisLine: {
                show: true,//显示纵坐标
                lineStyle:{
                    color:"#153F77",
                    width:'3',
                    type:'solid'
                }
            },
            axisTick: false,
        },
        series: [
            {
                type: 'pictorialBar',
                type: 'bar',
                barWidth:barWidth,
                zlevel: 2,
                data: data,
                itemStyle:{
                    normal:{
                        barBorderRadius: [0, 100, 0 ,0],
                        color:function(params){//渐变色
                            var colorList = [
                                ['rgba(8, 41, 88, 1)', 'rgba(1, 176, 147, 1)'],
                                ['rgba(13, 35, 65, 1)', 'rgba(42, 125, 249, 1)'],
                                ['rgba(8, 41, 88, 1)', 'rgba(1, 176, 147, 1)'],
                                ['rgba(13, 35, 65, 1)', 'rgba(42, 125, 249, 1)'],
                                ['rgba(8, 41, 88, 1)', 'rgba(1, 176, 147, 1)'],
                                ['rgba(13, 35, 65, 1)', 'rgba(42, 125, 249, 1)'],
                                ['rgba(8, 41, 88, 1)', 'rgba(1, 176, 147, 1)'],
                                ['rgba(13, 35, 65, 1)', 'rgba(42, 125, 249, 1)'],
                            ];
                            var index=params.dataIndex;
                            if(params.dataIndex>=colorList.length){
                                index=params.dataIndex-colorList.length;
                            }
                            return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                [{
                                        offset: 0,
                                        color: colorList[index][0]
                                    },
                                    {
                                        offset: 1,
                                        color: colorList[index][1]
                                    }
                                ]);
                        },
                        label:{
                            show:true,
                            position:'right',
                            formatter:function(params){//设置柱状图上文本的颜色不同
                                // console.log(params.dataIndex)
                                if(params.dataIndex %2==0){
                                    return '{a|'+ data[params.dataIndex]+'}'
                                }else{
                                    return '{b|'+ data[params.dataIndex]+'}'
                                }
                            },
                            rich:{
                                a:{
                                    color:"#03A88E"
                                },
                                b:{
                                    color:"#2B8FFF"
                                },
                            }
                        },
                    }
                },
                // yAxisIndex:0,
            },
            {
                name:"框",
                type:'bar',
                barGap: '-100%',//让边框和柱子在同一个位置
                barWidth:barWidth,
                // barCategoryGap:20,
                zlevel: 2,
                data: data,
                itemStyle:{
                    //颜色
                    color:"none",
                    //边框色
                    borderColor:"#00C1DE",
                    //border宽度
                    borderWidth:1,
                    //border的边角弧度
                    barBorderRadius: [0, 100, 0 ,0],
                    // padding:[2,2,2,2],
                }
                // yAxisIndex:1,
            }  
        ]
    };
    myChart2.setOption(option);
}