vue+ts如何按需引入echarts

Question

之前cdn引入echarts也不算卡顿，最近做h5（vue+ts）混ios时，有些缓慢，所以我怎么才能按需引入vue+ts的项目里呢

按照网上说法，这里引入的时候就飘红，其实echarts/lib下面是有echarts.js文件的

之后再引入其他就报错了

import 'echarts/lib/chart/line'

还有说法是，可以用vue-charts来实现（未做尝试），我不想引入第三方库来如vue-charts,

我该如何做呢

Answer 1

我最后是使用echarts + vue-echarts

使用参考： vue-echarts

大概这样：

yarn add echarts vue-echarts -S
yarn add @types/echarts -D

需要使用的页面：xxx.vue

<script lang="ts">
    /* eslint-disable @typescript-eslint/camelcase */
    import { Vue, Component, Watch } from 'vue-property-decorator'
    import ECharts from 'vue-echarts'//可能会报错
    import 'echarts/lib/chart/line'
    import 'echarts/lib/chart/pie'
    import 'echarts/lib/component/tooltip'
 </script>

如果你想要cdn引入
参考 vue-cli4配置

需要注意的是：
vue-echarts需要声明，避免上面提到的报错，在shims-vue.d.ts里（我试过在其他文件或者新建.d.ts都不行）添加：

declare module 'vue-echarts';