0.0.9 • Published 4 years ago
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
EzVueChart Events
| 事件名称 | 说明 | 参数 |
|---|
| listener | 触发绑定的监听事件 | event 事件名称, params echarts返回的原始参数, data 原始数据 |
EzVueChart Slot
外部依赖
externals = {
echarts: 'echarts',
'ez-chart': 'EzChart',
vue: 'Vue',
lodash: 'lodash',
}