1.中国地图

我就直接上代码了，进行一些说明：

1.首先是要引入echarts.js和china.js，文章最后会给出；

2.chinaGeoCoordMap用于装各省会的坐标数据，挺重要的；

3.chinaDatas装各省的名字数据嘛；

4.convertData这个方法控制箭头流向，我设置的是一半流入中心点，一半从中心点流出（用不到的可以删掉，要用的自己改进）；

5.series里设置被攻击点（中心点），和一些特效，代码中有注释的；

6.option中设置一些整体效果，tooltip中负责悬浮框内容和格式的设置，此中有疑问可以去查看echarts官方的文档说明。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.js"></script><script src="china.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 900px;height:600px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据
var chinaGeoCoordMap = {'黑龙江': [127.9688, 45.368],'内蒙古': [110.3467, 41.4899],"吉林": [125.8154, 44.2584],'北京市': [116.4551, 40.2539],"辽宁": [123.1238, 42.1216],"河北": [114.4995, 38.1006],"天津": [117.4219, 39.4189],"山西": [112.3352, 37.9413],"陕西": [109.1162, 34.2004],"甘肃": [103.5901, 36.3043],"宁夏": [106.3586, 38.1775],"青海": [101.4038, 36.8207],"新疆": [87.9236, 43.5883],"西藏": [91.11, 29.97],"四川": [103.9526, 30.7617],"重庆": [108.384366, 30.439702],"山东": [117.1582, 36.8701],"河南": [113.4668, 34.6234],"江苏": [118.8062, 31.9208],"安徽": [117.29, 32.0581],"湖北": [114.3896, 30.6628],"浙江": [119.5313, 29.8773],"福建": [119.4543, 25.9222],"江西": [116.0046, 28.6633],"湖南": [113.0823, 28.2568],"贵州": [106.6992, 26.7682],"云南": [102.9199, 25.4663],"广东": [113.12244, 23.009505],"广西": [108.479, 23.1152],"海南": [110.3893, 19.8516],'上海': [121.4648, 31.2891]};var chinaDatas = [[{name: '黑龙江',value: 0}], [{name: '内蒙古',value: 0}], [{name: '吉林',value: 0}], [{name: '辽宁',value: 0}], [{name: '河北',value: 0}], [{name: '天津',value: 0}], [{name: '山西',value: 0}], [{name: '陕西',value: 0}], [{name: '甘肃',value: 0}], [{name: '宁夏',value: 0}], [{name: '青海',value: 0}], [{name: '新疆',value: 0}],[{name: '西藏',value: 0}], [{name: '四川',value: 0}], [{name: '重庆',value: 0}], [{name: '山东',value: 0}], [{name: '江苏',value: 0}], [{name: '安徽',value: 0}], [{  name: '湖北',value: 0}], [{name: '浙江',value: 0}], [{name: '福建',value: 0}], [{name: '江西',value: 0}], [{name: '湖南',value: 0}], [{name: '贵州',value: 0}],[{name: '广西',value: 0}], [{name: '海南',value: 0}], [{name: '上海',value: 0}], [{name: '北京市',value: 0}]];var convertData = function(data) {var res = [];for(var i = 0; i < (data.length/2); i++) {var dataItem = data[i];var fromCoord = [113.4668, 34.6234];var toCoord = chinaGeoCoordMap[dataItem[0].name];if(fromCoord && toCoord) {res.push([{coord: fromCoord,value: dataItem[0].value}, {coord: toCoord,}]);}}for(var i = (data.length/2); i < data.length; i++) {var dataItem = data[i];var fromCoord = chinaGeoCoordMap[dataItem[0].name];var toCoord = [113.4668, 34.6234];if(fromCoord && toCoord) {res.push([{coord: fromCoord,value: dataItem[0].value}, {coord: toCoord,}]);}}return res;};var series = [];[['河南', chinaDatas]].forEach(function(item, i) {console.log(item)series.push({type: 'lines',zlevel: 2,effect: {show: true,period: 4, //箭头指向速度，值越小速度越快trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'arrow', //箭头图标symbolSize: 5, //图标大小},lineStyle: {normal: {width: 1, //尾迹线条宽度opacity: 1, //尾迹线条透明度curveness: .3 //尾迹线条曲直度}},data: convertData(item[1])}, {type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: { //涟漪特效period: 4, //动画时间，值越小速度越快brushType: 'stroke', //波纹绘制方式 stroke, fillscale: 4 //波纹圆环最大限制，值越大波纹越大},label: {normal: {show: true,position: 'right', //显示位置offset: [5, 0], //偏移设置formatter: function(params){//圆环显示文字return params.data.name;},fontSize: 13},emphasis: {show: true}},symbol: 'circle',symbolSize: function(val) {return 5+ val[2] * 5; //圆环大小},itemStyle: {normal: {show: false,color: '#f00'}},data: item[1].map(function(dataItem) {return {name: dataItem[0].name,value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])};}),},//被攻击点{type: 'scatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {period: 4,brushType: 'stroke',scale: 4},label: {normal: {show: true,position: 'right',//offset:[5, 0],color: '#0f0',formatter: '{b}',textStyle: {color: "#0f0"}},emphasis: {show: true,color: "#f60"}},symbol: 'pin',symbolSize: 50,data: [{name: item[0],value: chinaGeoCoordMap[item[0]].concat([10]),}],});});option = {tooltip: {trigger: 'item',backgroundColor: 'rgba(166, 200, 76, 0.82)',borderColor: '#FFFFCC',showDelay: 0,hideDelay: 0,enterable: true,transitionDuration: 0,extraCssText: 'z-index:100',formatter: function(params, ticket, callback) {//根据业务自己拓展要显示的内容var res = "";var name = params.name;var value = params.value[params.seriesIndex + 1];res = "<span style='color:#fff;'>" + name + "</span><br/>发票流入：<br/>份数：24,534 份<br/>金额：34,534.53 元<br/>税额：134,534.75 元<br/>发票流出：<br/>份数：34,585 份<br/>金额：23,478.75 元<br/>税额：15,337.54 元";return res;}},backgroundColor:"#141845",visualMap: { //图例值控制min: 0,max: 1,calculable: true,show: true,color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],textStyle: {color: '#fff'}},geo: {map: 'china',zoom: 1.2,label: {emphasis: {show: false}},roam: true, //是否允许缩放itemStyle: {normal: {color: 'rgba(51, 69, 89, .5)', //地图背景色borderColor: '#516a89', //省市边界线00fcff 516a89borderWidth: 1},emphasis: {color: 'rgba(37, 43, 61, .5)' //悬浮背景}}},series: series};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

2.词云图

上代码，并进行说明：

1.首先，引入echarts.js和echarts-wordcloud.min.js，文章最后会给出；

2.data装词汇数据，value越大字体越大，为了效果好看，词汇较多，看代码时直接往下拉就行；

3.data中的image：小鸟图片；

自定义图片一般有三种格式：

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURL。

1.URL 为图片链接，例如：

'image://http://xxx.xxx.xxx/a/b.png'

注：也可以是本地图片

2.URL 为 dataURL，例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

我们就用的这种

3.可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

例如：

'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'

4.maskImage用于设置词云图形状为自定义图片的形状；

5.shape则用于设置词云图形状为默认的几种形状，由于现在echarts官网没有词云图的相关文档，我去翻看了echarts-wordcloud.min.js，发现可以设置为以下几种默认形状：

circle，cardioid（心形），diamond，square，triangle-forward，triangle，triangle-upright，pentagon（五角形），star，random-dark，random-light；

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.js"></script><script src="echarts-wordcloud.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 900px;height:600px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var data = {value: [{name: " 没有",value: 30,},{name: " 屏幕",value: 24},{name: " 不错",value: 21},{name: " 可以",value: 19},{name: " 发货",value: 18},{name: " 这个",value: 18},{name: " 什么",value: 17},{name: " 一个",value: 12},{name: " 不好",value: 12},{name: " 质量",value: 11},{name: " 快递",value: 11},{name: " 问题",value: 10},{name: " 物流",value: 9},{name: " 几天",value: 9},{name: " 一般",value: 9},{name: " 就是",value: 9},{name: " 使用",value: 8},{name: " 怎么",value: 8},{name: " 电池",value: 8},{name: " 不能",value: 8},{name: " 速度",value: 8},{name: " 客服",value: 8},{name: " 一星",value: 8},{name: " 拍照",value: 8},{name: " 摄像头",value: 7},{name: " 外观",value: 7},{name: " 包装",value: 7},{name: " 到货",value: 7},{name: " 有点",value: 7},{name: " 抢购",value: 6},{name: " 这样",value: 6},{name: " 性价比",value: 6},{name: " 一般般",value: 6},{name: " 出现",value: 6},{name: " 以前",value: 6},{name: " 知道",value: 6},{name: " 一次",value: 6},{name: " 真的",value: 6},{name: " 收到",value: 6},{name: " 其他",value: 6},{name: " 电量",value: 6},{name: " 还是",value: 6},{name: " 不行",value: 6},{name: " 红米",value: 6},{name: " 那么",value: 6},{name: " 挺快",value: 5},{name: " 现在",value: 5},{name: " 服务",value: 5},{name: " 充电",value: 5},{name: " 流畅",value: 5},{name: " 系统",value: 5},{name: " 非常",value: 5},{name: " 满意",value: 5},{name: " 购物",value: 5},{name: " 玩游戏",value: 5},{name: " 信号",value: 5},{name: " 不了",value: 5},{name: " 别人",value: 5},{name: " 死机",value: 5},{name: " 耗电",value: 5},{name: " 一直",value: 5},{name: " 像素",value: 5},{name: " 第一次",value: 5},{name: " 广告",value: 5},{name: " 买个",value: 5},{name: " 黑屏",value: 5},{name: " 为什么",value: 4},{name: " 猴王",value: 4},{name: " 视频",value: 4},{name: " 体验",value: 4},{name: " 好评",value: 4},{name: " 闪屏",value: 4},{name: " 价格",value: 4},{name: " 饥饿",value: 4},{name: " 营销",value: 4},{name: " 发热",value: 4},{name: " 还行",value: 4},{name: " 一天",value: 4},{name: " 需要",value: 4},{name: " 特别",value: 4},{name: " 而且",value: 4},{name: " 运行",value: 4},{name: " 等到",value: 4},{name: " 手机卡",value: 4},{name: " 呵呵",value: 4},{name: " 时候",value: 4},{name: " 东西",value: 4},{name: " 感觉",value: 4},{name: " 卡机",value: 4},{name: " 没什么",value: 4},{name: " 大家",value: 4},{name: " 没货",value: 4},{name: " 售后",value: 4},{name: " 比较",value: 4},{name: " 退货",value: 4},{name: " 加价",value: 3},{name: " 耳机",value: 3},{name: " 呜呜",value: 3},{name: " 一分钱",value: 3},{name: " 一分货",value: 3},{name: " 默认",value: 3},{name: " 说好",value: 3},{name: " 你们",value: 3},{name: " 一点",value: 3},{name: " 超级",value: 3},{name: " 耐用",value: 3},{name: " 很快",value: 3},{name: " 断流",value: 3},{name: " 套装",value: 3},{name: " 一样",value: 3},{name: " 发票",value: 3},{name: " 买回来",value: 3},{name: " 软件",value: 3},{name: " 还好",value: 3},{name: " 以后",value: 3},{name: " 下单",value: 3},{name: " 打游戏",value: 3},{name: " 我们",value: 3},{name: " 但是",value: 3},{name: " 一部",value: 3},{name: " 王者",value: 3},{name: " 不怎么样",value: 3},{name: " 看看",value: 3},{name: " 自己",value: 3},{name: " 里面",value: 3},{name: " 边框",value: 3},{name: " 看着",value: 3},{name: " 要死",value: 3},{name: " 原因",value: 3},{name: " 新机",value: 3},{name: " 不如",value: 3},{name: " 老是",value: 3},{name: " 购买",value: 3},{name: " 更好",value: 3},{name: " 相机",value: 3},{name: " 竟然",value: 3},{name: " 一分",value: 3},{name: " 天才",value: 3},{name: " 荣耀",value: 3},{name: " 正常",value: 3},{name: " 回复",value: 3},{name: " 联系",value: 3},{name: " 总体",value: 3},{name: " 反应",value: 3},{name: " 老爸",value: 3},{name: " 星期",value: 3},{name: " 半个",value: 3},{name: " 打电话",value: 3},{name: " 不是",value: 3},{name: " 保护膜",value: 3},{name: " 充电器",value: 3},{name: " 买不到",value: 2},{name: " 老子",value: 2},{name: " 差评",value: 2},{name: " 这么",value: 2},{name: " 真香",value: 2},{name: " 真是",value: 2},{name: " 三天",value: 2},{name: " 填写内容",value: 2},{name: " 帮别人",value: 2},{name: " 终于",value: 2},{name: " 有时候",value: 2},{name: " 极致",value: 2},{name: " 还有",value: 2},{name: " 希望",value: 2},{name: " 必须",value: 2},{name: " 好像",value: 2},{name: " 严重",value: 2},{name: " 反应速度",value: 2},{name: " 后面",value: 2},{name: " 音乐",value: 2},{name: " 商品",value: 2},{name: " 哈哈",value: 2},{name: " 垃圾",value: 2},{name: " 好用",value: 2},{name: " 突出",value: 2},{name: " 价钱",value: 2},{name: " 耍猴",value: 2},{name: " 磕碰",value: 2},{name: " 几次",value: 2},{name: " 失灵",value: 2},{name: " 支持",value: 2},{name: " 快充",value: 2},{name: " 意思",value: 2},{name: " 失败",value: 2},{name: " 整整",value: 2},{name: " 没收",value: 2},{name: " 已经",value: 2},{name: " 无法",value: 2},{name: " 方面",value: 2},{name: " 为啥",value: 2},{name: " 喜欢",value: 2},{name: " 套餐",value: 2},{name: " 完全",value: 2},{name: " 专业",value: 2},{name: " 选择",value: 2},{name: " 48mp",value: 2},{name: " 无线",value: 2},{name: " 一个月",value: 2},{name: " 不过",value: 2},{name: " ldquo",value: "-"},{name: " rdquo",value: "-"},{name: " 这种",value: 2},{name: " 送货",value: 2},{name: " 卡死",value: 2},{name: " 来看",value: 2},{name: " 糊弄人",value: 2},{name: " note7",value: 2},{name: " 时间",value: 2},{name: " 短信",value: 2},{name: " 滑落",value: 2},{name: " 那样",value: 2},{name: " vivo",value: 2},{name: " 防水",value: 2},{name: " 等待",value: 2},{name: " 直播",value: 2},{name: " 难受",value: 2},{name: " 四个",value: 2},{name: " 到手",value: 2},{name: " 发现",value: 2},{name: " 掉电",value: 2},{name: " 华为",value: 2},{name: " 再也",value: 2},{name: " 不用",value: 2},{name: " 给力",value: 2},{name: " 两天",value: 2},{name: " 立马",value: 2},{name: " 两周",value: 2},{name: " 处理器",value: 2},{name: " 关机",value: 2},{name: " 要么",value: 2},{name: " 满血",value: 2},{name: " 不会",value: 2},{name: " 定金",value: 2},{name: " 付款",value: 2},{name: " 心情",value: 2},{name: " 另外",value: 2},{name: " 游戏",value: 2},{name: " 公司",value: 2},{name: " 按键",value: 2},{name: " 卡顿",value: 2},{name: " 晚上",value: 2},{name: " 百分之",value: 2},{name: " 手机信号",value: 2},{name: " 一下",value: 2},{name: " 开学",value: 2},{name: " 上班",value: 2},{name: " 上天",value: 2},{name: " 配送",value: 2},{name: " 最后",value: 2},{name: " 太慢",value: 2},{name: " 手机套",value: 2},{name: " 笨重",value: 2},{name: " 半年",value: 2},{name: " 屏险",value: 2},{name: " 先发",value: 2},{name: " 不灵敏",value: 2},{name: " 硬度",value: 2},{name: " 这次",value: 2},{name: " 性能",value: 2},{name: " 介绍",value: 2},{name: " 卡针",value: 2},{name: " 不理",value: 2},{name: " 这是",value: 2},{name: " 买来",value: 2},{name: " 两次",value: 2},{name: " 网络",value: 2},{name: " 就裂",value: 2},{name: " 没用",value: 2},{name: " 多次",value: 2},{name: " 钢化",value: 2},{name: " 一星怪",value: 1},{name: " 新款",value: 1},{name: " 你行",value: 1},{name: " 没送",value: 1},{name: " 一个多",value: 1},{name: " 礼拜",value: 1},{name: " 只能",value: 1},{name: " 价位",value: 1},{name: " 闪退",value: 1},{name: " 抢到",value: 1},{name: " 其它",value: 1},{name: " 便宜",value: 1},{name: " 两百",value: 1},{name: " 盈利",value: 1},{name: " 机智",value: 1},{name: " 更新换代",value: 1},{name: " 太乱",value: 1},{name: " 赔付",value: 1},{name: " 自营",value: 1},{name: " 产品",value: 1},{name: " 手持",value: 1},{name: " 夜景",value: 1},{name: " 机子",value: 1},{name: " 拆过",value: 1}],//小鸟图片image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO4AAADICAYAAADvG90JAAAWNElEQVR4Xu2dedS/5ZzHX/6YmVJRKi1ojwqjydaqIilJacgkhFSYM5UkSyiFSpaypIXRiJBjyJqTZBjLjL2hxZpMRqEkSxznzJz3dH1PT0/P83zv5bqv5b7fn3O+5+l3uu/r8/m8r/t9L9f1We6GxQgYgeoQuFt1FttgI2AEMHF9ERiBChEwcSucNJtsBExcXwNGoEIETNwKJ80mGwET19dAbAS2BDYNv/sA9wLWAtYEVpuj7M/Ab8LvZuB64Mrw+3lsQ2sez8Stefby2r4TsBtw/wVEve+AJv0C+BxwOfAZ4GcD6ip+aBO3+CkqxsB1gKcBewK7Aqtntuwa4JPA24CfZLYluXoTNznkVSlcA/h74OnAYwq2/ELgNcBVBdsY1TQTNyqcoxnsAcAxgbB3r8grvUafCVxckc2dTDVxO8E22pM2CRf+Eyv38EvAUcA3KvdjWfNN3LHObHu/TgJe2f60os/Q6/PYfPp/wE3coq+7JMZtD7wf0NN2jPKFsKimraXSZGNgL+BfgNvaGGfitkFrfMe+FDhlfG7dxaNbgBcAWsTKLdrXfirwDGAH4BHA19oaZeK2RWwcx2vB6WOFrxQPgfR5wOFDDDxnTAWePBn4h/CEnR1+EPCBLvYMQdytp7Qs3wX0As5RIMPuBdiRw4QvA/uE6Kyh9e8NHBy21FZZpExrCid0NWAI4upOrjvM/sCtXQ3zeYMhoK2S2leN+4KjMMpdgJv6DrTE+YooU6CKnqYK9VxKPgQc2Ed3bOJuGOJLZdN3wmuBQtUsZSBwLnBYGaZkt+KK8NYRg7wK+3xm+G7daI5nXwce3tf72MQ9GnjzAqO0krcHcHVfQ31+bwQOAD7ce5RxDaCHi67PX3Vwa/0QoKJX4W0bnq/46ocCv2x4/LKHxSbuUt9OyvJ4PPDVvsb6/M4IKPj/v0KGTudBRnqiyKstsSbbMfcMC0xaFW67RqDxHwnoSd9bYhJ3XeDGZSz6Y3BY37+W9AhcBjw6vdpqNCrS6uSQdbSU0SLpc8O3a1en9gU+0fXkxefFJO6hwDvnGPY84JxYxnucRggcApzf6EgfpLfD2RPxr4ENIgWmHAu8MSa8MYnbdLXydcDxMZ3wWMsisCrwY0DfY5Y8CLwbeE5s1TGJ+78tjNNyuFbhmnxXtBjWhy5C4MQ+e4VGszcCegXfufcoSwwQi7jK1fxsSwMV5qX3/htanufDmyGwXkgw11PXkh4BJfdrBVmv39ElFnFPB/Qe31ZUR+hxwHfbnujj5yLwcuC1c4/yAUMg8NuwV/v9IQbXmLGIq62GB3U08vdhtc4rzh0BXOY0VYPYKu6QHq0hAtob1kr+YBKDuMp2+HUEC18GnBphHA9x+yuaInQs6RFQZNq83ZXeVsUgruJeY5UK6R3D2RuRcQxwRqgAMQ5v6vFCuL8whbkxiHsacFxEYxVhtd8KwRwRVY12KMWHa3HKkg6BSwBlAyWRGMRVhQFlWsQUXXgi73/GHHQiYz3Qi33JZ1rZRgpn/F0qzTGIq8WloSoBvgh4UyowRqLn+cBZI/GlBjeUoPAw4Kc9jd0GUHVNBcwofnpF6UtcKRo680erzcpv1A3CMh8BVVRQELwlDQJtSs8oSUG7L1rtF3dmf5UWKGm8xtOXuE8BLkqAj6rWKzF/6JtEAlcGV/E/DnEcHOOZAj1QVGhvsYiIWwSSiqD6t56o2oFZTrQS3ThXui9xXwW8OhFMeuIq5jPFjSKRS9HVbA78MPqoHnApBPQJp/xmkVK/Bweydtk7f0vbXYC+xNXdRgWwUkprJ1Mal1mXFvQ+mtkGq2+HgGIXFMPQSvoSV5Xit2ulMc7B3wrfcT+IM9xoRlHbkKjpY6NBpkxHVKxdRdtbS1/iql7tPVprjXOCkvO16vyOOMONYhStJmtV2VI+AgrUUMBGJ+lDXK2QqQlxblGrRSWLxwi7zO1LX/3qG6s2mJayEdDN9ew+JvYhrlbNSnlVVckcrfANGtjdB+hE5/4I2CyRLqvphoBalr6v26l3nNWHuIoUKa0AnJoc/1NfUCo+v00xg4rdrNZ07a9H2RXpQ9xHAf9WIIR6C1B1jdJuKimgMnFToNxNhyqdfrrbqXc9qw9x1bBI7RxKFRWle/GEuilokVCLhZbyEIien9uHuKrGXnoSgJIVjggNrsqbzrgW3dtlgOICGmE01VRTxtDnI4x1pyH6EPdvmwRDxza443iKcFGbxeXqPncctqjT7gdcV5RF0zZG5WtUlmmQT7Y+xFVol8qj1CICUnnDY63rXNIqfy3XxFB26pNFBei/OZSCPsRVrV4FtNcmAlPB3IOBmgkQ5+FmAn6RWsUTaOFWObqDSR/iyqiaVzHVue4lhQSRxJjgmj5dYvhb4hh6kKldibLZBpW+xFXy8Ly2goM60HNwtVhUGdMxvD4rz1PVNi15EFAnvl1DLevBLehLXIUban+qdtHq+FFDLSQkAidFUYNErlSnRrEDetKqrWwS6Utc9QFqnZKUxLNuSnQjUsaGso9qk01S3e1rA2Zge/UtK9Im3bHoS1xtLF86MDA5hv/XQOBBFxgiO7ZSm9PIqjxcQODbgNrvxOhq3wrUvsRVX5o/tNJY18EXhgofg7WSiAjH6hOKEosIW+ehRNZNAW0zJpe+xJXBCppW7akxi4p4nVLBK3TNq/y1XT9ajMq2MBuDuDsCaic4Bbk8lIuN1lk8MmgmbmRAVxhOZVn1eZJFYhBXhmvfalZiMosjiZWqu+CZgEqhJiuC3cBH2bJag+N8SH8EVLxQnydZJBZxp1qEW9/3Ks72HkDVJ3LLL4F1chsxIf2x+NMasliKVwGunXi/GpFGBP4goKbdOURJBko2sKRBIBZ/WlsbU7Gyb97e2oJxnqCbmMqT6FU6ZdNurX5vOU5Ii/RKrXdUtDC5xCSujFffEy2RW+5AQHvBWpX+SII0yCtCYW7jnwYBFS+4NY2qO2uJTVwVR1+qJUMO30rUqS4DIrD6If37AAb+B6BeNpY0CKyZq+pIbOIKLnVCV0d0y3wEVLNLW2lfDNVE+kbgaDyllFnSILB2jqgpuTYEcUus/phmGvtr0aa+4qT10z6hcju16KW/ioVdKYhdscp6JVfLR0saBNQ8PGmM8sytIYirsY/v2lohDd7WYgSiIKA6X7qxJpehiCtHvgJsn9wjKzQC6RBQ28yb06m7Q9OQxNV+orZCcvUWyoGndU4LAbXhqTbJYKWp2gcoNa53WpeYvR0CAYWXZsmOG/KJOwNKja/VANtiBMaGQAr+LIlZKsVKTH/S2GbN/kwegVT8uQvQXRQfCagrfFvRXuXObU/y8UagUASUibVGLtvaEndWZUElO5Q8r0igpiInFTG0W9MTfJwRKBiBGwDVFs8ibYm7MGle+YhHA+9sablCIhUaaTECNSOgXsTqHpFF2hL3ucB5iyxVaVPl47bpDHAicEIWj63UCMRB4DvAtnGGaj9KW+KeFvrvLKXpvaEuU9PKiAcAFwBKjbIYgdoQUJLILrmMbktckfPgOcZ+FjgbUIe8eaLcUWXLqO+NxQjUhIDWa/bLZXBb4l4SWgc2sVcf76oIIWIq/HE50RP3WOAYQJEoFiNQAwL/DByay9C2xNX3rBpatxU1Q7osEFhlXX4Ssl80jkIj1bBKokZcG7Yd3McbgQwIvD40jcugun1an5pKqbmUxQhMHQH1Wj49Fwhtn7haeNo6l7HWawQKQuA5wLtz2dOWuAq8eEguY63XCBSEwN6A1nyySFviuqZRlmmy0gIR0LpMtn7EbYmrrR51J7MYgakjkC2JXsC3Ja6KfR849Rmz/0agA3eigtaWuCp4rsLnFiMwZQTUgT5rr6y2xFWgRLYl8ClfKfa9KAT0yfjYnBa1Je4TgI/nNNi6jUABCCikV4k12aQtcVW7V1FPFiMwZQT05vnGnAC0Ja5sVQyy6slajMBUEdgfuDin812IK4OfmNNo6zYCmRFQ2O/3ctrQhbhHAWfkNNq6jUBmBFYFbstpQxfiqo2m2mlajMAUEbgG2Cq3412IK5tVtmOWipfbB+s3AikRUGO17EFIXYmrInFvTomWdRmBQhB4ZQkN7boSV5UqflMIkDbDCKREIPuKspztSlyd+y5AOYkWIzAlBDYGrsvtcB/ibgaotqzFCEwFATUbX7cEZ/sQV/afAxxegiO2wQgkQEDhvkXEMPQl7gaAMiXUbtBiBMaOQBELU32/cWeTpDQ/pftZjMDYEdgTuLQEJ/s+cWc+fBnYoQSHbIMRGBCBbB3oF/sUi7haafsuoG5+FiMwRgS+BWxXimOxiCt/9g1tNEvxzXYYgZgIKOBI3TaKkJjElUOvBV5ehGc2wgjEReBJwEfjDtl9tNjElSVn5a4O0B0On2kElkVgbeCmUvAZgrjy7UzgyFKctB1GoCcCRX3fypehiKux9cqsV2eLEagdgZOBV5XkxJDElZ+7AkqDKiJMrCTgbUtVCDwSUKfKYmRo4srR9UPn+T2K8dqGGIHmCBQTn7zQ5BTEnelTE2BVxnPz6uYXjY/Mj4A68hWXBZeSuJoCNa3WqvN++efDFhiBRggoqaC4WuKpiTtDavtQRcANxBpdOz4oEwK3AvfIpHtFtbmIOzNqF+DVwO4lgmObJo/Ae4BDSkQhN3FnmGwR8nqf5RXoEi+TydqkMN5PlOh9KcRdiM1BIe55N0D5vhYjkAOBW4A1cyhuorNE4i60W60MtRcsEu8MbNTEKR9jBCIgcC5wRIRxBhmidOIudlo9i3YMub9a4HoYcPdBkPGgU0dgJ0B55kVKbcRdCKIIrJhokddiBGIioCKIWncpVmojrkInDwAOBrQibTECQyBQTG2p5ZzLQdxtgFeE0q7XAj8F/rKMgSKqgjY2D9+6bnsyxGXqMRcjUETt5JWmJQdxtVJ3s68VI1AoAh8Jb3WFmne7WTmIK71fBZRxYTECpSGgXYwvlGbUYntyEfc44LTSwbF9k0PgKkCfcsVLLuK6x27xl8YkDXw2cH4NnucirrD5YgiqqAEn2zh+BIrMu10O9pzEPQxQdIrFCJSAwLEhX7wEW+bakJO4qwLXA2vNtdIHGIFhEVCv5/sBvxtWTbzRcxJXXiilr6giXPGg9UgVIXAScEJF9mbbDpphtE4IwHC8cU1Xzbhs/UNIXvl1TW7lfuIKK4WX6Y5nMQI5ENAbn8qvViUlEFe9dRXUvV5VyNnYMSBwI7AZ8PvanCmBuMJMxeOK6ctS2yTa3s4IPA84p/PZGU8shbiC4EJA1S8sRiAFAlcDW6dQNISOkoir5IMrXa5miGn2mEsgsBfwmVqRKYm4wnDbUHVAe7wWIzAUAh+rvbZ3acTVRKkA9cVDzZjHNQJh++dnNSNRInGF50uAU2sG1rYXi4A6SKqQQ9VSKnEF6hnAUVWja+NLQ0Dbjg8CbivNsLb2lExc+aKGSyqSbjECMRB4BPC1GAPlHqN04gqfC4Cn5wbK+qtH4A3Ai6v3IjhQA3Fl6vGhSdhYcLcfaREovtxqWzhqIa78UnSVgjSckNB2ln383wHfHhMMNRFXuD8YuAjYakyTYF8GRaCqBPmmSNRG3Jlf6mBwZFMnfdxkEbgM2GOM3tdKXM2FmmLr1Vn9hCxGYDECqiGlWGT9HZ3UTFxNhrqFK59Xr0MWI7AQgSrqI3edstqJO/Nb9YJOB57aFQifNyoEqkyObzMDYyHuzGd17jsR2KcNCD52VAhcCuw5Ko+WcGZsxJ25+ADgaOCZ3j4a+yV8J/9+HjoRqJv8qGWsxJ1Nmkq/Hgqo0oE6/lnGi4Aaye0ccrrH62XwbOzEXTiBegrvG36PGv3MTstBVWrcbSxxyE2mbkrEXYjHPYH9Q8/dHRzQ0eRSKfqYRwOXF21hZOOmStzFMIrIOwHbAzuGFqCrR8baww2DgAovfHyYocsd1cRdem5eP6ZMknIvv96WPQN4b+9RKhzAxL3rpGkrodoiYhVeg11N/kfgrK4n136eiXvnGdwF+DSgIu2WchHQXr36Tk1WTNw7pl6rkiLtKpO9GupwXBFyx9Vh6nBWmri3Y/sC4O3DweyRIyGguPTXRBqr6mGmTlzt7X4QeEjVszgN4xUJp3ROC2Rvs5lzEp4citF52yfnLDTTfThwXrNDp3HUFJ+42qt9HbD7NKa4ai/VRU832Euq9mIA46dEXNWs0uuWFqEs5SPw38DjphJ73HY6xk7c+wDPDokGm7QFx8dnQ+ArIaa8qi7xKdEaK3EVUSPC+nU45dUUR5eCKhRcYVkBgTERVxUglTjwfLfqrPaa1832/GqtT2h4zcRVfWUVjHtseK3yq3DCCyeyquvDTffrkccd7XC1EVcFwPT6qzQuhSda6kfgU8AhY63GONT0lEpcVW/cBrg/oCAJJb6ruoFlPAj8ETgGOHs8LqXzpATibgpsBqiTmoq96e9900FgTRkQUMe8gwD19LF0QCAFcbcIRBRBNw6/jQJZ/V3aYdIqP0VNpdVc2tIDgT7EVdWIDcMKruoaa89UPz0t1wdE1HV72OZTx4XAN8K37PfG5VYeb1Yirkj4ImANQPG8+qtvzxlZ3TUvz5zVqPVlwKk1Gl6qzfOeuNoXVVf4NUt1wHYVjcDnQjDF1UVbWaFx84grl9YJmRkiscUINEHgupDsrpRJywAINCHuTO2zgLeG1+YBTPGQI0BA9Y1PcbL78DPZhriyRqvCenV2DPDwc1OThtuAc8Nq8Y01GV6rrW2JO/NTkS5vAu5Vq+O2OxoCCqA4GVDfHksiBLoSV+ZphfmlwAtdYC3RbJWl5m1hpVhxxpbECPQh7szU9YCTAJUXsYwbAb0SK+1OBeNvGLerZXsXg7gzDxVwoYgYhbJZxoXAb0MVzDcAN43LtTq9iUncGQJKDlDB6qfUCYmtXoDAr4Azwm6CyGspBIEhiDtzTYkD+gY+rBBfbUZzBBT8r6erM3eaY5b0yCGJO3NE8coKnVTRcYVNWspF4DLgXcD7yzXRlgmBFMSdIa14Z3WG1yq04p0tZSDwTeB9oeud92DLmJO5VqQk7kJjjgCODMnyc430AdER+CHwAeAC4PvRR/eAgyOQi7gzx5Q4r1BKrUQ7mGPY6Vb88EWBsEqxs1SMQG7iLoTuwJCv+fiK8SzN9F8EsoqwXyrNONvTHYGSiDvzQnm+qmC/L7APcO/u7k3yTO2zfjg8WZVWZxkhAiUSdzHMOwQC7w1sN8I5iOGSvlkvBy4GPhljQI9RNgI1EHchgmsDe4Un8p6Awi2nKD8APr/g5wD/iV0FtRF38fQ8FNgJ0FNZP6UdjlFmT9QZWU3UMc5yC59qJ+5iV/U9LCLvCDw81GXeoAUeuQ/Vk/Qq4BpA5V709wrg1tyGWX9ZCIyNuEuhuyqwJaAysZuHvwrHVDVKkVrVKlOJYn/VPlI/pcNdG/ZRRdIrUxlhPfUjMAXizpulVUJZWZFYP0V1rQWsFvKM/yb81XGz318Bfwo/pbrN/lt/Z/++ZRFJXfx73kz4/zdGwMRtDJUPNALlIGDiljMXtsQINEbAxG0MlQ80AuUgYOKWMxe2xAg0RsDEbQyVDzQC5SBg4pYzF7bECDRG4P8A3SKu5/rwGYoAAAAASUVORK5CYII="}var maskImage = new Image();maskImage.src = data.image// 指定图表的配置项和数据
option = {tooltip: {show: true},series: [{type: "wordCloud",gridSize:6,//shape:'diamond',maskImage: maskImage,sizeRange: [12, 50],width:800,height:500,textStyle: {normal: {color: function() {return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';}},emphasis: {shadowBlur: 10,shadowColor: '#333'}},data:data.value}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

3.资源源码

资源源码已上传，https://download.csdn.net/download/Ace_2/12236165

资源我设置的0积分下载啊，咋还是要积分才能下。。。

需要源码的可以关注公众号“编程江湖”，回复“echarts”领取资源。

关注后还可以领取Java、Python、微信小程序等诸多学习资料和项目源码，还能查看精品技术文章，并给大家提供了CSDN资源下载服务。

echarts实现中国地图和自定义形状的词云图相关推荐

用echarts在百度地图bmap自定义形状
用echarts在百度地图bmap自定义形状创建html文件引入百度地图API.Echarts.以及echarts的百度地图插件BMap echarts和bmap可以到官网去下载, 这里的路径是本 ...
使用echarts配置中国地图
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
echarts实现中国地图各省背景根据数值大小变化的方法
很多人不清楚中国地图要怎么实现,其实 echarts 已经为我们封装好了,只要我们配置好各省数据就可以快捷实现了. 首先我们先来实现中国地图: 中国地图的实现 (1)引入 echarts 及中国地图 ...
Echarts实现——中国地图
Echarts实现--中国地图如下图: 使用Echarts进行地图绘制展示的时候,需要china.json: 举例在vue的项目中可以通过cnpm install echarts --save安装E ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
Echarts关于中国地图的china.js文件下载
原文出处:https://blog.csdn.net/weixin_36413887/article/details/80019625 早上用到Echarts的中国地图map时,需要用到china.j ...
echarts：中国地图实现
安装 npm install echarts --save 把chinaMap对应的js文件放到echarts目录下面,保证引用路径的正确性. 直接用npm install的map文件似乎用不了,可以 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...

echarts实现中国地图和自定义形状的词云图

1.中国地图

2.词云图

3.资源源码

echarts实现中国地图和自定义形状的词云图相关推荐

最新文章

热门文章