v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具

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

安装


npm i v-charts echarts -S

文档


v-charts.js.org

快速上手


<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>

LICENSE


MIT

原文链接:github.com

上一篇:fingerprintjs2
下一篇:vscode-recipes (VS Code 调试主流前端框架的基本姿势,微软出品)

相关推荐

  • 首个使用 Weex 和 Vue 开发的 Hacker News 原生应用

    首个使用 Weex 和 Vue 开发的 Hacker News 原生应用。 预览 用 Weex Playground App 扫描下方二维码即可。 项目使用的 Hacker News API 是由 ...

    3 年前
  • 面试官问你有没有了解过 vue-cli 构建的打包工程

    前言 使用过 vue 进行项目开发的同学,一定知道或者使用过 vue-cli 脚手架,他能够很好的搭建项目结构和工程,让我们能够把足够的精力放在业务开发上。也正是因为这样,很多时候我们会因为项目工期短...

    3 年前
  • 重磅!尤雨溪发布Vue 3.0开发路线

    作者|尤雨溪译者|无明编辑|覃云 在上周的 Vue.js 伦敦大会上,尤雨溪简要介绍了 Vue 下一个主要版本要发布的内容,9 月 30 日,尤雨溪在 medium 个人博客上发布了 Vue 3.0 ...

    2 年前
  • 重磅!Vue CLI 3.0正式发布,带来多项重大更新

    编译|覃云近日,Vue 的作者尤雨溪在 Medium 上宣布正式发布 Vue CLI 3.0,它也将为很多开发者带来期待已久的新特性。丰富的内置功能 尤雨溪表示,Vue CLI 3.0 与其他的版本完...

    2 年前
  • 通过npm引用的vue组件使用详解

    什么是组件:组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。

    4 年前
  • 适用于 Vue 2.0 的功能强大的 Contextmenu 组件

    适用于 Vue 2.0 的 ContextMenu 组件。 中文 | English 安装 $ yarn add v-contextmenu # npm i -S v-contextmenu概览 ...

    3 年前
  • 说说我眼中的Vue和React

    前序 我最早接触的是reactjs,时间是在2016年,当时主要从官网学习,并且写了一些笔记。坦白讲,当时学习了一段时间,只是对里面的概念有点印象而已。也搞不懂怎么去具体的使用在项目里面,里面的思...

    3 年前
  • 详解在Vue中通过自定义指令获取dom元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的;  在 vue.js 中,获取某个DOM Elem...

    4 年前
  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,...

    4 年前
  • 详解vue父子模版嵌套案例

    这里是父子模版的调用 这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档 vue2.0 :http://vuefe.cn/guide/ vue-router2.0: https://rou...

    4 年前

公众号

欢迎 JavaScript 爱好者