xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
							<!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>


        <h1>right y: min/max set, should not effect onZero of left y. (pick the first axis that can on zero)</h1>
        <div class="chart" id="a"></div>
        <h1>onZeroAxisIndex specified (onZero on the right y axis)</h1>
        <div class="chart" id="b"></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/map',
                // '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('a'));

                option = {
                    legend: {
                        data: ['left', 'right']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        },
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} %'
                            },
                            min: 1,
                            max: 80
                        }
                    ],
                    series : [
                        {
                            name: 'left',
                            type: 'bar',
                            // barWidth: '60%',
                            data:[1000, -520, -2000, -3340, 3900, -330, -5220]
                        },
                        {
                            name: 'right',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [10, 0, 30, 50]
                        }
                    ]
                };

                chart.setOption(option);
            });

        </script>


        <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/map',
                // '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('b'));

                option = {
                    legend: {
                        data: ['left', 'right']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            axisLine: {
                                onZero: true,
                                onZeroAxisIndex: 1
                            },
                            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        },
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }
                    ],
                    series : [
                        {
                            name: 'left',
                            type: 'line',
                            data:[1000, -520, -2000, -3340, 3900, -330, -5220]
                        },
                        {
                            name: 'right',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [-10, 0, 30, 50]
                        }
                    ]
                };

                chart.setOption(option);
            });

        </script>


    </body>
</html>