1.0.6 • Published 7 years ago

vue-echarts-test v1.0.6

Weekly downloads
4
License
MIT
Repository
github
Last release
7 years ago

V-Charts

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

安装


npm i v-charts -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>

目前支持的图表有 line, bar, column, waterfall, pie, ring, funnel, radar

文档

https://vue-echarts.github.io/

属性


配置项简介类型示例备注
data图表数据Object{ columns: [], rows: [] }columns代表指标和维度名称, rows为数据内容
settings图表配置项Object{ "yAxisType": [ "KMB", "percent" ] }
colors颜色列表Array[ "#19d4ae", "#5ab1ef", "#fa6e86", "#ffb980", "#0067a6", "#c4b4e4" ]
tooltip是否显示提示框Booleanfalse默认为true
grid网格配置Object{ left: 20, right: 20 }
scale是否是脱离 0 值比例Object{ x: true, y: true }设置成 true 后坐标刻度不会强制包含零刻度,默认都是false
events为图表绑定事件Object{ click: function (e) { console.log(e) } }
before-config对数据提前进行额外的处理Functionfunction (data) { /* do something */return data; }在数据转化为配置项开始前触发,参数为data,需返回表格数据
after-config对生成好的echarts配置进行额外的处理Functionfunction (options) { /* do something */return options; }在数据转化为配置项结束后触发,参数为options, 需返回echarts配置