需要的js有
0.jquery
1.echart.js
2,china.js
代碼奉上
html頁面
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>echarts中國(guó)地圖</title>
? ? <style>
? ? ? ? .centerItem {
? ? ? ? ? ? width: 856px;
? ? ? ? ? ? height: 640px;
? ? ? ? ? ? background-color: #003077;
? ? ? ? ? ? margin: 110px auto 0 auto;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <!-- 中國(guó)地圖展示 -->
? ? <div id="mapBox" class="centerItem"></div>
? ? <!-- 引入相關(guān)文件 -->
? ? <script src="js/jquery-2.1.0.js"></script>
? ? <!-- 引入 ECharts 文件 -->
? ? <script src="js/echarts.js"></script>
? ? <script src="js/china.js"></script>
? ? <script>
? ? ? ? // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
? ? ? ? var mapBoxEchart = echarts.init(document.getElementById('mapBox'));
? ? ? ? var geoCoordMap = { //可以在地圖上顯示的城市的坐標(biāo)信息
? ? ? ? ? ? '安徽省銅陵': [117.81154, 30.945515],
? ? ? ? ? ? '長(zhǎng)春': [125.8154, 44.2584],
? ? ? ? ? ? '長(zhǎng)沙': [113.0823, 28.2568],
? ? ? ? ? ? '貴陽': [106.6992, 26.7682],
? ? ? ? ? ? '楊凌': [109.1162, 34.2004],
? ? ? ? ? ? '深圳': [114.5435, 22.5439],
? ? ? ? ? ? '濟(jì)南': [117.1582, 36.8701],
? ? ? ? ? ? '海口': [110.3893, 19.8516],
? ? ? ? ? ? '沈陽': [123.1238, 42.1216],
? ? ? ? ? ? '武漢': [114.3896, 30.6628],
? ? ? ? ? ? '紅安': [114.23, 31.1],
? ? ? ? ? ? '昆明': [102.9199, 25.4663],
? ? ? ? ? ? '杭州': [119.5313, 29.8773],
? ? ? ? ? ? '成都': [103.9526, 30.7617],
? ? ? ? ? ? '拉薩': [91.1865, 30.1465],
? ? ? ? ? ? '天津': [117.4219, 39.4189],
? ? ? ? ? ? '合肥': [117.29, 32.0581],
? ? ? ? ? ? '呼和浩特': [111.4124, 40.4901],
? ? ? ? ? ? '哈爾濱': [127.9688, 45.368],
? ? ? ? ? ? '北京': [116.4551, 40.2539],
? ? ? ? ? ? '南京': [118.8062, 31.9208],
? ? ? ? ? ? '南寧': [108.479, 23.1152],
? ? ? ? ? ? '南昌': [116.0046, 28.6633],
? ? ? ? ? ? '烏魯木齊': [87.9236, 43.5883],
? ? ? ? ? ? '上海': [121.4648, 31.2891],
? ? ? ? ? ? '三亞': [109.5000, 18.2000]
? ? ? ? };
? ? ? ? var HFData = [ // 數(shù)據(jù)中name的城市名稱必須與geoCoordMap中城市名稱一致, 不然關(guān)聯(lián)不上，合肥到各地區(qū)的線路
? ? ? ? ? ? [{name: '合肥'}, {name: '長(zhǎng)春',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '長(zhǎng)沙',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '貴陽',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '楊凌',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '深圳',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '濟(jì)南',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, { name:'?？?,value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '沈陽',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '武漢',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '昆明',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '合肥',value: 118}],
? ? ? ? ? ? [{name: '合肥'}, {name: '杭州',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '成都',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '拉薩',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '天津',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '呼和浩特',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '哈爾濱',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '北京',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '南寧',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '南昌',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '烏魯木齊',value: 66}],
? ? ? ? ? ? [{name: '合肥'}, {name: '上海',value: 66}],
? ? ? ? ? ? [{name: '成都'}, {name: '長(zhǎng)春',value: 67}],
? ? ? ? ? ? [{name: '成都'}, {name: '長(zhǎng)沙',value: 67}],
? ? ? ? ? ? [{name: '成都'}, {name: '貴陽',value: 67}],
? ? ? ? ? ? [{name: '成都'}, {name: '楊凌',value: 67}],
? ? ? ? ? ? [{name: '成都'}, {name: '深圳',value: 67}],
? ? ? ? ? ? [{name: '成都'}, {name: '濟(jì)南',value: 67}],
? ? ? ? ? ? [{name: '成都'}, { name: '?？?,value: 67}]
? ? ? ? ];
? ? ? ? var planePath = 'arrow'; // 箭頭的svg
? ? ? ? // push進(jìn)去線路開始-結(jié)束地點(diǎn)-經(jīng)緯度
? ? ? ? var convertData = function(data) {
? ? ? ? console.log("data",data);
? ? ? ? ? ? var res = [];
? ? ? ? ? ? for (var i = 0; i < data.length; i++) {
? ? ? ? ? ? ? ? var dataItem = data[i];
? ? ? ? ? ? ? ? var fromCoord = geoCoordMap[dataItem[0].name];
? ? ? ? ? ? ? ? var toCoord = geoCoordMap[dataItem[1].name];
? ? ? ? ? ? ? ? if (fromCoord && toCoord) {
? ? ? ? ? ? ? ? ? ? res.push([{
? ? ? ? ? ? ? ? ? ? ? ? coord: fromCoord
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? coord: toCoord
? ? ? ? ? ? ? ? ? ? }]);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? return res;
? ? ? ? };
? ? ? ? var color = ['#fff', '#FFFFA8', '#46bee9']; //圓圈和字的顏色，線的顏色，箭頭顏色
? ? ? ? // 數(shù)據(jù)
? ? ? ? var series = [];
? ? ? ? // 遍歷由合肥到其他城市的線路
? ? ? ? [
? ? ? ? ? ? ['合肥', HFData]
? ? ? ? ].forEach(function(item, i) {
? ? ? ? ? ? // 配置
? ? ? ? ? ? series.push({
? ? ? ? ? ? ? ? // 系列名稱，用于tooltip的顯示
? ? ? ? ? ? ? ? name: item[0],
? ? ? ? ? ? ? ? type: 'lines',
? ? ? ? ? ? ? ? zlevel: 1, // 用于 Canvas 分層，不同zlevel值的圖形會(huì)放置在不同的 Canvas 中
? ? ? ? ? ? ? ? // effect出發(fā)到目的地 的白色尾巴線條
? ? ? ? ? ? ? ? // 線特效的配置
? ? ? ? ? ? ? ? effect: {
? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? period: 6, // 特效動(dòng)畫的時(shí)間，單位為 s
? ? ? ? ? ? ? ? ? ? trailLength: 0.1, // 特效尾跡的長(zhǎng)度。取從 0 到 1 的值，數(shù)值越大尾跡越長(zhǎng)
? ? ? ? ? ? ? ? ? ? color: '#46bee9', // 移動(dòng)箭頭顏色
? ? ? ? ? ? ? ? ? ? symbol: planePath,
? ? ? ? ? ? ? ? ? ? symbolSize: 6 // 特效標(biāo)記的大小
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? // lineStyle出發(fā)到目的地 的線條顏色
? ? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? color: color[i],
? ? ? ? ? ? ? ? ? ? ? ? width: 0,
? ? ? ? ? ? ? ? ? ? ? ? curveness: 0.2 //幅度
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? data: convertData(item[1]) //開始到結(jié)束數(shù)據(jù)
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? //出發(fā)地信息
? ? ? ? ? ? ? ? name: item[0],
? ? ? ? ? ? ? ? type: 'lines',
? ? ? ? ? ? ? ? zlevel: 2,
? ? ? ? ? ? ? ? effect: {
? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? period: 6,
? ? ? ? ? ? ? ? ? ? trailLength: 0,
? ? ? ? ? ? ? ? ? ? symbol: planePath,
? ? ? ? ? ? ? ? ? ? symbolSize: 6
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
? ? ? ? ? ? ? ? ? ? ? ? ? ? offset: 0,
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#FFFFA8' // 出發(fā)
? ? ? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? ? ? offset: 1,
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#58B3CC ' // 結(jié)束 顏色
? ? ? ? ? ? ? ? ? ? ? ? }], false),
? ? ? ? ? ? ? ? ? ? ? ? width: 1.5,
? ? ? ? ? ? ? ? ? ? ? ? opacity: 0.4,
? ? ? ? ? ? ? ? ? ? ? ? curveness: 0.2
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? data: convertData(item[1])
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? // 目的地信息
? ? ? ? ? ? ? ? name: item[0],
? ? ? ? ? ? ? ? type: 'effectScatter',
? ? ? ? ? ? ? ? coordinateSystem: 'geo',
? ? ? ? ? ? ? ? zlevel: 2,
? ? ? ? ? ? ? ? rippleEffect: {
? ? ? ? ? ? ? ? ? ? brushType: 'stroke'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? ? ? position: 'right',
? ? ? ? ? ? ? ? ? ? ? ? formatter: ''
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? symbolSize: function(val) {
? ? ? ? ? ? ? ? ? ? return val[2] / 8;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? color: color[i]
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? data: item[1].map(function(dataItem) {
? ? ? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? ? ? name: dataItem[1].name,
? ? ? ? ? ? ? ? ? ? ? ? value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
? ? ? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? })
? ? ? ? ? ? });
? ? ? ? });
? ? ? ? // 指定相關(guān)的配置項(xiàng)和數(shù)據(jù)
? ? ? ? var mapBoxOption = {
? ? ? ? title:{
? ? ? ? ? ? text:'本半年查詢統(tǒng)計(jì)情況排行前6名地區(qū)',
? ? ? ? ? ? textStyle:{
? ? ? ? ? ? ? ? color:'white',
? ? ? ? ? ? ? ? fontSize:20
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? ? ? geo: {
? ? ? ? ? ? ? ? map: 'china',
? ? ? ? ? ? ? ? roam: false, // 是否開啟鼠標(biāo)縮放和平移漫游。默認(rèn)不開啟。如果只想要開啟縮放或者平移，可以設(shè)置成 'scale' 或者 'move'。設(shè)置成 true 為都開啟
? ? ? ? ? ? ? ? aspectScale: 0.75,
? ? ? ? ? ? ? ? zoom: 1.20,
? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? show: false,
? ? ? ? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#00a0c9'
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? emphasis: { // 對(duì)應(yīng)的鼠標(biāo)懸浮效果
? ? ? ? ? ? ? ? ? ? ? ? show: false,
? ? ? ? ? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: "#00a0c9"
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? areaColor: '#0083ce',
? ? ? ? ? ? ? ? ? ? ? ? borderColor: '#0066ba'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? emphasis: {
? ? ? ? ? ? ? ? ? ? ? ? borderWidth: 0,
? ? ? ? ? ? ? ? ? ? ? ? borderColor: '#0066ba',
? ? ? ? ? ? ? ? ? ? ? ? areaColor: "#0494e1",
? ? ? ? ? ? ? ? ? ? ? ? shadowColor: 'rgba(0, 0, 0, 0.5)'
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? series: series
? ? ? ? };
? ? ? ? // 使用制定的配置項(xiàng)和數(shù)據(jù)顯示圖表
? ? ? ? mapBoxEchart.setOption(mapBoxOption);
? ? ? ? // echart圖表自適應(yīng)
? ? ? ? window.addEventListener("resize", function() {
? ? ? ? ? ? mapBoxEchart.resize();
? ? ? ? });
? ? </script>
</body>
</html>
