基于 Vue2.0 和 ECharts 封装的图表组件📈📊

Related tags

vue echarts
Overview

mark text

v-charts

Build Status NPM downloads Npm package Language License Join the chat

Document | Sample Project | English | 中文

Chart components based on Vue2.x and Echarts

Features

  • Uniform data format: Use an uniform data format that both convient for frontend and backend, and also easy to create and edit.
  • Simplified configuration: With simplified configuration items, complex requirements can be easily implemented.
  • Simple customization: Provide a variety of custom Echarts way, you can easily set the chart options.

Support

Modern browsers and Internet Explorer 10+, include pc and mobile browser.

Install

npm i v-charts echarts -S

Start

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

<script>
import VeLine from 'v-charts/lib/line.common'
export default {
  components: { VeLine },
  data () {
    return {
      chartData: {
        columns: ['date', 'PV'],
        rows: [
          { 'date': '01-01', 'PV': 1231 },
          { 'date': '01-02', 'PV': 1223 },
          { 'date': '01-03', 'PV': 2123 },
          { 'date': '01-04', 'PV': 4123 },
          { 'date': '01-05', 'PV': 3123 },
          { 'date': '01-06', 'PV': 7123 }
        ]
      }
    }
  }
}
</script>

Changelog

Detailed changes for each release are documented in the release notes or ChangeLog.

Contribution

Please make sure to read the Contributing Guide before making a pull request.

License

MIT

