當(dāng)前位置：首頁 >

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

發(fā)布時間：2023/12/8 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

1.柱形圖

先來看看效果啦

重要代碼如下所示，必須引入echarts.js文件，之后初始化echarts,最重要的是修改option中的配置項與數(shù)據(jù)，echarts學(xué)習(xí)網(wǎng)頁，這里面有許多配置項，根據(jù)你的需要修改啦

<head><meta charset="UTF-8"> <title>柱形圖</title> <script src="../js/echarts.js"></script> </head> <body> <div id="main" style="height: 400px; width: 600px"></div><script type="text/javascript">//進(jìn)行echrts的初始化，以及定位到畫布var mychart = echarts.init(document.getElementById("main"));//配置項和配置數(shù)據(jù)var option={//標(biāo)題title:{text:'echarts入門實例'},//圖例legend:{data:['銷量']},//橫軸xAxis:{data:['襯衫','羊毛衫','雪紡衫','褲子','高跟鞋','襪子']},//縱軸yAxis:{ },//數(shù)據(jù)series:[{name:'銷量',type:'bar',data:[5,10,36,20,10,10]}]};mychart.setOption(option)</script> </body>

2.折線圖+柱形圖

先來看看效果啦

繪制折線圖時只需要將series中每一項的type改為“l(fā)ine”即可，其他與柱形圖相同；
鼠標(biāo)放上去顯示文字，需要開啟tooltip;繪制多個柱形圖時只需要增加legend與series即可
主要代碼如下：

var option={//標(biāo)題title:{text:'折線圖',subtext:'副標(biāo)題'},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不需要設(shè)置x,y坐標(biāo)（ xAxis，yAxis）；繪制餅圖的進(jìn)階版南丁格爾圖時只需要增加rosetype為radius

//配置項和配置數(shù)據(jù)var option={//標(biāo)題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.環(huán)形圖

先來看看效果啦

重要代碼：

series:[{type:'pie',//半徑大小圓心位置radius:['55%','70%'],//center:['50%','50%'],label:{normal:{//取消原來的顯示模式show:false,//在中間顯示position:'center'},//高亮扇區(qū)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,需要輸入地區(qū)的經(jīng)緯度，及其地區(qū)的名稱和地區(qū)的數(shù)據(jù)值；
參考鏈接：

//將數(shù)據(jù)拼接起來 var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];//經(jīng)緯度if (geoCoord) {res.push({name: data[i].name,//名稱value: geoCoord.concat(data[i].value)//經(jīng)緯度+數(shù)據(jù)值});}}return res; }; //配置項和配置數(shù)據(jù)var option={//標(biāo)題title:{text:'中國地圖散點圖',left:'center'},tooltip:{},geo:{//定義地圖的類型map:'china'},visualMap:{type:'continuous',min:0,max:200,calculable: true,inRange:{color:['#50a3ba','#eac736','#d94e5d','#A9D940']},//當(dāng)鼠標(biāo)放上去的現(xiàn)實的文本顏色textStyle: {color:'#000000'},left:'right'},series:[{name:'崗位數(shù)量',//畫地圖的類型type:'scatter',//當(dāng)前類型為geo類型coordinateSystem:'geo',data:convertData(data)}]};

6.百度地圖散點圖

先來看看效果啦

這里用到了Bmap-百度地圖，需要在百度地圖開發(fā)平臺創(chuàng)建自己的應(yīng)用，注冊登陸后，點擊控制臺->應(yīng)用管理->創(chuàng)建應(yīng)用，如下填寫：

返回管理頁面，復(fù)制AK碼，如下引入html頭中：

還需要bmap.js文件，重要代碼如下：

option={title:{text:'全國主要城市空氣質(zhì)量-百度地圖',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個標(biāo)記點顯示水紋type:'effectScatter',coordinateSystem:'bmap',data:convertData(data.sort(function (a,b) {return b.value-a.value}).slice(0,5)),//取5個數(shù)值symbolSize:function (val) {return val[2]/10;},showEffection:'render',//顯示水紋rippleEffect:{brushType:'stroke'},itemStyle:{normal:{color:'purple'}}}]};

7.詞云圖

先來看看效果啦

通過設(shè)置圖片base64碼，可以設(shè)置不同的形狀，圖標(biāo)網(wǎng)站搜索圖標(biāo)選擇白色下載,可以使用代碼將圖片轉(zhuǎn)換為base64編碼，也可以直接在線轉(zhuǎn)換圖片轉(zhuǎn)base64,重要代碼如下：

干貨來了

https://www.echartsjs.com/zh/index.html 百度echarts學(xué)習(xí)網(wǎng)站
http://lbs.baidu.com 百度地圖開發(fā)平臺
https://www.iconfont.cn 圖標(biāo)網(wǎng)站
http://tool.chinaz.com/tools/imgtobase 在線圖片轉(zhuǎn)base64

bmap echarts-wordcloud china echarts js文件下載鏈接百度網(wǎng)盤提取碼：jsi0

https://github.com/Ccxcui/study_echarts 本博客所有源碼
歡迎大家參考指摘！

總結(jié)

以上是生活随笔為你收集整理的echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android高德地图使用自定义指南针
下一篇：车牌生成代码车牌后5位生成代码