test/visualMap-pieces.html

<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/simpleRequire.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>

        <div class="chart" id="map"></div>
        <div class="chart" id="line-symbol"></div>

        <script>
            require([
                'echarts',
                'map/js/china'
            ], function (echarts) {
                const option = {
                    title : {
                        text: '订单量',
                        subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        x:'left',
                        data:['订单量']
                    },
                    visualMap: {
                        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'],
                        textStyle: {
                            textShadowColor: "rgba(255, 0, 255, 1)",
                            textShadowBlur: 5,
                            textShadowOffsetX: 5,
                            textShadowOffsetY: 5
                        }
                    },
                    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',
                            map: 'china',
                            roam: false,
                            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: '江苏', itemStyle: {color: 'red'}, value: Math.round(Math.random()*2000), visualMap: false},
                                {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)}
                            ]
                        }
                    ]
                };

                const chart = testHelper.create(echarts, 'map', {
                    title: [
                        'All provinces should be "blue", except that',
                        '北京 is "black"',
                        '黑龙江 is "grey" (visualMap: false)',
                        '江苏 is "red" (visualMap: false)',
                        'the shadowColor of visualMap text "Map Result" is magenta'
                    ],
                    option
                });
            })
        </script>

        <script>
            require([
                'echarts'
            ], function (echarts) {
                const 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]
                        }
                    ]
                };

                const chart = testHelper.create(echarts, 'line-symbol', {
                    title: 'line symbol (check toggle normally)',
                    option
                });
            });
        </script>

    </body>
</html>