echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)

文末附带github本文所有源代码，以及bmap.js,china.js,echarts.js,echarts-wordcloud.js文件啦

1.柱形图

先来看看效果啦

重要代码如下所示，必须引入echarts.js文件，之后初始化echarts,最重要的是修改option中的配置项与数据，echarts学习网页，这里面有许多配置项，根据你的需要修改啦

<head><meta charset="UTF-8">
<!-- 这里是标题--><title>柱形图</title>
<!--  一定要  引入echarts.js--><script src="../js/echarts.js"></script>
</head>
<body>
<!--    定义画布--><div id="main" style="height: 400px; width: 600px"></div><script type="text/javascript">//进行echrts的初始化，以及定位到画布var mychart = echarts.init(document.getElementById("main"));//配置项和配置数据var option={//标题title:{text:'echarts入门实例'},//图例legend:{data:['销量']},//横轴xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},//纵轴yAxis:{ },//数据series:[{name:'销量',type:'bar',data:[5,10,36,20,10,10]}]};mychart.setOption(option)</script>
</body>

2.折线图+柱形图

先来看看效果啦

绘制折线图时只需要将series中每一项的type改为“line”即可，其他与柱形图相同；
鼠标放上去显示文字，需要开启tooltip;绘制多个柱形图时只需要增加legend与series即可
主要代码如下：

var option={//标题title:{text:'折线图',subtext:'副标题'},tooltip:{},legend:{data:['衬衫','裤子','袜子']},xAxis:{data:['星期一','星期二','星期三','星期四','星期五','星期六','星期天']},yAxis:{},series:[{name:'衬衫',type:'bar',data:[5,20,36,70,30,50,100]},{name:'裤子',type:'bar',data:[6,10,36,20,10,10,80]},{name:'袜子',type:'line',data:[9,5,10,36,20,10,10]}]};

3.饼图+南丁格尔图

先来看看效果啦

重要代码：相比bar和line不需要设置x,y坐标（ xAxis，yAxis）；绘制饼图的进阶版南丁格尔图时只需要增加rosetype为radius

//配置项和配置数据var option={//标题title:{text:'饼图'},tooltip:{},legend:{data:['毛衣','呢子','衬衫','裤子','袜子']},series:[{type:'pie',//半径大小 圆心位置radius:'55%',center:['50%','50%'],data:[{name:'毛衣',value:335},{name:'呢子',value:90},{name:'衬衫',value:450},{name:'裤子',value:200},{name:'袜子',value:50},],//南丁格尔类型//roseType:'radius'}]};

4.环形图

先来看看效果啦

重要代码：

            series:[{type:'pie',//半径大小 圆心位置radius:['55%','70%'],//center:['50%','50%'],label:{normal:{//取消原来的显示模式show:false,//在中间显示position:'center'},//高亮扇区emphasis:{show:true,textStyle:{fontSize:'30',fontWeight:'bold'}}},data:[{name:'毛衣',value:335},{name:'呢子',value:90},{name:'衬衫',value:450},{name:'裤子',value:200},{name:'袜子',value:50},]

5.中国地图散点图

先来看看效果啦

重要代码：在head里引入china.js,需要输入地区的经纬度，及其地区的名称和地区的数据值；
参考链接：

//将数据拼接起来
var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];//经纬度if (geoCoord) {res.push({name: data[i].name,//名称value: geoCoord.concat(data[i].value)//经纬度+数据值});}}return res;
};
//配置项和配置数据var option={//标题title:{text:'中国地图散点图',left:'center'},tooltip:{},geo:{//定义地图的类型map:'china'},visualMap:{type:'continuous',min:0,max:200,calculable: true,inRange:{color:['#50a3ba','#eac736','#d94e5d','#A9D940']},//当鼠标放上去的现实的文本颜色textStyle: {color:'#000000'},left:'right'},series:[{name:'岗位数量',//画地图的类型type:'scatter',//当前类型为geo类型coordinateSystem:'geo',data:convertData(data)}]};

6.百度地图散点图

先来看看效果啦

这里用到了Bmap-百度地图，需要在百度地图开发平台创建自己的应用，注册登陆后，点击控制台->应用管理->创建应用，如下填写：

返回管理页面，复制AK码，如下引入html头中：

<script src="http://api.map.baidu.com/api?v=2.0&ak=NWj6TxLiZvWMCrlG1SCzyU7bk6rGLkwD"></script>

还需要bmap.js文件，重要代码如下：

option={title:{text:'全国主要城市空气质量-百度地图',subtext:'data from PM2.5.in',left:'center'},tooltip:{},bmap:{center:[104.114129,37.550339],//打开地图时的定位zoom:5,//缩放比例roam:false//是否允许自由缩放},series:[{name:'PM2.5',type:'scatter',coordinateSystem: 'bmap',data:convertData(data),symbolSize:function (val) {return val[2]/10;},itemStyle:{normal:{color:'purple'}}},{name:'top5',//5个标记点显示水纹type:'effectScatter',coordinateSystem:'bmap',data:convertData(data.sort(function (a,b) {return b.value-a.value}).slice(0,5)),//取5个数值symbolSize:function (val) {return val[2]/10;},showEffection:'render',//显示水纹rippleEffect:{brushType:'stroke'},itemStyle:{normal:{color:'purple'}}}]};

7.词云图

先来看看效果啦

通过设置图片base64码，可以设置不同的形状，图标网站搜索图标选择白色下载,可以使用代码将图片转换为base64编码，也可以直接在线转换图片转base64,重要代码如下：

     var jsonlist= [];jsonlist.push({'name':"花鸟市场","value":1446},{'name':"汽车","value":928},{'name':"我","value":1456},//如上定义);//五角星图片image="data:image/png;base64,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";var maskImage = new Image();maskImage.src = image;//配置项和配置数据var option = {title:{text:'词云图',left:'center'},series:[{maskImage:maskImage,//指定它的类型type:'wordCloud',//设置字符大小范围sizeRange: [6,66],rotationRange: [-45,90],textStyle:{normal:{color:function () {//随机颜色return 'rgb('+[Math.round(Math.random()*160),Math.round(Math.random()*160),Math.round(Math.random()*160)].join(',')+')';}}},//调用数据data:jsonlist}]};maskImage.onload = function(){//调用设置选项mychart.setOption(option)} ;

干货来了

https://www.echartsjs.com/zh/index.html 百度echarts学习网站
http://lbs.baidu.com 百度地图开发平台
https://www.iconfont.cn 图标网站
http://tool.chinaz.com/tools/imgtobase 在线图片转base64

bmap echarts-wordcloud china echarts js文件下载链接百度网盘提取码：jsi0

https://github.com/Ccxcui/study_echarts 本博客所有源码
欢迎大家参考指摘！