Issues
  • heatmap 笛卡尔坐标系自定义tooltip

    heatmap 笛卡尔坐标系自定义tooltip

    鼠标移动到某个格子的时候, 显示的内容能自定义吗? 或者格子默认显示信息, 点击可跳转

    opened by lazywhite 17
  • 如何实时无刷新更新echart

    如何实时无刷新更新echart

    Summary 简述

    根据筛选条件实时更新echart,目前状态是需要刷新页面才会将最新数据更新到Echart图上。 image

    Expect 期望结果

    希望能无刷新更新Echart

    opened by RikaLuo 17
  • 您好,给图表设置legend的时候不起效

    您好,给图表设置legend的时候不起效

    this.chartSettings = { legend:{ selectedMode:'single', } } 在echarts官网示例中能够设置图例的选择模式,可以设置成为单选,但是在我们v-charts中并不支持,我看了一下源码,只有metrics,legendName,legendMap三种才能够修改, 希望能够下版本更新之后加上哈,或者大神告诉我有能够实现的方式

    enhancement question solved 
    opened by yifangts 14
  • 散点图

    散点图

    Summary 简述

    请问下是否支持散点图,不是带有日期这种,比如x,y image 而不是这种 image

    Expect 期望结果

    或者其它实现

    Reproduce 重现示例

    question solved 
    opened by zhanwen 14
  • 引用错误Uncaught ReferenceError: __DEV__ is not defined

    引用错误Uncaught ReferenceError: __DEV__ is not defined

    版本"v-charts": "^1.1.2" image

    opened by Tibbersss 13
  • ve-map 不显示,其他组件的都正常

    ve-map 不显示,其他组件的都正常

    Summary 简述

    echarts @^4.1.0 v-charts @^1.17.6 其他的折现,柱状都显示正常,只有地图完全不加载,其他项目里又是正常的,完全想不到会受什么影响了,地图组件只显示个div,里面没有加载canvas

    Reproduce 重现示例

    image image

    question solved 
    opened by Toxicant2 13
  • 怎么修改柱状图里面柱的颜色

    怎么修改柱状图里面柱的颜色

    question 
    opened by wangzy123 12
  • 标题无法显示

    标题无法显示

    在vue里,使用

    import VeLine from 'v-charts/lib/line'
    Vue.component(VeLine.name, VeLine)
    

    后,标题无法显示出来。 我是按照这个例子来进行测试的:https://jsfiddle.net/aa7ojxyt/25/

    opened by BlackHole1 12
  • 条形图纵轴

    条形图纵轴

    条形图纵轴显示数据不全怎么解决呢?求指教 image

    opened by WarrenJones 10
  • 折线图双Y轴怎么设置左右轴分隔线重合

    折线图双Y轴怎么设置左右轴分隔线重合

    image

    如图 左右轴的分隔线不在一条水平线上 看起来很乱 有没有办法可以设置重合

    Expect 期望结果

    左右轴的分割线可以重合

    Reproduce 重现示例

    opened by showking1221 0
  • 关于饿了么前端团队:请大神们,继续维护v-charts组件库 不然大家就不点外卖了,哈哈哈哈😂

    关于饿了么前端团队:请大神们,继续维护v-charts组件库 不然大家就不点外卖了,哈哈哈哈😂

    今天有点倒霉三件:第一是用支付宝刷地铁乘车码,出BUG系统一直繁忙,没出得了站害我迟到;第二点外卖: 饿了么蓝骑士一直在取货1个多小时,把我饿惨了;第三 今天准备用v-charts 结果给我了一个惊喜,结果大家都知道;

    opened by Dyaohub 0
  • 使用<ve-bar>的横向条形图时能否使条形居中对称展示

    使用的横向条形图时能否使条形居中对称展示

    echarts貌似有通过对数据处理的方式将条形图居中对齐, vcharts的数据结构与echarts有差异, 应该如何把底部对齐的条形图改为居中对齐

    opened by Tanglihang 0
  • v-charts多折线配置单个折线问题?

    v-charts多折线配置单个折线问题?

    比如增加标识元素的属性

    标识元素包括:markLine、markArea、markPoint,当我们图标包含多根折线,设置的标识元素会被增加到每一个折线上,这样我们需要用到afterConfig属性,而不是官网的extend属性。

    地址:https://jsfiddle.net/chiputao/w7ze023g/1/

    opened by Wpcc 0
  • 不支持echarts5.0.0+

    不支持echarts5.0.0+

    Summary 简述

    Expect 期望结果

    Reproduce 重现示例

    opened by jhd4tmr 2
  • 搞了一个新的帮助文档,部署在 http://woolen.gitee.io/v-charts/#/

    搞了一个新的帮助文档,部署在 http://woolen.gitee.io/v-charts/#/

    Summary 简述

    原帮助没图了, 因为docsify 版本问题,也没有提交合入,自己弄了一个新的pages帮助一下朋友们

    Expect 期望结果

    原帮助没图了, 因为docsify 版本问题,也没有提交合入,自己弄了一个新的pages帮助一下朋友们

    Reproduce 重现示例

    原帮助没图了, 因为docsify 版本问题,也没有提交合入,自己弄了一个新的pages帮助一下朋友们

    原帮助没图了, 因为docsify 版本问题,也没有提交合入,自己弄了一个新的pages帮助一下朋友们

    opened by WoolenWang 17
  • extend 在yAxis属性传入数组后解析得到的option不正确

    extend 在yAxis属性传入数组后解析得到的option不正确

    ###function setExtend

     options[attr].forEach(function (option, index) {
                options[attr][index] = _extends({}, option, value);
    });
    

    修改为后我的yAxis传入数组才能正常显示图表

     options[attr].forEach(function (option, index) {
                options[attr][index] = _extends({}, option, value[index]);
    });
    
    opened by git-chenjiqing 1
  • graphic vue项目 全局引入v-chart 就起作用,按需单独引入ring 组件就无效

    graphic vue项目 全局引入v-chart 就起作用,按需单独引入ring 组件就无效

    Summary 简述

    如图 单独引入VeRing,graphic 无效,设置了环中也不会显示文字。

    Expect 期望结果

    如下图 image image 在单独引入组件的情况下期待如下效果: image

    Reproduce 重现示例

    opened by lokiwei 1
  • fix(demo): downgrade docsify to specify version

    fix(demo): downgrade docsify to specify version

    downgrade docsify make it compatible with vuep to show v-chart demo

    Not sure what change cause issue.

    Here is reference diff for the version which not work since 4.12.0 (release Note) compare to 4.11.6 (work well with vuep)

    Check List

    • [x] Every Commit message is meaningful
    • [ ] Synchronized with the master branch
    • [ ] CI passed

    What Changed

    Breaking Change

    • [ ] Yes
    • [x] No

    Document Update

    • [x] Yes
    • [ ] No
    opened by scplay 0
  • 官网图例都不能能用了,看不了了,还维护吗?

    官网图例都不能能用了,看不了了,还维护吗?

    Summary 简述

    Expect 期望结果

    Reproduce 重现示例

    opened by chaoming007 15
