X軸數據太多，顯示不全設置

xAxis: [{type: 'category',axisLabel:{interval:0,//橫軸信息全部顯示rotate: -30 //-30度角傾斜顯示},

設置Y坐標的最大值和單位

yAxis : [{name: '流量(m^3/s)',type: 'value',max: 500,axisLabel : {show:true,interval: 'auto', // {number}rotate: -45,margin: 18,formatter: '{value} ml' //單位},

數據加個單位：顯示相關的label或tooltip都支持formatter，如數值軸你就可以通過axis的axisLabel.formatter做換算控制，支持function

?

Y軸保留1位小數

yAxis : [{type : 'value',axisLabel: {formatter: function (value, index) {return value.toFixed(1);}}} ],

?鼠標懸停數據提示帶單位

tooltip: {trigger: 'axis',formatter: "收支統計 : <br/>{b} : {c}萬" }, 柱狀圖數據帶上單位 series: [{type: 'bar',itemStyle: {normal: {label: {show: true,position: 'top',formatter: '￥{c}'}}},
柱狀圖修改顏色 name: '合計工時', type: 'bar', itemStyle: {normal: {color: '#00bfff',label : {show: true,position: 'top',textStyle: {color: '#00bfff'}}} },

?中國地圖echart3.js

var option = {timeline: {data: ['2002-01-01','2003-01-01','2004-01-01',{value: '2005-01-01',tooltip: {formatter: '{b} GDP達到一個高度'},symbol: 'diamond',symbolSize: 16},'2006-01-01'],label: {formatter: function (s) {var date = new Date(s);var month = date.getMonth() + 1;return date.getFullYear() + "-" + (month > 9 ? month : '0' + month);}}, // autoPlay : true,playInterval: 1000,symbolSize: 15,width: '750'},grid: {bottom: 100 //留位置給日期軸},options: [{tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left',data: ['累計成交額']},visualMap: {min: 0,max: 2500,left: 'left',top: 'bottom',text: ['高', '低'], // 文本，默認為數值文本calculable: true},series: [{name: '累計成交額',type: 'map',mapType: 'china',roam: false,label: {normal: {show: true},emphasis: {show: true}},'data': dataMap.dataGDP['2002']}]}, // { // series : [ // {'data': dataMap.dataGDP['2003']} // ] // }] }; $.get('__PUBLIC__/js/plugins/visualization/echarts/map/china.json', function (chinaJson) {echarts.registerMap('china', chinaJson);var myChart = echarts.init(document.getElementById('chart_div'));for (var year = 2003; year <= 2006; year++) {option.options.push({series : [{'data': dataMap.dataGDP[year]}]});}myChart.setOption(option);myChart.on('mapselectchanged',function($params){console.log($params.data.name); //省的名稱 }); });

echart2制作中國地圖,點擊對應的省市鏈接到該省份的詳細介紹

require(['echarts', 'echarts/chart/map'], function (charts) {var myChart = charts.init(document.getElementById('chart_div'));var option = {title: {text: '全國34個省市自治區',subtext: '中國地圖（點擊切換）'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',x: 'right',data: ['隨機數據']},dataRange: {min: 0,max: 1000,text: ['高', '低'], // 文本，默認為數值文本calculable: true},series: [{name: '隨機數據',type: 'map',mapType: 'china',selectedMode: 'single',roam: true,itemStyle: {normal: {label: {show: true}},emphasis: {label: {show: true}}},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: 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)},{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)}]}]};myChart.setOption(option);var ecConfig = require('echarts/config');myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {var selected = param.selected;var selectedProvince;var name;for (var i = 0, l = option.series[0].data.length; i < l; i++) {name = option.series[0].data[i].name;option.series[0].data[i].selected = selected[name];if (selected[name]) {selectedProvince = name;}}if (typeof selectedProvince == 'undefined') { //城市點擊后option.series[0].mapType = 'china';option.title.subtext = '中國地圖（點擊切換）';myChart.setOption(option, true);return;}option.series[0].mapType = selectedProvince;//根據省取動態數據option.series[0].data.push({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)});option.title.subtext = selectedProvince + ' （點擊切換）';myChart.setOption(option, true);}); });

?

總結

以上是生活随笔為你收集整理的echarts 地图统计的全部內容，希望文章能夠幫你解決所遇到的問題。

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