基于 Vue2.0 和 ECharts 封装的图表组件 v-charts

MIT
JavaScript
跨平台
2018-05-22
王练

在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式,设置简单的配置项,便可轻松生成常见的图表。

安装

npm i v-charts echarts -S

快速上手

<template>
  <div>
    <ve-line :data="chartData"></ve-line>
  </div>
</template>

<script>
import VeLine from 'v-charts/lib/line'
export default {
  created () {
    this.chartData = {
      columns: ['日期', '销售量'],
      rows: [
        { '日期': '1月1日', '销售量': 123 },
        { '日期': '1月2日', '销售量': 1223 },
        { '日期': '1月3日', '销售量': 2123 },
        { '日期': '1月4日', '销售量': 4123 },
        { '日期': '1月5日', '销售量': 3123 },
        { '日期': '1月6日', '销售量': 7123 }
      ]
    }
  },

  components: { VeLine }
}
</script>

结果:

的码云指数为
超过 的项目
加载中

评论(6)

闹妖呢
闹妖呢
echarts的版本是3还是4?
诺诺
诺诺
不错,想试试看
Leon_wy
Leon_wy
可以玩玩咯
h
holysky
支持
黑土中的毛竹
黑土中的毛竹
用起来挺方便的
独来H独往
在用 挺好的

v-charts 1.19.0 发布,基于 Vue2.0 和 ECharts 的图表库

v-charts 1.19.0 发布了,更新内容如下: pie: support multi pie item (0a99bd2) v-charts 是饿了么开源的基于 Vue2.0 和 ECharts 封装的图表组件,其特点包括: 统一的数据格式: 使用对前...

2018/11/03 07:17

v-charts 1.18.0 发布,基于 Vue2.0 和 ECharts 的图表库

v-charts 1.18.0 发布了,更新内容如下: core: add log prop to comp (7abca27) 完善水球图的配置settings中关于seriesMap和wave的配置项 (3e82c6f) 增加词云图的封装 (30ddf30) 增加水球图...

2018/10/16 07:29

v-charts 1.17.10 发布,Vue2.x 封装的 Echarts 图表组件

v-charts 是饿了么开源的基于 Vue2.x 封装的 Echarts 图表组件,特性: 统一的数据格式: 使用对前后端都友好的数据格式,方便生成和修改。 简化的配置项: 通过简化的配置项,可以轻松实现复...

2018/08/12 07:17

v-charts 1.17.8 发布,Vue2.x 封装的 Echarts 图表组件

v-charts 是饿了么开源的基于 Vue2.x 封装的 Echarts 图表组件,特性: 统一的数据格式: 使用对前后端都友好的数据格式,方便生成和修改。 简化的配置项: 通过简化的配置项,可以轻松实现复...

2018/07/14 07:08

v-charts 1.17.2 发布,修复 common.min 加载问题

v-charts 1.17.2 已发布,v-charts 是饿了么开源的基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简单的配置项,便可轻松生成常见的图...

2018/06/19 07:47

v-charts 1.17.0 发布,优化 commonjs 包体积

v-charts 1.17.0 已发布,v-charts 是饿了么开源的基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简单的配置项,便可轻松生成常见的图...

2018/06/16 07:15

v-charts 1.16.2 ,基于 Vue2.0 和 ECharts 的图表组件

v-charts 1.16.2 已发布,v-charts 是饿了么开源的基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简单的配置项,便可轻松生成常见的图...

2018/05/23 07:36

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

Gitlab-CI 集成k8s从入门到放弃

终于都特么装完了。 gfw太烦人了。 安装Helm Tiller 错误零: 提示TLS什么没找到,我的gitlab是11.2.1,这个版本比上个版本多了Tiller 使用tls访问,所以需要有tls证书 key这些 懒得弄了,g...

2018/08/29 14:00
749
1
github开源Android组件资源整理(六)GraphView, UI Style

十四、GraphView MPAndroidChart 强大的图表绘制工具,支持折线图、面积图、散点图、时间图、柱状图、条图、饼图、气泡图、圆环图、范围(高至低)条形图、网状图及各种图的结合;支持图的拖...

2016/05/13 19:28
317
2
Unicode中关于中文和其他特殊字符的编码范围

编程中有时候需要用到匹配中文的正则,一般用 [ \u4e00-\u9fa5]+ 即可搞定。不过这正则对一般的火星文鸟语就不太适用了,甚至全角的标点符号都不包含在内。例如游戏里面的玩家名,普通青年一...

2013/12/03 16:56
2.1K
1
Mschart学习

1.什么是MSChart Chart: Microsoft Chart Controls for Microsoft .NET Framework 3.5 适用于.NET Framework 3.5 SP1 的ASP.NET和Windows Form图标控制项 开发商: 2007年Dundas 开发出收費的...

2012/06/22 17:13
217
0
FusionCharts Free开源免费的图表组件

FusionCharts Free基于MIT和GNU GPL许可协议。任何人和组织可以分发或者学习研究其源码。

2014/09/23 16:18
41
0
Collabion Charts for SharePoint教程一:添加Web Parts

安装Collabion Charts for SharePoint之后,我们需要创建Web Parts启动Collabion Charts wizard并创建图表。下面我们就使用Collabion Charts for SharePoint添加Web Part。 添加Collabion C...

2014/02/25 13:51
102
0
第一届云原生应用大赛火热报名中! helm install “一键安装”应用触手可及!

云原生应用,是指符合“云原生”理念的应用开发与交付模式,这是当前在云时代最受欢迎的应用开发最佳实践。 在现今的云原生生态当中,已经有很多成熟的开源软件被制作成了 Helm Charts,使得...

07/29 14:33
4
0
Essential WPF报表统计图控件Essential Chart for WPF介绍

Essential Chart for WPF是一款工业领先的图表控件,用于处理商业数据并绘制视图表,控件包含33种不同的图表类型,许多图表元素都支持自定义,如:图表序列、图例、刻度、轴标签、图表区域等...

2014/06/06 10:11
2.4K
0
【FusionCharts学习-1】获取资源

网址 官网: http://www.fusioncharts.com/charts/ 入门学习: http://www.fusioncharts.com/dev/usage-guide/getting-started/your-first-charts/building-your-first-chart.html 效果图: ...

2016/03/15 20:01
6
1

没有更多内容

加载失败,请刷新页面

返回顶部
顶部