xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
							<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                height: 60px;
                background: #146402;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
            }
            .chart {
                height: 500px;
            }
        </style>


        <div class="chart" id="main"></div>


        <script>

            var echarts;
            var chart;
            var myChart;
            var groupCategories = [];
            var groupColors = [];

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/chart/bar',
                // 'echarts/chart/pie',
                // 'echarts/chart/scatter',
                // 'echarts/chart/custom',
                // 'echarts/chart/parallel',
                // 'echarts/chart/radar',
                // 'echarts/component/grid',
                // 'echarts/component/polar',
                // 'echarts/component/geo',
                // 'echarts/component/singleAxis',
                // 'echarts/component/legend',
                // 'echarts/component/tooltip',
                // 'echarts/component/toolbox',
                // 'echarts/component/visualMap',
                // 'echarts/component/dataZoom'
            ], function (ec) {
                echarts = ec;
                chart = myChart = echarts.init(document.getElementById('main'));

var data = [
    {name:'广州', value: 50},
    {name:'深圳', value: 72},
    {name:'珠海', value: 30},
    {name:'佛山', value: 38},
    {name:'杭州', value: 42},
    {name:'舟山', value: 32},
    {name:'宁波', value: 52}
];


option = {
    tooltip : {
        trigger: 'item'
    },
    legend: {
        data:['广州','深圳','珠海','佛山','杭州','舟山','宁波'],
        top: 0,
        left: 'center'
    },
    xAxis : [
        {
            type : 'category',
            data : [0],
            axisTick: {show: false},
            axisLabel: {show: false}
        },
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : echarts.util.map(data, function (item) {
        return {
            name: item.name,
            type: 'bar',
            label: {
                normal: {
                    show: true,
                    position: 'bottom',
                    formatter: function (param) {
                        return param.seriesName;
                    }
                }
            },
            data: [item.value]
        }
    }).concat([{
        type: 'custom',
        renderItem: renderProvinceName,
        data: [0]
    }])
};

function renderProvinceName(param, api) {
    var currentSeriesIndices = api.currentSeriesIndices();
    currentSeriesIndices.pop(); // remove custom series;

    var barLayout = api.barLayout({
        barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length
    });

    var nameTexts = echarts.util.map(currentSeriesIndices, function (serIdx, index) {
        var point = api.coord([0, 0]);
        point[0] += barLayout[index].offsetCenter;
        point[1] = api.getHeight() - 20;

        return {
            position: point,
            name: serIdx,
            type: 'circle',
            shape: {
                cx: 0, cy: 0, r: 10
            },
            style: {
                text: serIdx,
                fill: '#333',
                stroke: null
            }
        };
    });

    return {
        type: 'group',
        diffChildrenByName: true,
        children: nameTexts
    };
}

                chart.setOption(option);
            });

        </script>
    </body>
</html>