最近，接触的东西都挺碎片化的，像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>
可能我刚使用,遇到问题挺多，周围也没有能够请教的人。
在此，希望接触更多同行，可以互相了解，互相帮助。
有兴趣的同志们请留下你的微信号^-^!
项目链接：请点击这里。
作者：ClyingDeng
链接：https://juejin.cn/post/6854573220922818567
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
