v-charts icon indicating copy to clipboard operation
v-charts copied to clipboard

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

Open smileqwe opened this issue 2 years ago • 10 comments

Summary 简述

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

Expect 期望结果

Reproduce 重现示例

smileqwe avatar Sep 20 '21 06:09 smileqwe

期望vue3的ts版本

JOJO-CPU avatar Sep 26 '21 08:09 JOJO-CPU

可以,期待ts版本

AlbertE1990 avatar Nov 09 '21 07:11 AlbertE1990

期待vue3版本。

lierxing111 avatar Dec 13 '21 06:12 lierxing111

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

7086cmd avatar Dec 29 '21 22:12 7086cmd

期待

mynameislzk avatar Feb 15 '22 08:02 mynameislzk

推荐一个vue3封装的版本

https://github.com/ecomfe/awesome-echarts/pull/41

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

lloydzhou avatar Jun 23 '22 03:06 lloydzhou

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

lloydzhou avatar Jul 06 '22 06:07 lloydzhou

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

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

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

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

lloydzhou avatar Jul 06 '22 10:07 lloydzhou

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

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

lloydzhou avatar Jul 06 '22 12:07 lloydzhou

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

eagle1949 avatar Jan 15 '24 04:01 eagle1949