v-charts 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
v-charts 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
v-charts 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 iOS代码库图表(Charting)
开源组织
地区 国产
投 递 者 王练
适用人群 未知
收录时间 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>

结果:

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (7)

加载中
我引用后会出现图表,但是会报这个错,有人知道吗 [Vue warn]: Method "extend" has already been defined as a prop. vue.esm.js:628 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "extend"
2020/04/10 14:50
回复
举报
echarts的版本是3还是4?
2018/05/25 09:47
回复
举报
打分: 力荐
不错,想试试看
2018/05/23 17:02
回复
举报
可以玩玩咯
2018/05/23 16:59
回复
举报
支持
2018/05/23 13:18
回复
举报
打分: 力荐
用起来挺方便的
2018/05/23 10:39
回复
举报
打分: 力荐
在用 挺好的
2018/05/23 08:36
回复
举报
更多评论
发表于大前端专区
2018/11/03 07:17

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

v-charts 1.19.0 发布了,更新内容如下: pie: support multi pie item (0a99bd2) v-charts 是饿了么开源的基于 Vue2.0 和 ECharts 封装的图表组件,其特点包括: 统一的数据格式: 使用对前后端都友好的数据格式,方便生成和修改。 简化的配置项: 通过简化的配置项,可以轻松实现复杂需求。 定制简单: 提供多种自定义 Echarts 方式,可以方便的设置图表配置项。 更新日志 源码下载: Source code(zip) Source code(tar.gz)...

0
24
发表于大前端专区
2018/10/16 07:29

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) 增加水球图 (391d62d) v-charts 是饿了么开源的基于 Vue2.0 和 ECharts 封装的图表组件,其特点包括: 统一的数据格式: 使用对前后端都友好的数据格式,方便生成和修改。 简化的配置项: 通过简化的配置项,可以轻松实现复杂需求。 定制简单: 提供...

0
29
发表于大前端专区
2018/08/12 07:17

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

v-charts 是饿了么开源的基于 Vue2.x 封装的 Echarts 图表组件,特性: 统一的数据格式: 使用对前后端都友好的数据格式,方便生成和修改。 简化的配置项: 通过简化的配置项,可以轻松实现复杂需求。 定制简单: 提供多种自定义 Echarts 方式,可以方便的设置图表配置项。 v-charts 1.17.10 更新内容: map: 隐藏地图中无数据部分的提示 (b2b0f39) 更多详情可查阅发行列表 快速上手 <template>   <div>     <ve-line ...

1
25
发表于大前端专区
2018/07/14 07:08

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

v-charts 是饿了么开源的基于 Vue2.x 封装的 Echarts 图表组件,特性: 统一的数据格式: 使用对前后端都友好的数据格式,方便生成和修改。 简化的配置项: 通过简化的配置项,可以轻松实现复杂需求。 定制简单: 提供多种自定义 Echarts 方式,可以方便的设置图表配置项。 v-charts 1.17.8 更新内容: core: 增加 options 和 Echarts 到钩子函数中 core: add hooks params of options and Echarts 更多详情可查阅发行列表 下载...

0
14
发表于大前端专区
2018/06/19 07:47

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

v-charts 1.17.2 已发布,v-charts 是饿了么开源的基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简单的配置项,便可轻松生成常见的图表。 更新内容: 修复 common.min 加载问题 示例: <template>   <div>     <ve-line :data="chartData"></ve-line>   </div> </template> <script> import VeLine from 'v-charts/lib/line' export default { ...

0
8
发表于大前端专区
2018/06/16 07:15

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

v-charts 1.17.0 已发布,v-charts 是饿了么开源的基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简单的配置项,便可轻松生成常见的图表。 更新内容: 优化 commonjs 包体积,增强加载性能。 示例: <template>   <div>     <ve-line :data="chartData"></ve-line>   </div> </template> <script> import VeLine from 'v-charts/lib/line' export d...

0
10
发表于大前端专区
2018/05/23 07:36

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

v-charts 1.16.2 已发布,v-charts 是饿了么开源的基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简单的配置项,便可轻松生成常见的图表。 更新内容: 修复: after config once bug, fix #279 示例: <template>   <div>     <ve-line :data="chartData"></ve-line>   </div> </template> <script> import VeLine from 'v-charts/lib/line' export...

2
29
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2019/04/26 17:24

v-charts

因为工作需要,使用v-chart也有一段时间了,期间针对配置图表也遇到了不少问题,在这里总结一下。 如何配置图表信息 echart的配置项可谓是相当的海量,能不看就不看。而v-chart对其进行了不少的简化,所以我们想要自定义一个图表时,最好按照以下步骤来检查: 图表私有属性 v-chart每一个图表都有自己独有的设置项,想要配置这些项需要在组件上加入 :setting="chartSettings",然后在vue组建的data里设置chartSettings的值,如下...

0
0
发表了博客
2019/03/25 13:51

v-charts

optionpie_top: { title: { x: "50%", y: "45%", textAlign: "center", top: "75%", //字体的位置 text: "当日能源利用率", textStyle: { fontWeight: "normal", color: "black", fontSize: 16 }, subtextStyle: { //副标题的文字的样式 fontWeight: "bo...

0
0
发表了博客
2019/04/22 15:01

v-charts简介

一, v-charts简介 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 V-Charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。 v-charts 已经处理了关于echarts依赖引入的问题,保证所使用的图表,都是最小的文件。 二, 安装 npm安装 npm i v-charts -S 三,使用 引入v-c...

0
0
发表了博客
2019/04/18 10:43

v-charts 第一次亲密接触

v-charts是什么鬼 v-charts是饿了么团队开源的一个图表库,vue+echarts开发。用element-ui直接集成echarts有些费劲,而v-charts已经封装成vue组件,可以直接使用 传送门:echarts,v-charts github,v-charts文档 使用笔记 1.设置标题 / 标题属性:title 默认是居左,如果想显示在图表正上方,用 x : 'center' <ve-histogram :title="title" :data="data"></ve-histogram> data() { return { da...

0
0
发表了博客
2019/11/21 15:41

v-charts 柱状图改变颜色

<ve-histogram :data="chartData" :settings="chartSettings" :extend="chartExtend" ></ve-histogram> this.chartSettings = { labelMap: { BankReceiveAmount: "总收费", ActualAmout: "实收担保费", InvoiceAmount: "开票金额", Deposit: "收取保证金" }, yAxisName: ["金额(元)"] }; this.chartExtend = { ...

0
0
发表了博客
2019/03/14 16:49

v-charts x轴字体斜显示

如下图,因为X轴内容太多,放不下,插件默认间隔显示 需求:X轴内容要全部显示出来(只有斜显示或固定宽多余的用省略代替,本来需要就是想显示全部内容,所以只能取斜显示的方案) 先看看v-charts的文档: 通过extend属性实现对已配置好的内部属性进行单独的设置, extend为对象类型,对象内的属性可以是函数,也可以对象,也可以是其他类型的值 当属性为函数时,设置的是函数的返回值 当属性为对象时,如果在options中对应的属...

0
0
发表了博客
2019/03/29 19:55

v-charts修改点击图例事件,legendselectchanged

html: <!--折线图--> <ve-line :extend="item.chartExtend" :data-zoom="dataZoom" :height="chartHeight" :legend="item.legend" :data="item" :events="chartEvents" :settings="isRateTypeData(item.id)?successRateSettings:chartSettings"></ve-line> 需要在v-charts图表添加legend属性 chartDataColumns.map(item => { console.log('chartDataColumns66',char...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
7 评论
173 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部