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

Related tags

Charts 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

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

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

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

    enhancement question solved 
    opened by yifangts 14
  • 柱状图颜色不对应的BUG

    柱状图颜色不对应的BUG

    <template>
      <ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>
    </template>
    
    <script>
      module.exports = {
        created: function () {
          this.chartData = {
            columns: ['日期', '成本', '利润', '占比', '其他'],
            rows: [
              { '成本': 1523, '日期': '1月1日', '利润': 1523, '占比': 1122, '其他': 100 },
              { '成本': 1223, '日期': '1月2日', '利润': 1523, '占比': 1012, '其他': 100 },
              { '成本': 2123, '日期': '1月3日', '利润': 1523, '占比': 1314, '其他': 100 },
              { '成本': 4123, '日期': '1月4日', '利润': 1523, '占比': 1111, '其他': 100 }
            ]
          }
          this.chartSettings = {
            metrics: ['成本', '利润', '占比', '其他'],
            dimension: ['日期']
          }
        }
      }
    </script>
    

    以上代码,成本、利润、占比、其他默认的颜色对应关系为:绿、蓝、红、黄metrics中的利润设为''的时候,对应的颜色应为:绿、红、黄,此时的显示是正确的 再把metrics中的占比设为''的时候,对应的颜色应为:绿、黄,而此时的展示是绿、红 实测修改任意2项及以上metrics都会导致颜色不对应 而折线图却没有这个问题,修改折线图中任意的metrics都能对应正确的颜色

    enhancement 
    opened by lvvlan 10
  • tab切换问题,报错Error in nextTick:

    tab切换问题,报错Error in nextTick: "TypeError: Cannot read property 'echarts' of undefined"

    Summary 简述

    console两个报错以下: Error in nextTick: "TypeError: Cannot read property 'echarts' of undefined"

    Cannot read property 'echarts' of undefined

    我按https://v-charts.js.org/#/skill-demo 这个示例,图表没组件,使用ve-histogram 三个图表,切换正常没报错,然后我把ve-histogram再做一个子组件,方便复用这个图表组件,父组件获取数据通过prop向子组件(图表)传递数据,,tab切换显示正常,但是tab每次切换console一直报错。 我看了 #455 不知道是不是$children问题?我试了还是不行,请求助。 在发现新一个,默认在第一个tab(没有图表)点击切换到第二个tab,图表有加载动画,点击切换到第三个tab,图表没有动画。

    Expect 期望结果

    虽然显示正常,可是我希望不要红叉的报错,请问问题在哪儿?

    Reproduce 重现示例

    tim 20180815162820 图表子组件代码如下: tim 20180815163522 父组件代码如下: tim 20180815163557

    question need reply 
    opened by BOB262 9
  • 热点图 点击以后 或者全国地图点击以后能不能直接切换到省级别的

    热点图 点击以后 或者全国地图点击以后能不能直接切换到省级别的

    Summary 简述

    因为我这边需要就是根据当前的一个流量统计出当前哪些省份的流量比较突出 然后再根据哪些省份的流量再统计出这些省份的哪些城市的占比情况

    Expect 期望结果

    我希望能通过点击地图不同的省份来进入该省份以及的市 我看见现在是通过chartSettings.position 的值来改变不同的显示 所以但是我通过 this.chartEvents .click 来改变他的值的时候发现改变不了 然后通过@click 发现也不奏效 希望帮下忙 谢谢了

    Reproduce 重现示例

    image

    opened by yehoan 9
  • Display XAxis as string instead of value

    Display XAxis as string instead of value

    Summary 简述

    When using Histogram chart and set XAxisType: 'value', my XAxis is displaying it's value number, but i want to display my x Axis as a String label

    Expect 期望结果

    in Histogram Chart, How can i display my x Axis as a String label instead of it's value when my setting is XAxisType: 'value'

    Reproduce 重现示例

    create a new pen

    question solved 
    opened by phongtrandang 8
  • 可以支持一下echart v5+

    可以支持一下echart v5+

    Summary 简述

    echarts使用v5版本,本地运行提示 "import echarts from 'echarts/lib/echarts.js'" is not supported anymore. Use "import * as echarts from 'echarts/lib/echarts.js'" instead;

    Expect 期望结果

    正常使用

    Reproduce 重现示例

    image

    opened by Pengp-J 1
  • fix: series合并错误

    fix: series合并错误

    Check List

    • [ ] Regression test with the series attribute and the case of the extend props when the series is an array type
    • [ ] Synchronized with the master branch
    • [ ] CI passed

    What Changed

    When the extend props with the series attribute and the series is an array type is merged into the final configuration of echarts, each item of the series should be merged instead of the entire series array

    Breaking Change

    • [x] No

    Document Update

    • [ ] No
    opened by Lozoe 0
  • v-charts中的extend属性与vue中的extend冲突报错

    v-charts中的extend属性与vue中的extend冲突报错

    Summary 简述

    Method "extend" has already been defined as a prop.

    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"

    Expect 期望结果

    Reproduce 重现示例

    opened by HJBhuang 1
