echarts实现中国地图-地图板块颜色修改

程序员文章站 2022-07-02 11:04:16

...

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ECharts地图选择器</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <script src="js/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
                option = {
                    tooltip: {
                        trigger: 'item',
                        // formatter: '{b}{c}',
                        formatter: function (params) {
                             // console.log(params);
                             if( params.data.value == undefined||params.data.value == '-'){
                                  params.data.value=0;
                             }
                             return params.data.name +'<br>' + params.data.value;
                        },
                    },
                    series: [{
                        name: '中国',
                        type: 'map',
                        mapType: 'china',
                        selectedMode: false,//single 表示单选;multiple表示多选 默认flase不选
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,//默认是否显示省份名称    
                                },
                                areaStyle: {
                                    color: '#f3f3f3',//默认的地图板块颜色
                                },
                                borderWidth:1,
                                borderColor:'#e1e1e1',
                            },
                            emphasis: {
                                label: {
                                    show: true,//选中状态是否显示省份名称
                                },
                                areaStyle: {
                                    color: '#90c31d',//选中状态的地图板块颜色
                                },
                            },
                        },
                        //此为加载的数据
                        data: [
                            {name: '广东',selected: true,value:10},
                            {name: '广西',selected: true,value:10},
                            {name: '四川',selected: true,value:10},
                        ]
                    }]
                };
                //
                //var ecConfig = require('echarts/config');
                //下面是一个选中事件
                //myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
                //  var selected = param.selected;
                //});
                // 为echarts对象加载数据 
                myChart.setOption(option);
            }
        );

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

echarts.js 下载链接echarts.js
最后展示样式
echarts实现中国地图-地图板块颜色修改

echarts实现中国地图-地图板块颜色修改

vue+echarts实现中国地图流动效果(步骤详解)

vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

echarts实现中国地图-地图板块颜色修改

VUE+echarts实现省份，中国地图

Echarts 中国地图各个省市自治区自定义颜色

echarts中国地图+自定义tooltip样式+dispatchAction()方法实现联动

vue+echarts实现中国地图流动效果(步骤详解)

在vue+vuex+axios+echarts中如何实现中国地图

Echarts 中国地图各个省市自治区自定义颜色

vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能