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里面：