<!-- 自定义Echarts
* options: Object,//数据
* theme: String,//主题
* initOptions: Object,//初始化
* group: String,//分组
* autoResize: Boolean,//自适应
* modules: Array,//模型
-->
<template>
<div style="height: 100%;width:100%"></div>
</template>
<script>
// enumerating ECharts events for now
const ACTION_EVENTS = [
'legendselectchanged',
'legendselected',
'legendunselected',
'datazoom',
'datarangeselected',
'timelinechanged',
'timelineplaychanged',
'restore',
'dataviewchanged',
'magictypechanged',
'geoselectchanged',
'geoselected',
'geounselected',
'pieselectchanged',
'pieselected',
'pieunselected',
'mapselectchanged',
'mapselected',
'mapunselected',
'axisareaselected',
'brush',
'brushselected'
];
const MOUSE_EVENTS = [
'click',
'dblclick',
'mouseover',
'mouseout',
'mousedown',
'mouseup',
'globalout'
];
export default {
props: {
options: Object,
theme: String,
initOptions: Object,
group: String,
autoResize: Boolean,
modules: Array
},
data () {
return {
chart: null,
}
},
computed: { // 数据驱动,不更新DOM
width: {
cache: false,
get () {
return this.chart.getWidth()
}
},
height: {
cache: false,
get () {
return this.chart.getHeight()
}
},
isDisposed: {
cache: false,
get () {
return this.chart.isDisposed()
}
}
},
watch: {// 通过监听参数:options、group进行重绘
options: {
handler (options) {
if (!this.chart && options) {
this.echartInit();
} else {
this.chart.setOption(this.options, true);
}
},
deep: true
},
group: {
handler (group) {
this.chart.group = group
}
}
},
methods: {
// 设置数据
mergeOptions (options) {
this._delegateMethod('setOption', options)
},
// 是否重新绘制
resize (options) {
this._delegateMethod('resize', options)
},
dispatchAction (payload) {
this._delegateMethod('dispatchAction', payload)
},
convertToPixel (finder, value) {
return this._delegateMethod('convertToPixel', finder, value)
},
convertFromPixel (finder, value) {
return this._delegateMethod('convertFromPixel', finder, value)
},
containPixel (finder, value) {
return this._delegateMethod('containPixel', finder, value)
},
showLoading (type, options) {
this._delegateMethod('showLoading', type, options)
},
hideLoading () {
this._delegateMethod('hideLoading')
},
getDataURL (options) {
return this._delegateMethod('getDataURL', options)
},
getConnectedDataURL (options) {
return this._delegateMethod('getConnectedDataURL', options)
},
clear () {
this._delegateMethod('clear')
},
dispose () {
this._delegateMethod('dispose')
},
_delegateMethod (name, ...args) {
if (!this.chart) {
return
}
return this.chart[name](...args)
},
echartInit () { // 按需引入
if (this.chart) return false;
import('echarts').then(({ init }) => {
const { $el, theme, initOptions, group, options, autoResize, _resizeHanlder } = this
let chart = init($el, theme, initOptions);
if (group) {
chart.group = group
}
chart.setOption(options, true);
// 自定义点击事件回调
ACTION_EVENTS.forEach(event => {
chart.on(event, params => {
this.$emit(event, params)
})
});
// 自定义鼠标事件回调
MOUSE_EVENTS.forEach(event => {
chart.on(event, params => {
this.$emit(event, params)
})
});
if (autoResize) {
window.addEventListener('resize', _resizeHanlder, false)
}
this.chart = chart;
console.log('加载成功', chart)
}).catch(_ => {
console.log('加载失败')
})
},
_resizeHanlder () {
window.setTimeout(() => {
this.chart.resize()
}, 100)
}
},
mounted () { // 初始化
if (this.options) {
this.echartInit()
}
},
beforeDestroy () {
if (!this.chart) {
return
}
if (this.autoResize) {
window.removeEventListener('resize', this._resizeHanlder, false)
}
this.dispose()
},
connect (group) {
const { chart } = this;
if (typeof group !== 'string') {
group = group.map(chart => chart.chart)
}
this.chart.connect(group)
},
disconnect (group) {
this.chart.disConnect(group)
},
registerMap (...args) {
this.chart.registerMap(...args)
},
registerTheme (...args) {
this.chart.registerTheme(...args)
}
}
</script>

