當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【ECharts学习】—实现中国地图

發布時間：2024/1/8 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了【ECharts学习】—实现中国地图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

【ECharts學習】—實現中國地圖

使用Echarts進行地圖繪制展示的時候，需要china.js的引入，我把它放在百度網盤里了，需要的自取

點我跳轉到百度網盤

提取碼：clby

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src='js/echarts.min.js'></script><script src='js/china.js'></script><style>#china_chart {width: 1000px;height: 800px;border: 1px solid #999;}</style> </head><body><div id="china_chart"></div><script>var china_chart = echarts.init(document.getElementById('china_chart'));//數據純屬虛構 [{城市:數據,...}]var data = [{name: '江蘇',value: 1}, {name: '北京',value: 34}, {name: '上海',value: 68}, {name: '重慶',value: 23}, {name: '河北',value: 34}, {name: '河南',value: 3.2}, {name: '云南',value: 1.6}, {name: '遼寧',value: 4.3}, {name: '黑龍江',value: 4.1}, {name: '湖南',value: 2.4}, {name: '安徽',value: 33}, {name: '山東',value: 54}, {name: '新疆',value: 1}, {name: '浙江',value: 44}, {name: '江西',value: 22}, {name: '湖北',value: 2.1}, {name: '廣西',value: 3.0}, {name: '甘肅',value: 1.2}, {name: '山西',value: 3.2}, {name: '內蒙古',value: 3.5}, {name: '陜西',value: 2.5}, {name: '吉林',value: 4.5}, {name: '福建',value: 2.8}, {name: '貴州',value: 1.8}, {name: '廣東',value: 3.7}, {name: '青海',value: 0.6}, {name: '西藏',value: 0.4}, {name: '四川',value: 3.3}, {name: '寧夏',value: 0.8}, {name: '海南',value: 1.9}, {name: '臺灣',value: 0.1}, {name: '香港',value: 0.1}, {name: '澳門',value: 0.1}];var option = {title: {show: true,text: '排名情況',},tooltip: { //懸浮彈框show: true,// formatter: function(params) {//data series里面數據 =[{name:'',value:''},{}] // return params.name + '：' + params.value + '人';// },formatter: '{a}-{b}:{c}人',},visualMap: [{ //visualMap 是視覺映射組件，用于進行『視覺編碼 visualMap：圖注樣式定制，其中包括color范圍，文字提示// type:'continuous',//連續型視覺映射組件 type: 'piecewise',//類型為連續型type: 'piecewise', //分段型視覺映射組件// orient: 'horizontal',//如何放置 visualMap 組件，水平（'horizontal'）或者豎直（'vertical'）。// itemWidth: 40,// itemHeight: 20,// text: ['高', '低'],// min: 1,//最小值區域小于1 顯示的green// max: 60,//大于4顯示 red 剩余是中間區域blue 左右疊色// inRange: {// color: ['green','red','yellow']// },// bottom: 30,// left: 'left',}],geo: { //地理坐標系組件 geo:定義地圖為china 常用zoommap: 'china', //地圖類型。ECharts 3 中因為地圖精度的提高，不再內置地圖數據增大代碼體積 map/js/china.js// zoom:1,//視角縮放比例 label: {show: true},emphasis: { //高亮label: { //地圖的標簽名字show: true},itemStyle: { //區域樣式 hover樣式areaColor: 'pink'}}},series: [{name: '地圖',type: 'map', //地圖geoIndex: 0, //映射visualMap 顏色配置data: data}]};china_chart.setOption(option);</script> </body></html>

總結

以上是生活随笔為你收集整理的【ECharts学习】—实现中国地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。