echars 柱形图里边带小方格

 

 代码如下：

function mychart4(){
    mychart4 = echarts.init(document.getElementById('profitRate'));
    let colors = [{
        one: "#67E0E3",
        two: "#0181DE",
    }, {
        one: "#9336FF",
        two: "#146AFF",
    }, {
        one: "#082757",
        two: "#02B093",
    }];
    let echartData = [{
            name: "金融",
            value: 1300,
        },
        {
            name: "科技环保",
            value: 2200,
        },
        {
            name: "化工",
            value: 3900,
        },
        {
            name: "运输",
            value: 1800,
        },

        {
            name: "水电",
            value: 6289,
        },
        {
            name: "新能源",
            value: 8288,
        },
        {
            name: "火电",
            value: 3100,
        },
        {
            name: "煤炭",
            value: 2021,
        },
    ];
    let xAxisData = echartData.map(v => v.name);
    let yAxisData = echartData.map(v => v.value);
    option = {
        grid: {
            left: '15%',
            top: '20%',
            right: '8%',
            bottom: '25%',
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            triggerEvent:true,//设置坐标点击事件
            axisLine: {
                show: false
            },
            axisLabel: {
                color: "#81ACCF",
                fontSize: '80%',
                
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            // max:100,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#0C4F81"
                }
            },
            nameTextStyle: {
                color: '#81ACCF',
                fontSize: '60%',
            },
            axisLabel: {
                color: "#4F88BD",
                fontSize: '60%',
                formatter: '{value}'
            },
            splitLine: {
                lineStyle: {
                    type: "dotted",
                    color: "#0C4F81"
                }
            }
        },
        series: [
            {
                name:'集团各板块资产负债率',
                type: 'bar', //设置类型为象形柱状图
                barWidth: '18', //柱图宽度
                itemStyle: {
                    normal: {
                        color: function (params) {
                            let odd = params.dataIndex % 2;
                            return {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: colors[odd].one // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: colors[odd].two // 100% 处的颜色
                                }
                                ]
                            }
                        },
                        label:{
                            show:true,
                            position:'top',
                            formatter:function(params){//设置柱状图上文本的颜色不同
                                // console.log(params.dataIndex)
                                if(params.dataIndex %2==0){
                                    return '{a|'+ yAxisData[params.dataIndex]+'}'
                                }else{
                                    return '{b|'+ yAxisData[params.dataIndex]+'}'
                                }
                            },
                            rich:{
                                a:{
                                    color:"#0EFCFF"
                                },
                                b:{
                                    color:"#6947FF"
                                },
                            }
                        }
                    },
                },
                z: 10,
                zlevel: 0,
                data: yAxisData,
            },
            {
                type: 'pictorialBar', //设置类型为象形柱状图
                symbol: 'rect', //图形类型，带圆角的矩形
                symbolMargin: '2', //图形垂直间隔
                symbolRepeat: true, //图形是否重复
                // 分隔
                itemStyle: {
                    normal: {
                        color: '#0F375F'
                    }
                },
                symbolRepeat: 'fixed',
                symbolClip: true,
                symbolSize: [18, 2],
                symbolPosition: 'start',
                symbolOffset: [0, -1],
                // symbolBoundingData: this.total,
                width: "100%",
                z: 0,
                zlevel: 1,
                data: yAxisData,
            }
        ]
    };
    mychart4.setOption(option);
}