vue-echarts-multi

A Vue.js echarts component
{ vue3版本 vue3-echarts-multi }

Build Setup

# install dependencies
npm install vue-echarts-multi --save
yarn add vue-echarts-multi -S

# 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;" />
        或
        <vue-echarts-multi :options="options" @getMychart="handleGetMyChart" @mychartEvent="mychartEvent" style="width: 200px;height: 200px;" />
    </div>
</tempalte>
<script>

说明
组件内props chartOpt内包含图表主题等信息可以按需传入 
chartOpt: {
      type: Object,
      default: ()=>{
        return {
          id: '',
          theme: '', // 图表主题
          opts: {
            // 图表附加参数
            // devicePixelRatio?: number,  // 设备像素比，默认取浏览器的值window.devicePixelRatio
            renderer: 'svg',   // 渲染器，支持 'canvas' 或者 'svg'
            // width?: number|string,  // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度
            // height?: number|string,   // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度
            // locale?: string   // 使用的语言，内置 'ZH' 和 'EN' 两个语言，也可以使用 echarts.registerLocale 方法注册新的语言包。目前支持的语言见 src/i18n
          },
          options: {}
        }
      }
    }
    ------- ------- ------- ------- ------- ------- ------- ------- ------- -------

echartsOpt内导出一个函数 return echarts的option对象
    
import echartsOpt from './options/echartsOpt.js'

export default {
    data() {
        return {
            echartsOpt: {
                id: '',
                theme: '', // 图表主题
                opts: {
                    // 图表附加参数
                    // devicePixelRatio?: number,  // 设备像素比，默认取浏览器的值window.devicePixelRatio
                    renderer: 'svg',   // 渲染器，支持 'canvas' 或者 'svg'
                    // width?: number|string,  // 可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度
                    // height?: number|string,   // 可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度
                    // locale?: string   // 使用的语言，内置 'ZH' 和 'EN' 两个语言，也可以使用 echarts.registerLocale 方法注册新的语言包。目前支持的语言见 src/i18n
                },
				options: {}         // 图表数据 setOption 内option对象
			},
            options: {}
        }
    }
    methods: {
        // myChart 为当前绑定echarts实例
    	handleGetMyChart(myChart, resizeArr){
			this.echartsOpt.options=echartsOpt({myChart})
            或
			this.options=echartsOpt({myChart})
		},
        // 视图改变后可进行一些事件操作
        mychartEvent(myChart) {
            // 返回当前echarts实例
        }
	}
}
</script>


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

# resize 可通过vuex或pinia获取当前页所有echarts实例resize函数并执行后响应式容器大小变化
resizeArr