echart——vue封装成公共组件的更多相关文章

  1. angular8 集成swiper, 并将swiper封装成公共组件

    安装Swiper npm install swiper --save 或者 yarn add swiper --save 在angular.json文件添加swiper.js和swiper.css   ...

  2. Asp.net Core中使用NLog,并封装成公共的日志方法

    1.安装NLog "NLog.Extensions.Logging": "1.0.0-rtm-alpha4" 2.配置NLog public void Conf ...

  3. vue封装一些常用组件loading、switch、progress

    vue封装一些常用组件loading.switch.progress github文档https://github.com/zengjielin/vue-component-library loadi ...

  4. 【小程序】---- 封装Echarts公共组件,遍历图表实现多个饼图

    一.问题描述: 在小程序的项目中,封装公共的饼图组件,并在需要的页面引入使用.要求一个页面中有多个饼图,动态渲染不同的数据. 二.效果实现: 1. 查看——小程序使用Echarts的方式 2. 封装饼 ...

  5. element-dialog封装成子组件

    1.父组件 <template> <card-layout :title="L('Users')" :actions="actions" @c ...

  6. Vue 封装的noData组件

    <template> <div :style="{color: fontColor}" :class="['noDataView', iconType] ...

  7. Vue 封装的loading组件

    <template> <div class="loadEffect"> <span></span> <span>< ...

  8. webpack 多页面支持 & 公共组件单独打包

    webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...

  9. webpack 多页面|入口支持和公共组件单独打包--转载

    转载自:http://www.jb51.net/article/117490.htm 本篇主要介绍:如何自动构建入口文件,并生成对应的output:公共js库如何单独打包. 多入口文件,自动扫描入口. ...

随机推荐

  1. test20190904

  2. 在excel图表上添加数据标签

    在excel图表上添加数据标签 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 https://zhidao.baidu.com/question/47838665 方法与步骤 在E ...

  3. response.getWriter().write的用法

    /** * 获取手机验证码的方法 */ var loopObjBindMobil = null; var secondsBindMobil = 0; function hqBindYzm(moblie ...

  4. PLSQL集合类型的使用总结

    PLSQL集合类型的使用总结 在pl sql 中,集合(collection) 是一组有序的元素组成的对象,这些元素的类型必须一致. pl sql 将collection 分成3 类,分别为Assoc ...

  5. typescript那些事儿

    本篇文章介绍typescript那些. ts-loader会调用typescript去编译.ts,typescript会读取tsconfig.json配置来决定如何编译. 在tsx文件中使用样式,需要 ...

  6. H5微信场景应用 audio模块

    css .bgAudio{width:27px;height:27px;position:fixed;right:10px;top:10px;z-index:999;-webkit-tap-highl ...

  7. git 获取线上代码并合并到本地

    //查询当前远程的版本 $ git remote -v //获取最新代码到本地(本地当前分支为[branch],获取的远端的分支为[origin/branch]) $ git fetch origin ...

  8. Django 之上下文处理器和中间件

    一.上下文处理器 上下文处理器是可以返回一些数据,在全局模板中都可以使用.比如登录后的用户信息,在很多页面中都需要使用,那么我们可以放在上下文处理器中,就没有必要在每个视图函数中都返回这个对象. 在s ...

  9. social engineering toolkit

    1. freebuf介绍 http://www.freebuf.com/sectool/73409.html 2. github https://github.com/trustedsec/socia ...

  10. jenkins最新版下载安装

    前提:安装配置 jetty 在线下载jetty# wget http://download.eclipse.org/jetty/8.1.17.v20150415/dist/jetty-distribu ...