創(chuàng)建vue項(xiàng)目
- 我使用
vue create創(chuàng)建vue 2.0工程
安裝element
npm i element-ui -S
具體使用請(qǐng)查看
Element中文官網(wǎng)
Element for vue3.0組件
配置天地圖
- 申請(qǐng)天地圖
key -
index.html
1、在vue工程中的index.html中添加<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的key" type="text/javascript"></script>
2、去白邊：給body添加margin:0
顯示地圖
- 注意點(diǎn)
1堤魁、地圖初始化傳參要和div的id一致
2、在mounted中加載初始化方法
3画恰、height如果想設(shè)置為 100% 需要在style中設(shè)置html、body高度
圖表（vue-chartjs）
- 安裝
npm install vue-chartjs chart.js --save
更多方式請(qǐng)參考官方文檔
- 新建
LineChart.js文件,內(nèi)容如下
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}
- 在地圖頁(yè)引入
LineChart.js
import LineChart from "路徑";
components: {
LineChart,
}
- 在
html中
<line-chart
:chart-data="datacollection"
:options="options"
:height="'214'"
></line-chart>
datacollection結(jié)構(gòu)示例
this.datacollection = {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
],
datasets: [
{
label: "GitHub Commits",
backgroundColor: "#00ffaa",
data: [39, 10, 40, 39, 80, 40, 20, 0, 40, 20],
},
],
};
options示例
options: {
elements: {
line: {
tension: 0.5,
},
point: {
radius: 2,
},
},
},
總結(jié)
demo還實(shí)現(xiàn)了懸浮窗口效果吸奴，記得將懸浮div的z-index設(shè)置的高一點(diǎn)（大于地圖z-index）,不然會(huì)有透明度等一系列問(wèn)題允扇。
