# vue-echarts-multi

**Repository Path**: qqlayzhang777/vue-echarts-multi

## Basic Information

- **Project Name**: vue-echarts-multi
- **Description**: vue单页面内多个echarts图表实例组件，支持各个echarts渲染阶段实例，事件调用
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-03-08
- **Last Updated**: 2023-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-echarts-multi

> A Vue.js echarts component

npm install

npm run serve

## Build Setup

``` bash
# install dependencies
npm install vue-echarts-multi --save
yarn add vue-echarts-multi --save

# main.js
import vueEchartsMulti from 'vue-echarts-multi'
vue.use(vueEchartsMulti)

# example
<tempalte>
    <div>
        <vue-echarts-multi :chartOpt="echartsOpt" @getMychart="handleGetMyChart" @mychartEvent="mychartEvent" style="width: 200px;height: 200px;" />
    </div>
</tempalte>
<script>
    
import echartsOpt from './options/echartsOpt.js'
export default {
    data() {
        return {
            echartsOpt: {
				id: 'echartsOpt_id',  // 传参id为同一页面内唯一
				options: {}         // 图表数据 setOption 内option对象
			}
        }
    }
    methods: {
        // myChart 为当前绑定echarts实例
    	handleGetMyChart(myChart){
			this.echartsOpt.options=echartsOpt({myChart})
		},
        // 视图改变后可进行一些事件操作
        mychartEvent(myChart) {
            // 返回当前echarts实例
        }
	}
}
</script>


# echartsOpt.js
export default function(opt={}){
    return {
        //...option
    }
}

# resize 可通过sessionStorage获取当前页所有echarts实例resize函数并执行后响应式容器大小变化
let resizeArr = JSON.parse(sessionStorage.getItem('resizeArr'))