e-chars 使用中国地图 配置和构建

上图
颜色自行搭配，本人为展示方便，只放了几个省的数据

引入

    <script type="text/javascript" src="js/echarts.js"></script>

绑定dom元素

<div id="chart-map" class="chart-area"></div>

JS部分

//传参   下面是我的业务逻辑，你可以按你需要的改
let jsonData = ["provinceCallInfo":[{"provinceName":"广东省","connSuccCount":"55"},{"provinceName":"湖南省","connSuccCount":"88"},{"provinceName":"广西省","connSuccCount":"66"},{"provinceName":"江西省","connSuccCount":"22"},{"provinceName":"新疆省","connSuccCount":"100"},{"provinceName":"四川省","connSuccCount":"100"},{"provinceName":"湖北省","connSuccCount":"0"},{"provinceName":"上海","connSuccCount":"46"},{"provinceName":"黑龙江省","connSuccCount":"22"},{"provinceName":"山东省","connSuccCount":"77"}]]

//调用方法
provinceCallInfo(jsonData .provinceCallInfo)
function provinceCallInfo(provinceCallInfo) {
		   var mapData = []
		       for (var key in provinceCallInfo) {
		           var provinceName = provinceCallInfo[key].provinceName.replace('省', '')
		           mapData[key] = {
		               name: provinceName,
		               value: provinceCallInfo[key].connSuccCount,
		           }
		   }
		   monitorCharts.map('chart-map', mapData, true);
  }

// 另一个js文件  map函数配置    复制出来部分，自行更改
map: function (id, data, showStatus, option, seriesOption) {
        var isShow = true;
        var option = {
            title: {
                text: '',
                subtext: '',
                x: 'center'
            },
            tooltip: {//提示框组件。
                trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            },
            legend: {
                show: false,
                orient: 'horizontal',//图例的排列方向
                x: 'left',//图例的位置
                textStyle: { color: '#FFF' }
            },

            visualMap: {//颜色的设置  dataRange
                x: 'left',
                y: 'bottom',
                splitList: [
                    { start: 1500 },
                    { start: 900, end: 1500 },
                    { start: 310, end: 1000 },
                    { start: 200, end: 300 },
                    { start: 10, end: 200, label: '10 到 200（自定义label）' },
                    { start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black' },
                    { end: 10 }
                ],
                min: 0,
                max: 100,
                calculable: true,//颜色呈条状
                text: [getI18nValue('高', '高'), getI18nValue('低', '低')],// 文本，默认为数值文本
                textStyle: { color: '#FFF' },
                //地图上各省份 按照数值的不同的 颜色渐变 区分
                color: ['RGB(236,78,77)'
                    , '#7380A2',
                    'RGB(5,182,249)']
            },
            toolbox: {//工具栏
                show: false,
                orient: 'vertical',//工具栏 icon 的布局朝向
                x: 'right',
                y: 'center',
                feature: {//各工具配置项。
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                    restore: { show: true },//配置项还原。
                    saveAsImage: { show: true }//保存为图片。
                }
            },
            roamController: {//控制地图的上下左右放大缩小 图上没有显示
                show: false,
                x: 'right',
                mapTypeControl: {
                    'china': true
                }
            },
            series: [
                {
                    name: getI18nValue('呼入量'),  //鼠标移上去后的标题
                    type: 'map',
                    mapType: 'china',
                    roam: false,//是否开启鼠标缩放和平移漫游
                    showLegendSymbol: false,
                    itemStyle: {//地图区域的多边形 图形样式
                        normal: {
                            areaColor: 'rgba(0,74,148,0.2)',   //地图各省 默认颜色
                            borderColor: '#66aaf1',
                            shadowColor: '#66aaf1',
                            shadowBlur: 10,
                            showLegendSymbol: false
                        },
                        emphasis: {
                            areaColor: 'rgba(0,74,148,0.9)',   //鼠标移入各省，显示的颜色
                        }
                    },
                    label: {
                        normal: {
                            show: showStatus,
                            textStyle: { color: '#FFF' }  //字体颜色--省份名字
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    top: "1%",//组件距离容器的距离
                    data: [

                    ]
                }
            ]
        };

        /*初始化*/

        var chart = echarts.getInstanceByDom(document.getElementById(id));
        option.series[0].data = data;
        if (chart === undefined) {
            chart = echarts.init(document.getElementById(id));
            chart.setOption(option);
            $(window).on("resize", debounce(chart.resize, 100));
        } else {
            chart.setOption(option);
        }
    }