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

编程问答

2017_11_23 学习echarts之饼状、柱状、gl(三维柱状)、map地图

發布時間：2023/12/16 编程问答 135 豆豆

生活随笔收集整理的這篇文章主要介紹了 2017_11_23 学习echarts之饼状、柱状、gl(三维柱状)、map地图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.在html中引入需要的js文件，例如，簡單的處理只需要引入即可，gl圖需要在引入echarts.min.js的基礎上，再引入js文件，map地圖需要js文件。

2.為圖形準備容器

3.基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));

4.定義option

5.使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);

餅狀圖代碼如下：

<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>ECharts</title>
? ? 
? ? <script src="echarts.min.js"></script>
</head>
<body>
? ? 
? ? <div id="main" style="width: 600px;height:400px;"></div>
? ? <script type="text/javascript">
? ? ? ? // 基于準備好的dom，初始化echarts實例
? ? ? ? var myChart = echarts.init(document.getElementById('main'));

? ? ? ? // 指定圖表的配置項和數據
? ? ? ? var option = {
? ? tooltip: {
? ? ? ? trigger: 'item',
? ? ? ? formatter: "{a} <br/>: {c} (ze8trgl8bvbq%)"
? ? },
? ? legend: {
? ? ? ? orient: 'vertical',
? ? ? ? x: 'left',
? ? ? ? data:['直達','營銷廣告','搜索引擎','郵件營銷','聯盟廣告','視頻廣告','百度','谷歌','必應','其他']
? ? },
? ? series: [
? ? ? ? {
? ? ? ? ? ? name:'訪問來源',
? ? ? ? ? ? type:'pie',
? ? ? ? ? ? selectedMode: 'single',
? ? ? ? ? ? radius: [0, '30%'],

? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? position: 'inner'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? labelLine: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? show: false
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? data:[
? ? ? ? ? ? ? ? {value:335, name:'直達', selected:true},
? ? ? ? ? ? ? ? {value:679, name:'營銷廣告'},
? ? ? ? ? ? ? ? {value:1548, name:'搜索引擎'}
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name:'訪問來源',
? ? ? ? ? ? type:'pie',
? ? ? ? ? ? radius: ['40%', '55%'],
? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? formatter: '{a|{a}}{abg|}\n{hr|}\n? {b|：}{c}? {per|ze8trgl8bvbq%}? ',
? ? ? ? ? ? ? ? ? ? backgroundColor: '#eee',
? ? ? ? ? ? ? ? ? ? borderColor: '#aaa',
? ? ? ? ? ? ? ? ? ? borderWidth: 1,
? ? ? ? ? ? ? ? ? ? borderRadius: 4,
? ? ? ? ? ? ? ? ? ? // shadowBlur:3,
? ? ? ? ? ? ? ? ? ? // shadowOffsetX: 2,
? ? ? ? ? ? ? ? ? ? // shadowOffsetY: 2,
? ? ? ? ? ? ? ? ? ? // shadowColor: '#999',
? ? ? ? ? ? ? ? ? ? // padding: [0, 7],
? ? ? ? ? ? ? ? ? ? rich: {
? ? ? ? ? ? ? ? ? ? ? ? a: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#999',
? ? ? ? ? ? ? ? ? ? ? ? ? ? lineHeight: 22,
? ? ? ? ? ? ? ? ? ? ? ? ? ? align: 'center'
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? // abg: {
? ? ? ? ? ? ? ? ? ? ? ? //? ? ?backgroundColor: '#333',
? ? ? ? ? ? ? ? ? ? ? ? //? ? ?width: '100%',
? ? ? ? ? ? ? ? ? ? ? ? //? ? ?align: 'right',
? ? ? ? ? ? ? ? ? ? ? ? //? ? ?height: 22,
? ? ? ? ? ? ? ? ? ? ? ? //? ? ?borderRadius: [4, 4, 0, 0]
? ? ? ? ? ? ? ? ? ? ? ? // },
? ? ? ? ? ? ? ? ? ? ? ? hr: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? borderColor: '#aaa',
? ? ? ? ? ? ? ? ? ? ? ? ? ? width: '100%',
? ? ? ? ? ? ? ? ? ? ? ? ? ? borderWidth: 0.5,
? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 0
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? b: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 16,
? ? ? ? ? ? ? ? ? ? ? ? ? ? lineHeight: 33
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? per: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#eee',
? ? ? ? ? ? ? ? ? ? ? ? ? ? backgroundColor: '#334455',
? ? ? ? ? ? ? ? ? ? ? ? ? ? padding: [2, 4],
? ? ? ? ? ? ? ? ? ? ? ? ? ? borderRadius: 2
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? data:[
? ? ? ? ? ? ? ? {value:335, name:'直達'},
? ? ? ? ? ? ? ? {value:310, name:'郵件營銷'},
? ? ? ? ? ? ? ? {value:234, name:'聯盟廣告'},
? ? ? ? ? ? ? ? {value:135, name:'視頻廣告'},
? ? ? ? ? ? ? ? {value:1048, name:'百度'},
? ? ? ? ? ? ? ? {value:251, name:'谷歌'},
? ? ? ? ? ? ? ? {value:147, name:'必應'},
? ? ? ? ? ? ? ? {value:102, name:'其他'}
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
};

?// 使用剛指定的配置項和數據顯示圖表。
? ? ? ? myChart.setOption(option);
? ? </script>
</body>
</html>

柱狀圖代碼如下：

<!DOCTYPE html>
<html>
<head>
<title>stacked_column_chart.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">



<script src="echarts.min.js"></script>
</head>

<body>

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項和數據
var option = {
tooltip : {
trigger : 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
legend : {
data : [ '直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎', '百度', '谷歌',
'必應', '其他' ]
},
grid : {
left : '3%',
right : '4%',
bottom : '3%',
containLabel : true
},
xAxis : [ {
type : 'category',
data : [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : '直接訪問',
type : 'bar',
data : [ 320, 332, 301, 334, 390, 330, 320 ]
}, {
name : '郵件營銷',
type : 'bar',
stack : '廣告',
data : [ 120, 132, 101, 134, 90, 230, 210 ]
}, {
name : '聯盟廣告',
type : 'bar',
stack : '廣告',
data : [ 220, 182, 191, 234, 290, 330, 310 ]
}, {
name : '視頻廣告',
type : 'bar',
stack : '廣告',
data : [ 150, 232, 201, 154, 190, 330, 410 ]
}, {
name : '搜索引擎',
type : 'bar',
data : [ 862, 1018, 964, 1026, 1679, 1600, 1570 ],
markLine : {
lineStyle : {
normal : {
type : 'dashed'
}
},
data : [ [ {
type : 'min'
}, {
type : 'max'
} ] ]
}
}, {
name : '百度',
type : 'bar',
barWidth : 5,
stack : '搜索引擎',
data : [ 620, 732, 701, 734, 1090, 1130, 1120 ]
}, {
name : '谷歌',
type : 'bar',
stack : '搜索引擎',
data : [ 120, 132, 101, 134, 290, 230, 220 ]
}, {
name : '必應',
type : 'bar',
stack : '搜索引擎',
data : [ 60, 72, 71, 74, 190, 130, 110 ]
}, {
name : '其他',
type : 'bar',
stack : '搜索引擎',
data : [ 62, 82, 91, 84, 109, 110, 120 ]
} ]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>

gl(三維柱狀圖)代碼如下：

<!DOCTYPE html>
<html>
<head>
<title>three_dimensional.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">


<script src="echarts.min.js"></script>
<script src="echarts-gl.min.js"></script>
</head>

<body>

<div id="main" style="width: 1000px;height:800px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));

var hours = [ '12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a',
'9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p',
'7p', '8p', '9p', '10p', '11p' ];
var days = [ 'Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday',
'Monday', 'Sunday' ];

var data = [ [ 0, 0, 5 ], [ 0, 1, 1 ], [ 0, 2, 0 ], [ 0, 3, 0 ],
[ 0, 4, 0 ], [ 0, 5, 0 ], [ 0, 6, 0 ], [ 0, 7, 0 ],
[ 0, 8, 0 ], [ 0, 9, 0 ], [ 0, 10, 0 ], [ 0, 11, 2 ],
[ 0, 12, 4 ], [ 0, 13, 1 ], [ 0, 14, 1 ], [ 0, 15, 3 ],
[ 0, 16, 4 ], [ 0, 17, 6 ], [ 0, 18, 4 ], [ 0, 19, 4 ],
[ 0, 20, 3 ], [ 0, 21, 3 ], [ 0, 22, 2 ], [ 0, 23, 5 ],
[ 1, 0, 7 ], [ 1, 1, 0 ], [ 1, 2, 0 ], [ 1, 3, 0 ],
[ 1, 4, 0 ], [ 1, 5, 0 ], [ 1, 6, 0 ], [ 1, 7, 0 ],
[ 1, 8, 0 ], [ 1, 9, 0 ], [ 1, 10, 5 ], [ 1, 11, 2 ],
[ 1, 12, 2 ], [ 1, 13, 6 ], [ 1, 14, 9 ], [ 1, 15, 11 ],
[ 1, 16, 6 ], [ 1, 17, 7 ], [ 1, 18, 8 ], [ 1, 19, 12 ],
[ 1, 20, 5 ], [ 1, 21, 5 ], [ 1, 22, 7 ], [ 1, 23, 2 ],
[ 2, 0, 1 ], [ 2, 1, 1 ], [ 2, 2, 0 ], [ 2, 3, 0 ],
[ 2, 4, 0 ], [ 2, 5, 0 ], [ 2, 6, 0 ], [ 2, 7, 0 ],
[ 2, 8, 0 ], [ 2, 9, 0 ], [ 2, 10, 3 ], [ 2, 11, 2 ],
[ 2, 12, 1 ], [ 2, 13, 9 ], [ 2, 14, 8 ], [ 2, 15, 10 ],
[ 2, 16, 6 ], [ 2, 17, 5 ], [ 2, 18, 5 ], [ 2, 19, 5 ],
[ 2, 20, 7 ], [ 2, 21, 4 ], [ 2, 22, 2 ], [ 2, 23, 4 ],
[ 3, 0, 7 ], [ 3, 1, 3 ], [ 3, 2, 0 ], [ 3, 3, 0 ],
[ 3, 4, 0 ], [ 3, 5, 0 ], [ 3, 6, 0 ], [ 3, 7, 0 ],
[ 3, 8, 1 ], [ 3, 9, 0 ], [ 3, 10, 5 ], [ 3, 11, 4 ],
[ 3, 12, 7 ], [ 3, 13, 14 ], [ 3, 14, 13 ], [ 3, 15, 12 ],
[ 3, 16, 9 ], [ 3, 17, 5 ], [ 3, 18, 5 ], [ 3, 19, 10 ],
[ 3, 20, 6 ], [ 3, 21, 4 ], [ 3, 22, 4 ], [ 3, 23, 1 ],
[ 4, 0, 1 ], [ 4, 1, 3 ], [ 4, 2, 0 ], [ 4, 3, 0 ],
[ 4, 4, 0 ], [ 4, 5, 1 ], [ 4, 6, 0 ], [ 4, 7, 0 ],
[ 4, 8, 0 ], [ 4, 9, 2 ], [ 4, 10, 4 ], [ 4, 11, 4 ],
[ 4, 12, 2 ], [ 4, 13, 4 ], [ 4, 14, 4 ], [ 4, 15, 14 ],
[ 4, 16, 12 ], [ 4, 17, 1 ], [ 4, 18, 8 ], [ 4, 19, 5 ],
[ 4, 20, 3 ], [ 4, 21, 7 ], [ 4, 22, 3 ], [ 4, 23, 0 ],
[ 5, 0, 2 ], [ 5, 1, 1 ], [ 5, 2, 0 ], [ 5, 3, 3 ],
[ 5, 4, 0 ], [ 5, 5, 0 ], [ 5, 6, 0 ], [ 5, 7, 0 ],
[ 5, 8, 2 ], [ 5, 9, 0 ], [ 5, 10, 4 ], [ 5, 11, 1 ],
[ 5, 12, 5 ], [ 5, 13, 10 ], [ 5, 14, 5 ], [ 5, 15, 7 ],
[ 5, 16, 11 ], [ 5, 17, 6 ], [ 5, 18, 0 ], [ 5, 19, 5 ],
[ 5, 20, 3 ], [ 5, 21, 4 ], [ 5, 22, 2 ], [ 5, 23, 0 ],
[ 6, 0, 1 ], [ 6, 1, 0 ], [ 6, 2, 0 ], [ 6, 3, 0 ],
[ 6, 4, 0 ], [ 6, 5, 0 ], [ 6, 6, 0 ], [ 6, 7, 0 ],
[ 6, 8, 0 ], [ 6, 9, 0 ], [ 6, 10, 1 ], [ 6, 11, 0 ],
[ 6, 12, 2 ], [ 6, 13, 1 ], [ 6, 14, 3 ], [ 6, 15, 4 ],
[ 6, 16, 0 ], [ 6, 17, 0 ], [ 6, 18, 0 ], [ 6, 19, 0 ],
[ 6, 20, 1 ], [ 6, 21, 2 ], [ 6, 22, 2 ], [ 6, 23, 6 ] ];
var option = {
tooltip : {},
visualMap : {
max : 20,
inRange : {
color : [ '#313695', '#4575b4', '#74add1', '#abd9e9',
'#e0f3f8', '#ffffbf', '#fee090', '#fdae61',
'#f46d43', '#d73027', '#a50026' ]
}
},
xAxis3D : {
type : 'category',
data : hours
},
yAxis3D : {
type : 'category',
data : days
},
zAxis3D : {
type : 'value'
},
grid3D : {
boxWidth : 200,
boxDepth : 80,
light : {
main : {
intensity : 1.2
},
ambient : {
intensity : 0.3
}
}
},
series : [ {
type : 'bar3D',
data : data.map(function(item) {
return {
value : [ item[1], item[0], item[2] ]
}
}),
shading : 'color',

label : {
show : false,
textStyle : {
fontSize : 16,
borderWidth : 1
}
},

itemStyle : {
opacity : 0.4
},

emphasis : {
label : {
textStyle : {
fontSize : 20,
color : '#900'
}
},
itemStyle : {
color : '#900'
}
}
} ]
}

// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>

map中國地圖代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>ECharts</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="jquery-1.9.1.min.js"></script>
<script src="echarts.min.js"></script>
<script src="china.js"></script>
<style>
#china-map {
width: 1000px;
height: 1000px;
margin: auto;
}
</style>
</head>
<body>

<div id="china-map"></div>

<script>
var myChart = echarts.init(document.getElementById('china-map'));
var data = [ {
name : '海門',
value : 9
}, {
name : '鄂爾多斯',
value : 12
}, {
name : '招遠',
value : 12
}, {
name : '舟山',
value : 12
}, {
name : '齊齊哈爾',
value : 14
}, {
name : '鹽城',
value : 15
}, {
name : '赤峰',
value : 16
}, {
name : '青島',
value : 18
}, {
name : '乳山',
value : 18
}, {
name : '金昌',
value : 19
}, {
name : '泉州',
value : 21
}, {
name : '南通',
value : 23
}, {
name : '拉薩',
value : 24
}, {
name : '云浮',
value : 24
}, {
name : '上海',
value : 25
}, {
name : '攀枝花',
value : 25
}, {
name : '承德',
value : 25
}, {
name : '汕尾',
value : 26
}, {
name : '丹東',
value : 27
}, {
name : '瓦房店',
value : 30
}, {
name : '延安',
value : 38
}, {
name : '咸陽',
value : 43
}, {
name : '南昌',
value : 54
}, {
name : '柳州',
value : 54
}, {
name : '三亞',
value : 54
}, {
name : '瀘州',
value : 57
}, {
name : '克拉瑪依',
value : 72
} ];

var geoCoordMap = {
'海門' : [ 121.15, 31.89 ],
'鄂爾多斯' : [ 109.781327, 39.608266 ],
'招遠' : [ 120.38, 37.35 ],
'舟山' : [ 122.207216, 29.985295 ],
'齊齊哈爾' : [ 123.97, 47.33 ],
'鹽城' : [ 120.13, 33.38 ],
'赤峰' : [ 118.87, 42.28 ],
'青島' : [ 120.33, 36.07 ],
'乳山' : [ 121.52, 36.89 ],
'金昌' : [ 102.188043, 38.520089 ],
'泉州' : [ 118.58, 24.93 ],
'萊西' : [ 120.53, 36.86 ],
'日照' : [ 119.46, 35.42 ],
'膠南' : [ 119.97, 35.88 ],
'南通' : [ 121.05, 32.08 ],
'拉薩' : [ 91.11, 29.97 ],
'云浮' : [ 112.02, 22.93 ],
'梅州' : [ 116.1, 24.55 ],
'文登' : [ 122.05, 37.2 ],
'上海' : [ 121.48, 31.22 ],
'攀枝花' : [ 101.718637, 26.582347 ],
'威海' : [ 122.1, 37.5 ],
'承德' : [ 117.93, 40.97 ],
'廈門' : [ 118.1, 24.46 ],
'汕尾' : [ 115.375279, 22.786211 ],
'潮州' : [ 116.63, 23.68 ],
'丹東' : [ 124.37, 40.13 ],
'太倉' : [ 121.1, 31.45 ],
'曲靖' : [ 103.79, 25.51 ],
'煙臺' : [ 121.39, 37.52 ],
'福州' : [ 119.3, 26.08 ],
'瓦房店' : [ 121.979603, 39.627114 ],
'即墨' : [ 120.45, 36.38 ],
'撫順' : [ 123.97, 41.97 ],
'玉溪' : [ 102.52, 24.35 ],
'張家口' : [ 114.87, 40.82 ],
'陽泉' : [ 113.57, 37.85 ],
'萊州' : [ 119.942327, 37.177017 ],
'湖州' : [ 120.1, 30.86 ],
'汕頭' : [ 116.69, 23.39 ],
'昆山' : [ 120.95, 31.39 ],
'寧波' : [ 121.56, 29.86 ],
'湛江' : [ 110.359377, 21.270708 ],
'揭陽' : [ 116.35, 23.55 ],
'榮成' : [ 122.41, 37.16 ],
'連云港' : [ 119.16, 34.59 ],
'葫蘆島' : [ 120.836932, 40.711052 ],
'常熟' : [ 120.74, 31.64 ],
'東莞' : [ 113.75, 23.04 ],
'河源' : [ 114.68, 23.73 ],
'淮安' : [ 119.15, 33.5 ],
'泰州' : [ 119.9, 32.49 ],
'南寧' : [ 108.33, 22.84 ],
'營口' : [ 122.18, 40.65 ],
'惠州' : [ 114.4, 23.09 ],
'江陰' : [ 120.26, 31.91 ],
'蓬萊' : [ 120.75, 37.8 ],
'韶關' : [ 113.62, 24.84 ],
'嘉峪關' : [ 98.289152, 39.77313 ],
'廣州' : [ 113.23, 23.16 ],
'延安' : [ 109.47, 36.6 ],
'太原' : [ 112.53, 37.87 ],
'清遠' : [ 113.01, 23.7 ],
'中山' : [ 113.38, 22.52 ],
'昆明' : [ 102.73, 25.04 ],
'壽光' : [ 118.73, 36.86 ],
'盤錦' : [ 122.070714, 41.119997 ],
'長治' : [ 113.08, 36.18 ],
'深圳' : [ 114.07, 22.62 ],
'珠海' : [ 113.52, 22.3 ],
'宿遷' : [ 118.3, 33.96 ],
'咸陽' : [ 108.72, 34.36 ],
'銅川' : [ 109.11, 35.09 ],
'平度' : [ 119.97, 36.77 ],
'佛山' : [ 113.11, 23.05 ],
'海口' : [ 110.35, 20.02 ],
'江門' : [ 113.06, 22.61 ],
'章丘' : [ 117.53, 36.72 ],
'肇慶' : [ 112.44, 23.05 ],
'大連' : [ 121.62, 38.92 ],
'臨汾' : [ 111.5, 36.08 ],
'吳江' : [ 120.63, 31.16 ],
'石嘴山' : [ 106.39, 39.04 ],
'沈陽' : [ 123.38, 41.8 ],
'蘇州' : [ 120.62, 31.32 ],
'茂名' : [ 110.88, 21.68 ],
'嘉興' : [ 120.76, 30.77 ],
'長春' : [ 125.35, 43.88 ],
'膠州' : [ 120.03336, 36.264622 ],
'銀川' : [ 106.27, 38.47 ],
'張家港' : [ 120.555821, 31.875428 ],
'三門峽' : [ 111.19, 34.76 ],
'錦州' : [ 121.15, 41.13 ],
'南昌' : [ 115.89, 28.68 ],
'柳州' : [ 109.4, 24.33 ],
'三亞' : [ 109.511909, 18.252847 ],
'自貢' : [ 104.778442, 29.33903 ],
'吉林' : [ 126.57, 43.87 ],
'陽江' : [ 111.95, 21.85 ],
'瀘州' : [ 105.39, 28.91 ],
'西寧' : [ 101.74, 36.56 ],
'宜賓' : [ 104.56, 29.77 ],
'呼和浩特' : [ 111.65, 40.82 ],
'成都' : [ 104.06, 30.67 ],
'大同' : [ 113.3, 40.12 ],
'鎮江' : [ 119.44, 32.2 ],
'桂林' : [ 110.28, 25.29 ],
'張家界' : [ 110.479191, 29.117096 ],
'宜興' : [ 119.82, 31.36 ],
'北海' : [ 109.12, 21.49 ],
'西安' : [ 108.95, 34.27 ],
'金壇' : [ 119.56, 31.74 ],
'東營' : [ 118.49, 37.46 ],
'牡丹江' : [ 129.58, 44.6 ],
'遵義' : [ 106.9, 27.7 ],
'紹興' : [ 120.58, 30.01 ],
'揚州' : [ 119.42, 32.39 ],
'常州' : [ 119.95, 31.79 ],
'濰坊' : [ 119.1, 36.62 ],
'重慶' : [ 106.54, 29.59 ],
'臺州' : [ 121.420757, 28.656386 ],
'南京' : [ 118.78, 32.04 ],
'濱州' : [ 118.03, 37.36 ],
'貴陽' : [ 106.71, 26.57 ],
'無錫' : [ 120.29, 31.59 ],
'本溪' : [ 123.73, 41.3 ],
'克拉瑪依' : [ 84.77, 45.59 ],
'渭南' : [ 109.5, 34.52 ],
'馬鞍山' : [ 118.48, 31.56 ],
'寶雞' : [ 107.15, 34.38 ],
'焦作' : [ 113.21, 35.24 ],
'句容' : [ 119.16, 31.95 ],
'北京' : [ 116.46, 39.92 ],
'徐州' : [ 117.2, 34.26 ],
'衡水' : [ 115.72, 37.72 ],
'包頭' : [ 110, 40.58 ],
'綿陽' : [ 104.73, 31.48 ],
'烏魯木齊' : [ 87.68, 43.77 ],
'棗莊' : [ 117.57, 34.86 ],
'杭州' : [ 120.19, 30.26 ],
'淄博' : [ 118.05, 36.78 ],
'鞍山' : [ 122.85, 41.12 ],
'溧陽' : [ 119.48, 31.43 ],
'庫爾勒' : [ 86.06, 41.68 ],
'安陽' : [ 114.35, 36.1 ],
'開封' : [ 114.35, 34.79 ],
'濟南' : [ 117, 36.65 ],
'德陽' : [ 104.37, 31.13 ],
'溫州' : [ 120.65, 28.01 ],
'九江' : [ 115.97, 29.71 ],
'邯鄲' : [ 114.47, 36.6 ],
'臨安' : [ 119.72, 30.23 ],
'蘭州' : [ 103.73, 36.03 ],
'滄州' : [ 116.83, 38.33 ],
'臨沂' : [ 118.35, 35.05 ],
'南充' : [ 106.110698, 30.837793 ],
'天津' : [ 117.2, 39.13 ],
'富陽' : [ 119.95, 30.07 ],
'泰安' : [ 117.13, 36.18 ],
'諸暨' : [ 120.23, 29.71 ],
'鄭州' : [ 113.65, 34.76 ],
'哈爾濱' : [ 126.63, 45.75 ],
'聊城' : [ 115.97, 36.45 ],
'蕪湖' : [ 118.38, 31.33 ],
'唐山' : [ 118.02, 39.63 ],
'平頂山' : [ 113.29, 33.75 ],
'邢臺' : [ 114.48, 37.05 ],
'德州' : [ 116.29, 37.45 ],
'濟寧' : [ 116.59, 35.38 ],
'荊州' : [ 112.239741, 30.335165 ],
'宜昌' : [ 111.3, 30.7 ],
'義烏' : [ 120.06, 29.32 ],
'麗水' : [ 119.92, 28.45 ],
'洛陽' : [ 112.44, 34.7 ],
'秦皇島' : [ 119.57, 39.95 ],
'株洲' : [ 113.16, 27.83 ],
'石家莊' : [ 114.48, 38.03 ],
'萊蕪' : [ 117.67, 36.19 ],
'常德' : [ 111.69, 29.05 ],
'保定' : [ 115.48, 38.85 ],
'湘潭' : [ 112.91, 27.87 ],
'金華' : [ 119.64, 29.12 ],
'岳陽' : [ 113.09, 29.37 ],
'長沙' : [ 113, 28.21 ],
'衢州' : [ 118.88, 28.97 ],
'廊坊' : [ 116.7, 39.53 ],
'菏澤' : [ 115.480656, 35.23375 ],
'合肥' : [ 117.27, 31.86 ],
'武漢' : [ 114.31, 30.52 ],
'大慶' : [ 125.03, 46.58 ]
};

function convertData(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;
};

function randomValue() {
return Math.round(Math.random() * 1000);
}

var option = {
tooltip : {},
visualMap : {
min : 0,
max : 1500,
left : 'left',
top : 'bottom',
text : [ 'High', 'Low' ],
seriesIndex : [ 1 ],
inRange : {
color : [ '#83f883', '#11bfc6' ]
},
calculable : true
},
geo : {
map : 'china',
roam : true,
label : {
normal : {
show : true,
textStyle : {
color : 'rgba(0,0,0,0.0)'
}
}
},
itemStyle : {
normal : {
borderColor : '#fff'
},
emphasis : {
areaColor : null,
shadowOffsetX : 0,
shadowOffsetY : 0,
shadowBlur : 20,
borderWidth : 0,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
type : 'scatter',
coordinateSystem : 'geo',
data : convertData(data),
symbolSize : 1,
symbol : 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
symbolRotate : 35,
label : {
normal : {
formatter : '',
position : 'right',
show : false
},
emphasis : {
show : false
}
},
itemStyle : {
normal : {
color : '#fff'
}
}
}, {
name : 'categoryA',
type : 'map',
geoIndex : 0,
// tooltip: {show: false},
data : [ {
name : '北京',
value : randomValue()
}, {
name : '天津',
value : randomValue()
}, {
name : '上海',
value : randomValue()
}, {
name : '重慶',
value : randomValue()
}, {
name : '河北',
value : randomValue()
}, {
name : '河南',
value : randomValue()
}, {
name : '云南',
value : randomValue()
}, {
name : '遼寧',
value : randomValue()
}, {
name : '黑龍江',
value : randomValue()
}, {
name : '湖南',
value : randomValue()
}, {
name : '安徽',
value : randomValue()
}, {
name : '山東',
value : randomValue()
}, {
name : '新疆',
value : randomValue()
}, {
name : '江蘇',
value : randomValue()
}, {
name : '浙江',
value : randomValue()
}, {
name : '江西',
value : randomValue()
}, {
name : '湖北',
value : randomValue()
}, {
name : '廣西',
value : randomValue()
}, {
name : '甘肅',
value : randomValue()
}, {
name : '山西',
value : randomValue()
}, {
name : '內蒙古',
value : randomValue()
}, {
name : '陜西',
value : randomValue()
}, {
name : '吉林',
value : randomValue()
}, {
name : '福建',
value : randomValue()
}, {
name : '貴州',
value : randomValue()
}, {
name : '廣東',
value : randomValue()
}, {
name : '青海',
value : randomValue()
}, {
name : '西藏',
value : randomValue()
}, {
name : '四川',
value : randomValue()
}, {
name : '寧夏',
value : randomValue()
}, {
name : '海南',
value : randomValue()
}, {
name : '臺灣',
value : randomValue()
}, {
name : '香港',
value : randomValue()
}, {
name : '澳門',
value : randomValue()
} ]
} ]
};

myChart.setOption(option);
myChart.on('mouseover', function(params) {
var dataIndex = params.dataIndex;
console.log(params);
});
</script>

</body>
</html>

總結

以上是生活随笔為你收集整理的2017_11_23 学习echarts之饼状、柱状、gl(三维柱状)、map地图的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：产品生产的各个阶段：DV，EV，PV ·
下一篇： python变异系数,Python Sc