使用echarts简单制作中国地图
網(wǎng)站需要一張中國地圖，并且鼠標(biāo)經(jīng)過某個(gè)省份，該省份的省份名字顯示，而且該省份的地區(qū)會(huì)變色顯示。
第一種方法：
將每個(gè)省份的圖片定位（先隱藏），拼合成一張中國地圖，然后再定位省份名稱，鼠標(biāo)經(jīng)過省份名字，添加hover事件，將對(duì)應(yīng)圖片顯示。
第二種方法：
使用圖形插件echarts，輕松制作。
http://echarts.baidu.com/doc/example.html在echarts網(wǎng)站上下載文件包
echarts使用方法查看頁面
http://echarts.baidu.com/doc/doc.html#%E5%BC%95%E5%85%A5ECharts3
可以在網(wǎng)站上調(diào)整好需要的樣式再放到本地看效果
自己試驗(yàn)的demo如下：
<!doctype html>
<html>
<head>
??? <meta charset="utf-8">
??? <title>echarts圖形插件使用</title>
</head>
<body>
??? <div id="main" style="height:800px;"></div>
??? <script type="text/javascript" src="js/echarts-all.js"></script>
??? <script type="text/javascript">
??????? var myChart = echarts.init(document.getElementById('main'));
??????? var option = {
??????????? series: [
??????????????? {
??????????????????? name: 'Map',
??????????????????? type: 'map',
??????????????????? mapLocation: {
??????????????????????? x: 'left',
??????????????????????? y: 'top',
??????????????????????? height: 500
??????????????????? },
??????????????????? selectedMode: 'multiple',
??????????????????? itemStyle: {
??????????????????????? normal: {
??????????????????????????? borderWidth: 2,
??????????????????????????? borderColor: 'lightgreen',
??????????????????????????? color: 'orange',
??????????????????????????? label: {
??????????????????????????????? show: false
??????????????????????????? }
??????????????????????? },
??????????????????????? emphasis: { // 也是選中樣式
??????????????????????????? borderWidth: 2,
??????????????????????????? borderColor: '#fff',
??????????????????????????? color: '#32cd32',
??????????????????????????? label: {
??????????????????????????????? show: true,
??????????????????????????????? textStyle: {
??????????????????????????????????? color: '#fff'
??????????????????????????????? }
??????????????????????????? }
??????????????????????? }
??????????????????? },
??????????????????? data: [
??????????????????????? {
??????????????????????????? name: '廣東',
??????????????????????????? value: Math.round(Math.random() * 1000),
??????????????????????????? itemStyle: {
??????????????????????????????? normal: {
??????????????????????????????????? color: '#32cd32',
??????????????????????????????????? label: {
??????????????????????????????????????? show: true,
??????????????????????????????????????? textStyle: {
??????????????????????????????????????????? color: '#fff',
??????????????????????????????????????????? fontSize: 15
??????????????????????????????????????? }
??????????????????????????????????? }
??????????????????????????????? },
??????????????????????????????? emphasis: { // 也是選中樣式
??????????????????????????????????? borderWidth: 5,
??????????????????????????????????? borderColor: 'yellow',
??????????????????????????????????? color: '#cd5c5c',
??????????????????????????????????? label: {
??????????????????????????????????????? show: false,
??????????????????????????????????????? textStyle: {
??????????????????????????????????????????? color: 'blue'
??????????????????????????????????????? }
??????????????????????????????????? }
??????????????????????????????? }
??????????????????????????? }
??????????????? }
??????????? ],
??????????????????? markPoint: {
??????????????????????? itemStyle: {
??????????????????????????? normal: {
??????????????????????????????? color: 'skyblue'
??????????????????????????? }
??????????????????????? },
??????????????????????? data: [
??????????????????????????? {
??????????????????????????????? name: '天津',
??????????????????????????????? value: 350
??????????????????????????? },
??????????????????????????? {
??????????????????????????????? name: '上海',
??????????????????????????????? value: 103
??????????????????????????? },
??????????????????????????? {
??????????????????????????????? name: 'echarts',
??????????????????????????????? symbol: 'image://../asset/img/echarts-logo.png',
??????????????????????????????? symbolSize: 21,
??????????????????????????????? x: 300,
??????????????????????????????? y: 100
??????????????????? }
??????????????? ]
??????????????????? },
??????????????????? geoCoord: {
??????????????????????? '上海': [121.4648, 31.2891],
??????????????????????? '天津': [117.4219, 39.4189]
??????????????????? }
??????? }
??? ]
??????? }
??????? myChart.setOption(option);
??? </script>
</body>
</html>
效果圖如下：
總結(jié)
以上是生活随笔為你收集整理的使用echarts简单制作中国地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 易语言python代码长短_怎样用易语言
- 下一篇： amr音频格式手机录音音频转MP3的方法