jquery用Echarts实现词云和地图

一、词云

实现如下效果：

 首先引入echarts-wordcloud.js文件

请求数据：

$.ajax({
    url: domainName + '/api/data-visualization/analysis/statistic/wordCloud',
    type: 'post',
    data: {
        beginDate: beginDate,
        endDate: currentDate,
        keywords: '',
    },
    success(res) {
        if (res.code === 200) {
            console.log(res);
            initWordCloud(res.data)
        }
    },
    error(err) {
        console.log(err);
    }
})

返回的数据：

 配置项：

 // 提示信息
        tooltip: {
            show: true,
            backgroundColor: 'rgba(0,0,0,0.5)',
            borderWidth: 0,
            textStyle: {
                color: '#fff',
                fontSize: 14
            },
            trigger: 'item',
            formatter: (params) => {
                let { name, value } = params.data
                return `${params.marker} ${name}：${value}`
            }
        },
        series: [{
            type: 'wordCloud',
            shape: 'circle',
            /*  字体最下 12 最大 60 */
            // 设置文字大小范围
            sizeRange: [12, 60],
            /*  旋转范围 */
            rotationRange: [-90, 90],
            /*  旋转角度  */
            rotationStep: 45,
            // 修改文字（画布）之间的间距
            gridSize: 5,
            /* 不运行画到外侧 */
            drawOutOfBound: false,
            // If perform layout animation.
            // NOTE disable it will lead to UI blocking when there is lots of words.
            layoutAnimation: true,
            textStyle: {
                color: '#1EFFAA',
            },
            data: wordCloudData.map(i => ({
                name: i.x,
                value: i.value
            }))
        }]
    });

二、地图

效果：

 要有地图的json文件

请求数据：

配置项：

const initMap = mapData => {
    $.getJSON('../lib/china.json', data => {
        echarts.registerMap('China', data);
        map.setOption({
            series: [{
                type: 'map',
                mapType: 'China', //  与注册时的名字保持统一   echarts.registerMap('China', geoJson);
                itemStyle: {
                    areaColor: '#1E71FF',
                    borderColor: '#1950CC',
                    borderWidth: 1.5,
                },
                emphasis: {
                    itemStyle: {
                        areaColor: '#00C3F5',
                    },
                },
                select: {
                    label: {
                        show: false
                    },
                    itemStyle: {
                        areaColor: '#1E71FF',
                    },
                },
                zoom: 1.2,
                data: mapData,
            }],
        });
    })
}