碎片式总结

最近，接触的东西都挺碎片化的，像typeScript、echarts、map等
以下是我遇到的问题及解决办法。

将html整合到vue中

将像高德地图原生API那样的HTML示例转到vue中，并可以使用其初始化的方法。

上图就是一个纯HTML，但vue中并没有可以直接使用单个HTML的，该如何改写呢？
这个问题困扰我挺长时间的，我一开始想把它脚本扒下来，用import引入。但在实际中，这个方法只是部分可行的。打开控制台发现，文件有很多个，根本不知道引用哪一个。

这个方法行不通，我又想了两个方法：
第一个就是使用iframe把它引用过来，此方法可行是可行，但是引用后我不知如何再使用init初始化地图。emmm... 好吧，我放弃了！
后来，使用script的src加上自己申请的key把它用到public的HTML中。

<script src="https://webapi.amap.com/maps?v=2.0&key=申请的key值"></script>

当时不知道该如何使用AMap，后来仔细阅读代码发现，其实这个脚本就已经把AMap挂载到window上面了，可以直接使用window.AMap。
由于我是刚使用ts写项目，发现我直接使用AMap报错。。。网上找了半天才知道，需要提前声明一下：

declare let AMap: any;

引用之后，可以直接在方法中编写init地图初始化方法。

 init() {
    // console.log(window.AMap);
    var map = new AMap.Map("map", {
      viewMode: "2D", 
      zoom: 11, //初始化地图层级
      center: [116.397428, 39.90923], //初始化地图中心点
    });
  }
  created() {
    this.$nextTick(() => {
      this.init();
    });
  }

在此，特别注意的是$nextTick，以前我都不知需要这个，直到有次面试中问到我，我才知道$nextTick是经常遇到的，就相当于立即执行的回调。与DOM操作相关的一定要放在$nextTick的回调之中。

ts初始化echarts

关于echarts初始化可以使用两种方法，一个是id，一个是ref。
id：

<template>
  <div id="column"></div>
</template>
<script lang="ts">
let columnChart = this.$echarts.init(document.getElementById("column"));
</script>

ref：

<template>
  <div ref="pieChart"></div>
</template>
<script lang="ts">
let commonPieChart = this.$echarts.init(this.$refs.pieChart as HTMLCanvasElement);
</script>

在引用this.$echarts时，也遇到了问题，把echarts挂载到vue上后，直接使用报错。。
解决如下：

//main.ts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
//新建一个 name.d.ts文件
import Vue from "vue";
declare module "vue/types/vue" {
    interface Vue {
        $echarts: any
    }
}

Echarts之柱状图

如上图，柱状图不同于普通的统计图，这是使用svg图片作为柱状背景图片。
在初始化option时，除柱状图正常配置外，在series时，特别注意其type需要选择pictorialBar。

private img: any = require("../assets/pillar.svg");
 private symbolData: any = [
    { value: "123" },
    { value: "231" },
    { value: "345" },
    { value: "654" },
    { value: "131" },
  ];
//series配置
series: [
        {
          type: "pictorialBar",
          name: "总警数",
          data: this.symbolData,
          symbol: "image://" + this.img,
          symbolSize: ["70%", "105%"],
          itemStyle: {
            normal: {
              show: true,
              color: "rgba(45, 142, 234, 0.8)",
              borderWidth: 0,
            },
          },
        }
    ]

ts替换js

在以上问题中，我将其总结并使用typeScript，将其js部分替换成ts。许多写法对我来说还并不太熟悉。
比如：使用组件时，在子组件中也必须引用Component，否则，在控制台既不报错也不显示图表。

//子组件
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component  //必不可少
export default class complexChart extends Vue {}
</script>

可能我刚使用,遇到问题挺多，周围也没有能够请教的人。
在此，希望接触更多同行，可以互相了解，互相帮助。
有兴趣的同志们请留下你的微信号^-^!
项目链接：请点击这里。