Releases(v1.18.0)
Owner
饿了么前端
work hard, play harder
饿了么前端
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 900 Nov 16, 2022
📊📈 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 64 Oct 14, 2022
Apache ECharts component for Vue.js.

Uses Apache ECharts 5 and works for both Vue.js 2/3.

Baidu EFE team 7.7k Nov 25, 2022
数字孪生可视化3d建模大屏,echarts,vue,cezium

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

tmqq2333 103 Dec 4, 2022
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 364 Nov 21, 2022
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 7.7k Dec 4, 2022
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 900 Nov 16, 2022
📊📈 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 64 Oct 14, 2022
Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 开发的后台管理系统

vue3-admin Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 后台管理系统。 newbee-mall 项目是一套电商系统,基于 Spring Boot 2.X 和 Vue 以及相关技术栈开发。

newbee-ltd 2.3k Dec 1, 2022
Apache ECharts component for Vue.js.

Uses Apache ECharts 5 and works for both Vue.js 2/3.

Baidu EFE team 7.7k Nov 25, 2022
数字孪生可视化3d建模大屏,echarts,vue,cezium

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

tmqq2333 103 Dec 4, 2022
组件库包含了 AutoForm 自动表单、BackTop 返回顶部、Breadcrumb 面包屑、 Button 按钮、Cascader 级联选择器、Checkbox 多选框、Collapse 折叠面板、ColorPicker 颜色选择器、DataPicker 时间选择器、Dialog 弹层对话框、Alert 弹框、Echarts 图形图表、Form 表单、Input 输入框、Lazy 图片延时加载、Loading 加载等待、Menu 菜单、Pagination 分页、Progress 进度条、Radio 单选框、Select 选择器、Steps 步骤条、Swiper 图片轮播、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 提示、Transfer 穿梭框、Tree 树形、Upload 上传等常用组件

组件库包含了 AutoForm 自动表单、BackTop 返回顶部、Breadcrumb 面包屑、 Button 按钮、Cascader 级联选择器、Checkbox 多选框、Collapse 折叠面板、ColorPicker 颜色选择器、DataPicker 时间选择器、Dialog 弹层对话框、Alert 弹框、Echarts 图形图表、Form 表单、Input 输入框、Lazy 图片延时加载、Loading 加载等待、Menu 菜单、Pagination 分页、Progress 进度条、Radio 单选框、Select 选择器、Steps 步骤条、Swiper 图片轮播、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 提示、Transfer 穿梭框、Tree 树形、Upload 上传等常用组件

null 42 Oct 22, 2022
A panel framework based on Vue 2.0, iView and ECharts.

Vue Panel Framework, Live Demo 安装 install node / npm(cnpm) git clone "https://github.com/luosijie/vue-manager" cnpm install npm run dev visit localhos

JesseLuo 623 Nov 16, 2022
使用 Taro3 + Vue3 + NutUi + echarts + ts + pinia 开发微信小程序

使用 Taro3 + Vue3 + NutUi + echarts + ts + pinia 开发微信小程序 前言 目前此项目仅支持微信小程序 目标功能 集成 vue3,使用 script setup 语法开发 集成 Typescript 代码检查和格式优化 全局状态管理 小程序分包配置 样式封装,

scrollHeart 2 Oct 9, 2022
mmf-blog vue2.0 (vue2, vue-router, vuex)

mmf-blog vuejs 2.0 v2 中文说明 demo: http://vue2.mmxiaowu.com The main technical stack: vue2, vue2-router, vuex, webpack, babel, eslint Other versions rea

LinCenYing 237 Jul 18, 2022
A simple events calendar for Vue2, no dependencies except Vue2.

vue-event-calendar A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Live Demo Here 中文文档 Requirements vue: ^2

Geoff Zhu 633 Nov 11, 2022
An Mobile-First image viewer for Vue2 / 一个移动端优先的 Vue2 图片预览插件

img-vuer An Mobile-First image viewer for Vue2 中文 README ??‍♀️ Easy to use ?? Swipe gesture ?? Zoom gesture V0.11.0 Now you can use thumbnail~ V0.13.0

DJJo 260 Sep 20, 2022
A vue2 Passenger guiding platform(vue2+vue-router+axios+element-ui+sass)

A vue2 Passenger guiding platform(vue2+vue-router+axios+element-ui+sass)

刘云鹤 14 Aug 31, 2022
A webapp what base Vue2.0 contains seaching and playing music

vue-music163 A Vue.js project for music Use vuejs-2.0 vue-cli vue-router vuex mint-ui Support Chrome Firefox Mobile browser Package for app Appcan Api

null 92 Apr 21, 2022
Vue2 + Google Cloud Vision + Progressive Web App With Face Detection

The-feeling Vue2 + Vuetify + google cloud vision api with Progressive Web App Example Getting Started Enable google cloud vision api At -> src/compone

Visarut Phusua 39 Apr 7, 2022