vue+ts如何按需引入echarts

ethanYin
  • 125

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

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

之后再引入其他就报错了

import 'echarts/lib/chart/line'

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

我该如何做呢

回复
阅读 4.7k
1 个回答
ethanYin
  • 125
✓ 已被采纳

我最后是使用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';
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
1 篇内容引用