Vue2.0+element+天地图+vue-chartjs

创建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

显示地图

天地图api

• 注意点
  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）,不然会有透明度等一系列问题。