uniapp通过renderjs对echarts 的使用记录

1.下载echarts.js放到static目录

npm i echarts@3.6.2 --save // 使用版本一定要注意，这里3.6.2是测试过没问题的版本，高版本点击事件会报错

然后将js文件放到对应目录

2.创建组件，这里直接贴代码，map.vue：

<template>
    <view id="map-chart" @tap="echarts.onClick" :propData="propData" :change:propData="echarts.changePropData"
        :mapOption="mapOption" :change:mapOption="echarts.changeMapOption" style="height: 100%;width: 100%;"></view>
</template>

<script>
    export default {
        props: {
            propData: {
                type: Object,
                default: () => ({
                    areaName: 'china',
                    scatterDara: []
                })
            }, 
            mapOption: {
                type: Object,
                default: () => ({})
            }
        },
        data() {
            return {}
        },
        methods: {
            onViewClick(name) {
                this.$emit('chartClick', name)
            }
        }
    }
</script>

<script module="echarts" lang="renderjs">
    import {
        provinceNameList,
        baseOption,
        provinceNameObj
    } from '@/config/js/mapConfig.js'
    export default {
        data() {
            return {
                myChart: null,
                ownerInstance: null,
                echartsInstance: null,
                option: {},
                propChangeTimer: null
            }
        },
        mounted() {
            this.initEcharts()
            window.addEventListener('resize', this.resize)
        },
        methods: {
            initEcharts() {
                const {
                    areaName,
                    scatterDara
                } = this.propData
                // 动态引入类库
                const script = document.createElement('script')
                script.src = 'static/js/echarts.js'
                script.onload = () => {
                    this.initMap(areaName, scatterDara)
                    this.echartsInstance = echarts
                }
                document.head.appendChild(script)
            },
            initMap(areaStr = 'china', scatterDara = []) {
                if (!this.echartsInstance) {
                    return
                }
                if (this.myChart) {
                    this.myChart.dispose()
                }
                const filePathName = provinceNameObj[areaStr]
                const areaJson = require(`@/config/mapJson/${filePathName}.json`)
                this.echartsInstance.registerMap(areaStr, areaJson)
                this.myChart = this.echartsInstance.init(document.getElementById('map-chart'))
                const { zoom, layoutCenterTwo } = this.mapOption
                this.option = baseOption({
                    areaStr,
                    scatterDara,
                    zoom,
                    layoutCenterTwo
                })
                this.myChart.setOption(this.option)
                this.myChart.on('click', params => {
                    if (provinceNameList.includes(params.name)) {
                        setTimeout(() => {
                            this.ownerInstance.callMethod('onViewClick', params.name)
                        }, 200)
                    }
                })
            },
            resize() {
                this.myChart.resize()
            },
            onClick(event, ownerInstance) {
                this.ownerInstance = ownerInstance;
            },
            changePropData(val) {
                const {
                    areaName,
                    scatterDara
                } = val
                if (this.propChangeTimer) {
                    clearTimeout(this.propChangeTimer)
                    this.propChangeTimer = null
                }
                this.propChangeTimer = setTimeout(() => {
                    this.initMap(areaName, scatterDara)
                }, 300)
            },
            changeMapOption() {}
        }
    }
</script>

3.注意点

1）第一个注意点，因为这里使用的renderjs，所以数据监听这里会有所不用。

 <view id="map-chart" @tap="echarts.onClick" :propData="propData" :change:propData="echarts.changePropData"
        :mapOption="mapOption" :change:mapOption="echarts.changeMapOption" style="height: 100%;width: 100%;"></view>

注意我标红的代码，首先propData一定是定义在非renderjs的script里面：

 

然后事件必须监听变化数据，将需要的操作放到监听事件里面，上文中的changePropData事件，这个事件必须定义在renderjs的script中。

2）事件定义，如图所示定义就可以，事件必须定义在renderjs的script中：

 

3）双向数据绑定：

这个稍微研究一下就能明白，操作数据要用到传递事件：

首先，dom的操作事件要放在renderjs的script中，事件定义还是在标签上：<view id="map-chart" @tap="echarts.eventName"></view>

 

随后，又回到基础script触发传过来的事件，进行你要操作的逻辑，赋值或者与组件通讯都可以！

 

 

 

 

 

 真实情况使用的时候还要根据实际情况进行修改，这里只是提供参考！！！

 

__EOF__

本文作者：沧澜野兽迈特丶凯
本文链接：https://www.cnblogs.com/sxdjy/p/16529409.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！