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 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   玛卡巴鉲  阅读(1052)  评论(3编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示