ez-vue-chart

ez-vue-chart

结合ez-chart使用的vue组件，自动watch数据 打印log，监听resize事件等

安装

npm install ez-vue-chart yarn add ez-vue-chart

使用

// main.js
import Vue from 'vue'
import App from './App.vue'
import lodash from 'lodash';
import echarts from 'echarts'
import EzChart from 'ez-chart'
import ezVueChart from 'ez-vue-chart'
Vue.use(ezVueChart)
new Vue({
  el: '#app',
  render: h => h(App)
})
// app.vue
<template>
  <div id="app">
      <ez-chart :data="data" :keyMap="['label', 'val', 'val2']" type="bar" register="click"></ez-chart>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      data: [
        {
          label: 'test',
          val: 111,
          val2: 31,
        },
        {
          label: 'test2',
          val: 312,
          val2: 142,
        }
      ]
    }
  }
}
</script>

示例地址

展示地址

参数

EzVueChart Attributes

参数	说明	类型	可选值	默认值
type	选择渲染的图表类型	string	bar/line/pie/funnel/scatter 以及customType	--
keyMap	传入的data中需要提取的值的key集合	Arrary:string	--	['label', 'value']
data	原始数据	array<object>	--	--
params	ezChart.getOption的params参数	object	--	{}
echartsInitOptions	echarts.init初始化时的参数	object	--	{}
registerTheme	使用的图标主题	string	--	''
register	注册的事件	string|array	--	--
resizeWaiting	resize事件触发防抖函数的等待时间	number	--	500
styles	默认的图表样式只会拿到宽度和高度作为echarts.init的初始项，会被echartsInitOptions覆盖	Object	--	{ height: '300px',width: 'auto'}
log	是否打印日志	Boolean	--	false

EzVueChart Methods

方法名	说明	参数
renderChart	渲染图表	--

EzVueChart Events

事件名称	说明	参数
listener	触发绑定的监听事件	event 事件名称, params echarts返回的原始参数, data 原始数据

EzVueChart Slot

名称	说明
--	自定义缺省页样式

外部依赖

externals = {
    echarts: 'echarts',
    'ez-chart': 'EzChart',
    vue: 'Vue',
    lodash: 'lodash',
}