echarts 可视化数据展示 横柱状图2

效果

代码

initChart7() {
      // 带阴影柱状图
        var option = {
            grid: {
              left: "left",
              right: "15%",
              top: "5%",
              // bottom: "20px",
              containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                show:false,
            },
            yAxis: {
                show:true,
                type:'category',
                data: ['公益服务项目','政府购买服务'],
                splitLine: {show: false},
                axisLine: {
                    show:false,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel:{
                    color:'#fff'
                }
            },
            series: [
                {
                    type: 'bar',
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 7,
                            color: 'rgba(255,255,255,0.5)'
                        }
                    },
                    barGap:'-100%',
                    barCategoryGap:'60%',
                    // data: [50,50],  //背景基数
                },
                {
                name: 'bar',
                type: 'bar',
                barWidth: 15,
                barCategoryGap:'60%',
                itemStyle: {
                    normal: {
                        barBorderRadius: 10,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 1, 0,
                            [
                                {offset: 0, color: '#2A72EB'},
                                {offset: 1, color: '#4CFDF7'}
                            ]
                        )
                    }
                },
                //每个柱状图加文字
                data:[
                    {   value: 20,
                        label: {
                                color: "#fff)",
                                fontSize: 14,
                                show: true,
                                position: [120, -35],
                                formatter: '{a|506}{b|单}',
                        rich: {
                            a: {
                                color: "#fff",
                                fontSize: 19,
                                lineHeight: 40,
                            },
                            b:{
                                color: "#fff",
                                fontSize: 12,
                                lineHeight: 40,
                            },
                        }
                    },
                },
                {   value: 30,
                        label: {
                                color: "#fff)",
                                fontSize: 14,
                                show: true,
                                position: [180, -35],
                                formatter: '{a|396}{b|单}',
                        rich: {
                            a: {
                                color: "#fff",
                                fontSize: 18,
                                lineHeight: 40,
                            },
                             b:{
                                color: "#fff",
                                fontSize: 12,
                                lineHeight: 40,
                            },
                        }
                    },
                },
            ]
            }]
        };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("main7"),
        "walden"
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }