zoukankan      html  css  js  c++  java
  • 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'
                    }
                }
            },
        ]
    };
  • 相关阅读:
    Java生产环境线上栈故障排查问题(COPY)
    Java集合HashMap,List底层
    图算法--染色法判定二图
    图算法--kruskal
    图算法--最小生成树prim
    图算法--判负环
    图算法--floyd
    图算法--spfa
    图算法--bellman-ford (nm)
    图算法--堆优化版dijkstra
  • 原文地址:https://www.cnblogs.com/qtx-/p/11734410.html
Copyright © 2011-2022 走看看