ElemeFE/v-charts

有人需要 vue3 版本的 v-charts 吗，或者有人做了吗

Opened this issue · 10 comments

smileqwe commented

Summary 简述

先在vue3也稳定版也发布一段时间了，公司新项目也都在向vue3迁移，目前我自己把项目改了一下，一个vue3版本的v-charts，但是是js版本的，而且是发布在私库，如果大家需求比较多的话，我考虑搞一个ts版本的发布到npm

Expect 期望结果

Reproduce 重现示例

JOJO-CPU commented

期望vue3的ts版本

AlbertE1990 commented

可以，期待ts版本

lierxing111 commented

期待vue3版本。

7086cmd commented

可以 期待 migrate版本会出问题 现在目前只能用iframe

mynameislzk commented

期待

lloydzhou commented

推荐一个vue3封装的版本

ecomfe/awesome-echarts#41

vuecharts3 以组件方式调用echarts绘制图表（API参考BizCharts）

  • 👍1
lloydzhou commented

echart本来就是一个成熟的基础库，为什么你们都喜欢二次封装？配置项还不是同样的多

并不是喜欢封装，而是在vue中直接使用原生的echarts会有一些问题

  1. 总是需要自己使用一个ref维护一个chart instance，假如有多个图表的时候，维护起来就会麻烦一些
  2. 每次总是使用一个巨大的json去配置图表，总感觉不那么友好，vuecharts3这个库将echarts的series以及其他的component都抽象成vue的组件，使用更友好。
  3. 绘图的时候，难免遇到数据变化之类的情况需要动态的更新图表。使用vue封装一遍之后，能依赖reactive的特性自动的去更新图表，对开发会更友好。

通过封装成接口更友好的组件，并不会更改配置项的多少。只是用起来更舒服，以下是一个demo。

    <Chart>
      <Grid :top="100" />
      <Legend :data="['data1', 'data2']" :top="65" />
      <Title text="顶部标题" subtext="顶部小标题" left="center" :top="10" />
      <Title text="底部标题" top="bottom" left="center" />
      <Bar name="data1" :data="[0.32, 0.45, 0.2]" />
      <Bar name="data2" :data="[0.2, 0.5, 0.3]" />
      <Line name="data2" :data="[0.2, 0.5, 0.3]" />
      <YAxis />
      <XAxis :data="['x1', 'x2', 'x3']" />
      <Tooltip trigger="axis" />
    </Chart>

image

  • 👍1
lloydzhou commented

百度的ecomfe团队（echarts本身也是这个团队做的）出了一个官方的vue的封装版本https://github.com/ecomfe/vue-echarts

既然官方都出这种封装的版本，那总是解决一些原生写法在vue中使用的时候不太方便问题吧。

只是我个人则更进一步，我需要将echarts封装成粒度更细的组件。

通过这些粒度更细的组件来画图。让图表的易用性，可读性更强。

lloydzhou commented

描述一件事情的时候，你可以说你自己的观点和想法。

不要总是尝试猜度别人的想法，或者给别人扣一些“自以为高级”这种帽子。这就不再是讨论问题了。

eagle1949 commented

https://www.npmjs.com/package/x-echarts 这个插件支持vue2 vue3

  • 👍1