Releases(v1.18.0)
Owner
饿了么前端
work hard, play harder
饿了么前端
Apache ECharts component for Vue.js.

Vue-ECharts Vue.js component for Apache ECharts. ???? 中文版 Uses Apache ECharts 5 and works for both Vue.js 2/3. ?? Heads up ?? If your project is using

Baidu EFE team 6.1k Jun 14, 2021
Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)

vue-echarts-v3 Vue.js v2.x+ component wrap for Apache ECharts (incubating) v3.x+ Feature Lightweight, efficient, on-demand binding events; Support for

xLsDg 887 May 30, 2021
📊📈 ECharts wrapper component for Vue 3 and 2

简体中文 | English ECharts For Vue ?? ?? ECharts wrapper component for Vue 3 and 2 Features Support for Vue 3 and 2; Conform to the habits of Vue and ECha

null 49 Jun 12, 2021
基于 Vue2.0 和 ECharts 封装的图表组件📈📊

v-charts Document | Sample Project | English | 中文 Chart components based on Vue2.x and Echarts Features Uniform data format: Use an uniform data forma

饿了么前端 6.4k Jun 5, 2021
数字孪生可视化3d建模大屏,echarts,vue,cezium

在线效果演示 项目架构 │ vue.config.js // webpack配置 ├─public │ favicon.ico // ico图标 │ index.html

tmqq2333 11 May 18, 2021
DataV Vue 一个基于 Vue3.x 的数据可视化(DataV)项目

DataV Vue 一个基于 Vue3.x 的数据可视化项目 ?? Vue 3.0+ ?? TypeScript 4.2+ ?? ECharts 5.0+ 简介 国外 GitHub 国内 Gitee 预览 DataV 在线预览 因为项目中的 Mock 服务

Allen 62 Jun 9, 2021
A Vue 2 integration using Frappe Charts

Vue 2 Frappe Charts This is a simple package to get using Frappe Charts within VueJS How to use First we need to import and initialize import Vue from

Steve McDougall 145 May 23, 2021
Base on Vue2.0 wrapper for ChartJs. (Deprecated)

Deprecated Package ?? This package is no longer maintain. ?? vue-charts Base on Vue2, wrapper for ChartJs. Vue js Chart js Work well with Laravel Rend

Gimmy 367 May 21, 2021
A Vuejs 2 adapter for Visjs

vue2vis This monorepo hosts Vue2 component wrapper for the visjs libraries. If you are looking for the old [email protected] please use the branch 0.x Usage Pl

null 205 May 31, 2021
Reactive Vue.js wrapper for Google Charts lib

vue-google-charts Reactive Vue.js wrapper for Google Charts lib Table of contents Installation Usage Example Installation npm i vue-google-charts Def

Devstark 368 Jun 11, 2021
Toast UI Chart for Vue

TOAST UI Chart for Vue This is Vue component wrapping TOAST UI Chart. ?? Table of Contents Collect statistics on the use of open source Install Using

NHN 53 May 27, 2021
Simple and lightweight vue chart component without using chart library dependencies

Pure Vue Chart A simple and lightweight vue component for making charts that do not rely on large chart libraries and will not bloat your dependencies

Danny Jackson 53 May 10, 2021
Generate beautiful charts with CSS and Vue: full accessibility and no hassle.

Visualization helps end-users understand data. Vue Charts.CSS helps frontend developers turn data into beautiful charts and graphs using the powerful Charts.CSS framework.

VueChartsCSS 9 May 7, 2021
Vue.js Demos. jQWidgets Vue.js Components - Grids, Charts, Scheduling, Pivot Tables

jQWidgets Vue Components Demos You can view them online here: https://www.jqwidgets.com/vue/. Build modern Web Apps with jQWidgets and Vue. jQWidgets

jQWidgets 50 May 31, 2021