echarts橫向柱狀圖,文字、柱狀上下排列


代碼如下:

// 關於“省優質幼兒園評選”的投票
var chartData = [18,28,15,6,17,8,8];
var chartName = ['陽光新城幼兒園', '湯沐景苑幼兒園', '張寨鎮新星幼兒園','朱寨鎮新思路幼兒園','朱寨鎮燕牌坊幼兒園','龍固鎮春龍佳源幼兒園','任庄幼兒園'];
// var unit='億元';
var myColor = ['#FFA483','#F97F53','#F45922'];
option = {
    //  title: {
    //     text: '單位:  '+unit,
    //     right:0,
    //     textStyle: {
    //         color: '#000',
    //         fontSize:14,
    //     }
    // },
   
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['北京分', 271.1, 30.4, 100, 100],
            ['上海分', 156.5, 12.1, 100, 50],
            ['浙江分', 117.5, 92.1, 100, 50],
            ['廣州分', 110.5, 102.1, 100, 50],
            ['安徽分', 86.5, 132.1, 100, 50],
          ],
        },
    backgroundColor: '#fff',
    grid: {
        left: '2%',
        right: '10%',
        bottom: '10%',
        top: '10%',
        containLabel: true
    },
    xAxis: [{
            show: false,
        }
    ],
    yAxis: {
        type: 'category',
        inverse: true,
        show: true,
        axisLine: {
            lineStyle: {
                color: 'rgba(0,0,0,.0)'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#f00',
            },
            height: 70,
            margin: -35,
            rich: {
            }
        }
    },

    series: [

        //亮色條 百分比
        {
            show: true,
            type: 'bar',
            barGap: '-100%',
            barWidth: '20%',
            z: 2,
            itemStyle: {
                normal: {
                    color: function(params) {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num]
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#000',
                        fontSize: 25,
                        fontWeight: 'bold'
                    },
                    position: 'right'
                }
            }
        },
    ]
};

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM