xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <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>
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                height: 60px;
                background: #a60;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
            }
            .chart {
                height: 500px;
            }
        </style>


        <h1>map</h1>
        <div class="chart" id="map"></div>

        <h1>line symbol (check toggle normally)</h1>
        <div class="chart" id="line-symbol"></div>


        <script>
            require([
                'echarts',
                // 'echarts/chart/map',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/visualMap',
                // 'echarts/component/tooltip',
                'map/js/china'
            ], function (echarts) {

                var option = {
                    title : {
                        text: '订单量',
                        subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        x:'left',
                        data:['订单量']
                    },
                    visualMap: {
                        // selectedMode: 'single',
                        text: ['Map Result'],
                        showLabel: true,
                        right: 20,
                        pieces: [
                            {min: 1500},
                            {min: 900, max: 1500},
                            {min: 310, max: 1000},
                            {min: 200, max: 400},
                            {min: 10, max: 200, label: '10 到 200（自定义label）'},
                            {value: 123, label: '123（自定义特殊颜色）', color: 'grey'},
                            {min: 5, max: 5, label: '5（自定义特殊颜色）', color: 'black'},
                            {max: 5}
                        ],
                        color: ['#E0022B', '#E09107', '#A3E00B']
                    },
                    toolbox: {
                        show: true,
                        orient : 'vertical',
                        x: 'right',
                        y: 'center',
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    roamController: {
                        show: true,
                        x: 'right',
                        mapTypeControl: {
                            'china': true
                        }
                    },
                    series : [
                        {
                            name: '订单量',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            itemStyle:{
                                normal:{
                                    label:{
                                        show:true,
                                        // textStyle: {
                                            // color: "red"
                                        // }
                                    }
                                },
                                emphasis:{label:{show:true}}
                            },
                            data:[
                                {name: '北京',value: 5},
                                {name: '天津',value: Math.round(Math.random()*2000)},
                                {name: '上海',value: Math.round(Math.random()*2000)},
                                {name: '重庆',value: Math.round(Math.random()*2000)},
                                {name: '河北',value: 0},
                                {name: '河南',value: Math.round(Math.random()*2000)},
                                {name: '云南',value: 123},
                                {name: '辽宁',value: 305},
                                {name: '黑龙江',value: Math.round(Math.random()*2000), visualMap: false},
                                {name: '湖南',value: 200},
                                {name: '安徽',value: Math.round(Math.random()*2000)},
                                {name: '山东',value: Math.round(Math.random()*2000)},
                                {name: '新疆',value: Math.round(Math.random()*2000)},
                                {name: '江苏',value: Math.round(Math.random()*2000)},
                                {name: '浙江',value: Math.round(Math.random()*2000)},
                                {name: '江西',value: Math.round(Math.random()*2000)},
                                {name: '湖北',value: Math.round(Math.random()*2000)},
                                {name: '广西',value: Math.round(Math.random()*2000)},
                                {name: '甘肃',value: Math.round(Math.random()*2000)},
                                {name: '山西',value: Math.round(Math.random()*2000)},
                                {name: '内蒙古',value: Math.round(Math.random()*2000)},
                                {name: '陕西',value: Math.round(Math.random()*2000)},
                                {name: '吉林',value: Math.round(Math.random()*2000)},
                                {name: '福建',value: Math.round(Math.random()*2000)},
                                {name: '贵州',value: Math.round(Math.random()*2000)},
                                {name: '广东',value: Math.round(Math.random()*2000)},
                                {name: '青海',value: Math.round(Math.random()*2000)},
                                {name: '西藏',value: Math.round(Math.random()*2000)},
                                {name: '四川',value: Math.round(Math.random()*2000)},
                                {name: '宁夏',value: Math.round(Math.random()*2000)},
                                {name: '海南',value: Math.round(Math.random()*2000)},
                                {name: '台湾',value: Math.round(Math.random()*2000)},
                                {name: '香港',value: Math.round(Math.random()*2000)},
                                {name: '澳门',value: Math.round(Math.random()*2000)}
                            ]
                        }
                    ]
                };

                testHelper.createChart(echarts, 'map', option);
            })

        </script>


        <script>

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

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/chart/parallel',
                // 'echarts/component/grid',
                // 'echarts/component/legend',
                // 'echarts/component/tooltip',
                // 'echarts/component/toolbox',
                // 'echarts/component/visualMap'
            ], function (echarts) {
                var option = {
                    title: {
                        text: '未来一周气温变化',
                        subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['最高气温','最低气温']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    visualMap: {
                        type: 'piecewise',
                        orient: 'horizontal',
                        left: 'center',
                        pieces: [
                            {gt: 10, lte: 15, label: 'weixian', symbol: 'emptyCircle', color: 'red'},
                            {gt: 5, lte: 10, label: 'weixian', symbol: 'emptyCircle', color: 'green'}
                        ],
                        outOfRange: {
                            color: '#ccc',
                            symbol: 'emptyCircle'
                        }
                    },
                    xAxis:  {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一','周二','周三','周四','周五','周六','周日']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    },
                    series: [
                        {
                            name:'最高气温',
                            type:'line',
                            data:[11, 11, 15, 13, 12, 13, 10]
                        }
                    ]
                };


                testHelper.createChart(echarts, 'line-symbol', option);
            });

        </script>


    </body>
</html>