echarts实例-cloud字符云图、map中国数据地图、循环换色的柱状图

## 需要china.js或者其他省份的js或者json的可以去echarts官方下载

echarts官方gitHub，map文件夹下是地图的依赖
echarts扩展wordcloud云图github

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}a{text-decoration: none;}ul,ol{list-style: none;}img,button,input{outline: none;}html,body{min-width: 100%;height: 100%;font-family:Microsoft YaHei;font-size: 14px;}.clear:after{display: block;content:'';clear: both;}.echarts-wrap{margin-top: 20px;}.echarts-wrap>ul>li{float: left;width: 100px;color: #fff;background: rgba(65,109,158,1);float: left;height: 30px;line-height: 30px;text-align: center;font-weight: bold;cursor: pointer;box-shadow:1px 0px 0px 0px rgba(178,181,190,0.4), -1px 0px 0px 0px rgba(178,181,190,0.4), 0px -1px 0px 0px rgba(178,181,190,0.4);border-radius:4px 4px 0px 0px;margin-right: 6px;}.echarts-wrap>ul>li.active{color: rgba(65,109,158,1);background-color: #fff;}.echarts-wrap>div{position: relative;height: 440px;}.echarts-item{width: 100%;padding: 10px;height: 440px;background-color: #fff;border-radius:0 4px 4px 4px;position: absolute;z-index: 1;top: 0;left: 0;}.echarts-item>div,.echarts-item canvas{width: 100%!important;height: 100%!important;}</style>
</head>
<body><div class="echarts-wrap"><ul class="clear"><li class="active">云图</li><li>地图</li><li>柱状图</li></ul><div ><div class="echarts-item hot-word" style="z-index: 2;"><div id="echarts-word"></div></div><div class="echarts-item map-wrap"><div id="echarts-map"></div></div><div class="echarts-item video-source"><div id="echarts-source"></div></div></div></div><script src="./jquery-1.9.1.min.js"></script><script src="./echarts.min.js"></script><script src="./china.js"></script><script src="./echarts-wordcloud.min.js"></script><script>$('.echarts-wrap>ul>li').click(function(){$(this).addClass('active').siblings().removeClass('active')$('.echarts-item').eq($(this).index()).css('z-index',2).siblings().css('z-index',1);})// 词云var cloudChart = echarts.init(document.getElementById('echarts-word'));cloudChart.setOption({series: [{type: 'wordCloud',gridSize: 5,sizeRange: [12, 50],rotationRange: [-90, 90],shape: 'circle',width: 400,height: 400,drawOutOfBound: true,textStyle: {normal: {color: function () {return 'rgb(' + [Math.round(Math.random() * 255),Math.round(Math.random() * 255),Math.round(Math.random() * 255)].join(',') + ')';}},emphasis: {shadowBlur: 10,shadowColor: ''}},// Data is an array. Each array item must have name and value property.data: [{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: 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: 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}]}]});// 地图var mapChart = echarts.init(document.getElementById('echarts-map'));var mapOption = {tooltip : {trigger: 'item'},dataRange: {x: 'left',y: 'bottom',splitList: [{start: 1200, color: '#E94644'},{start: 900, end: 1200, color: '#ED6E6C'},{start: 600, end: 900, color: '#F29593'},{start: 300, end: 600, color: '#F7B7B6'},{start: 0, end: 300, color: '#FBF2F2'},]},series : [{name: '文章数',type: 'map',showLegendSymbol: false,mapType: 'china',roam: false,top:'5px',bottom:'5px',itemStyle:{normal:{label:{show:true,textStyle: {color: "#333"}}}},emphasis:{label:{show:false}},data:[{name: '北京',value: Math.round(Math.random()*1000)},{name: '天津',value: Math.round(Math.random()*1000)},{name: '上海',value: Math.round(Math.random()*1000)},{name: '重庆',value: Math.round(Math.random()*1000)},{name: '河北',value: 0},{name: '河南',value: Math.round(Math.random()*1000)},{name: '云南',value: 5},{name: '辽宁',value: 305},{name: '黑龙江',value: Math.round(Math.random()*1000)},{name: '湖南',value: 200},{name: '安徽',value: Math.round(Math.random()*1000)},{name: '山东',value: Math.round(Math.random()*1000)},{name: '新疆',value: Math.round(Math.random()*1000)},{name: '江苏',value: Math.round(Math.random()*1000)},{name: '浙江',value: Math.round(Math.random()*1000)},{name: '江西',value: Math.round(Math.random()*1000)},{name: '湖北',value: Math.round(Math.random()*1000)},{name: '广西',value: Math.round(Math.random()*1000)},{name: '甘肃',value: Math.round(Math.random()*1000)},{name: '山西',value: Math.round(Math.random()*1000)},{name: '内蒙古',value: Math.round(Math.random()*1000)},{name: '陕西',value: Math.round(Math.random()*1000)},{name: '吉林',value: Math.round(Math.random()*1000)},{name: '福建',value: Math.round(Math.random()*1000)},{name: '贵州',value: Math.round(Math.random()*1000)},{name: '广东',value: Math.round(Math.random()*1000)},{name: '青海',value: Math.round(Math.random()*1000)},{name: '西藏',value: Math.round(Math.random()*1000)},{name: '四川',value: Math.round(Math.random()*1000)},{name: '宁夏',value: Math.round(Math.random()*1000)},{name: '海南',value: Math.round(Math.random()*1000)},{name: '台湾',value: Math.round(Math.random()*1000)},{name: '香港',value: Math.round(Math.random()*1000)},{name: '澳门',value: Math.round(Math.random()*1000)}]}]};mapChart.setOption(mapOption,true)// 柱状图var barChart = echarts.init(document.getElementById('echarts-source'));var barOption = {tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'},formatter: function(params){return params[0].marker+'文章数: '+params[0].data+'条'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['人民网','新华网','中国新闻网','中国经济网','央广网','中青网','光明网','新京报'],axisTick: {alignWithLabel: true}}],yAxis: [{type: 'value'}],series: [{name: '文章数',type: 'bar',barWidth: '25%',itemStyle: {normal: {//每个柱子的颜色为一组，循环color: function(params) {var colorList = ['#DC997F','#829ECC','#AF9FBE','#9DC587','#8BC7CB','#A3B1C3','#84C2AC','#C2BBB4']return colorList[params.dataIndex]}}},data: [1180, 1008, 980, 700, 680, 620, 450, 350]}]}barChart.setOption(barOption)$(window).resize(function(){cloudChart.resize();mapChart.resize();barChart.resize();})</script>
</body>
</html>

效果

echarts实例-cloud字符云图、map中国数据地图、循环换色的柱状图相关推荐

细分到市级的中国数据地图生成模板
在中国数据地图系列日志之后,很多网友询问有没有细分到市级的版本,以便进行市级数据分析. 说实话,要做到市级地图,工程量可谓浩大:一是没有到市级的矢量图形,手工绘制的难度不可想象:二是图形与地名对应 ...
excel做地图热力图_中国数据地图(热力图)-到市级-分档填色
60~80 60 昆明市 Kunming 53.53 color3 5 80~+ 80 曲靖市 Qujing 14.15 color1 6 + 玉溪市 Yuxi 16.90 color1 7 昭通市 ...
【前端小实例】Javascript实现糖果色可爱时钟，带换色按钮
效果预览代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
全球PM2.5空气颗粒污染分布数据地图
一个让人心痛的数据地图.美国太空总署(NASA)2010.9.22日发布的全球PM2.5数值图(2001-2006),原图来源. Global satellite-derived map of PM2 ...
dev里timeedit控件如何赋值_如何制作高逼格的数据地图（二）
上一期介绍的是如何通过Power Map制作数据地图.但如果Excel在没有安装该组件,应该怎么办?如果希望实现更加个性化的设置,又有什么方法? 那么,通过VBA代码也可以实现数据地图的制作. 相比之 ...
echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】
效果图: 1.点击省,跳转到河北省 2.返回,从省返回到中国地图话不多说,直接上代码,1.复制粘贴,2.在引入对应js即可注:全部各省地图,下载地址:** <!DOCTYPE html> ...
Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
用echarts3和worldcloud制作炫酷的字符云图
最近有个项目需要做出云图来,一开始还不知道云图是什么鬼,直到需求在网上找了个图我才恍然大悟,但是大悟完就开始一脸懵逼了,这玩意怎么做?因为当时项目紧,项目经理就先叫我用photoshop画了一个云图给 ...
Echarts.js+jquery.js+china.js实现中国疫情地图
目录一.程序代码二.源码下载一.程序源码 <!DOCTYPE html> <html lang="en"><head><meta c ...

echarts实例-cloud字符云图、map中国数据地图、循环换色的柱状图

完整代码

效果

echarts实例-cloud字符云图、map中国数据地图、循环换色的柱状图相关推荐

最新文章

热门文章