创建vue项目
- 我使用
vue create创建vue 2.0工程
安装element
npm i element-ui -S
具体使用请查看
Element中文官网
Element for vue3.0组件
配置天地图
- 申请天地图
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
显示地图
- 注意点
1、地图初始化传参要和div的id一致
2、在mounted中加载初始化方法
3、height如果想设置为 100% 需要在style中设置html、body高度
图表（vue-chartjs）
- 安装
npm install vue-chartjs chart.js --save
更多方式请参考官方文档
- 新建
LineChart.js文件,内容如下
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)
}
}
- 在地图页引入
LineChart.js
import LineChart from "路径";
components: {
LineChart,
}
- 在
html中
<line-chart
:chart-data="datacollection"
:options="options"
:height="'214'"
></line-chart>
datacollection结构示例
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,
},
},
},
总结
demo还实现了悬浮窗口效果，记得将悬浮div的z-index设置的高一点（大于地图z-index）,不然会有透明度等一系列问题。
