xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
							<!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>
        <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: #360;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
            }
            .chart {
                height: 350px;
            }
        </style>


        <h1>Check dataZoom sync on two category axes with DATA MISSING and STACK and without min/max set.</h1>
        <div class="chart" id="sync"></div>


        <script>

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

            require([
                'echarts',
                // 'zrender/tool/color',
                // 'echarts/chart/line',
                // 'echarts/chart/parallel',
                // 'echarts/component/grid',
                // 'echarts/component/legend',
                // 'echarts/component/tooltip',
                // 'echarts/component/toolbox',
                // 'echarts/component/dataZoom'
            ], function (ec) {
                echarts = ec;
                colorTool = echarts.color;
                chart = myChart = echarts.init(document.getElementById('sync'));

                option = {
                    dataZoom:[
                        {type:'slider',show:'true',xAxisIndex: [0, 1] },
                        {type:'inside',show:'true',xAxisIndex: [0, 1] }
                    ],
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['增速','销量']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016']
                    },
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: ['2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016']
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '销量',
                        min: 0,
                        max: 100,
                        position: 'left'
                    }],
                    series: [{
                        name: '增速',
                        type: 'line',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 3,
                                shadowColor: 'rgba(0,0,0,0.4)',
                                shadowBlur: 10,
                                shadowOffsetY: 10
                            }
                        },
                        data: [['2000',1],['2001',13]
                        ,['2002',37],['2003',35],['2004',15],
                        ['2005',13],['2006',25],['2007',21],['2008',6],['2009',45]
                        ,['2010',32],['2011',2],['2012',4],['2013',13],['2014',6],['2015',11],['2016',12]]
                    }, {
                        name: '销量',
                        type: 'line',
                        yAxisIndex: 0,
                        xAxisIndex:1,
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        data:  [['2000',1],['2001',13]
                        ,['2002',37],['2003',35],['2004',15],
                        ['2005',13],['2006',25],['2007',21],['2008',6],['2009',45]
                        ,['2010',32],['2011',2],['2012',4],['2013',13],['2014',6]]
                    }]
                };

                chart.setOption(option);
            });

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