v-charts
v-charts copied to clipboard
有人需要 vue3 版本的 v-charts 吗,或者有人做了吗
Summary 简述
先在vue3也稳定版也发布一段时间了,公司新项目也都在向vue3迁移,目前我自己把项目改了一下,一个vue3版本的v-charts,但是是js版本的,而且是发布在私库,如果大家需求比较多的话,我考虑搞一个ts版本的发布到npm
Expect 期望结果
Reproduce 重现示例
期望vue3的ts版本
可以,期待ts版本
期待vue3版本。
可以 期待 migrate版本会出问题 现在目前只能用iframe
期待
推荐一个vue3封装的版本
https://github.com/ecomfe/awesome-echarts/pull/41
vuecharts3 以组件方式调用echarts绘制图表(API参考BizCharts)
echart本来就是一个成熟的基础库,为什么你们都喜欢二次封装?配置项还不是同样的多
并不是喜欢封装,而是在vue中直接使用原生的echarts会有一些问题
- 总是需要自己使用一个ref维护一个chart instance,假如有多个图表的时候,维护起来就会麻烦一些
- 每次总是使用一个巨大的json去配置图表,总感觉不那么友好,vuecharts3这个库将echarts的series以及其他的component都抽象成vue的组件,使用更友好。
- 绘图的时候,难免遇到数据变化之类的情况需要动态的更新图表。使用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>
百度的ecomfe团队(echarts本身也是这个团队做的)出了一个官方的vue的封装版本https://github.com/ecomfe/vue-echarts
既然官方都出这种封装的版本,那总是解决一些原生写法在vue中使用的时候不太方便问题吧。
只是我个人则更进一步,我需要将echarts封装成粒度更细的组件。
通过这些粒度更细的组件来画图。让图表的易用性,可读性更强。
描述一件事情的时候,你可以说你自己的观点和想法。
不要总是尝试猜度别人的想法,或者给别人扣一些“自以为高级”这种帽子。这就不再是讨论问题了。
https://www.npmjs.com/package/x-echarts 这个插件支持vue2 vue3