地图echarts如何从主组件传递值到副组件

地图主组件向副组件传递数据
1.在主组件先定义一个地图,我们想向后台传递我的searchCondition中的month和yearFlag。

`<overMap style="height: 550px;width: 100%" :month="searchCondition.month" :key="timer" :yearFlag="searchCondition.yearFlag"></overMap>`
searchCondition:{
          vehicleModel:'',
          month:'',
        yearFlag:false,
      },

2.在副组件声明一个props来接受主组件的内容

props:['month','yearFlag'],

3.这样就把地图主组件的month和yearFlag传递到副组件了。

以下是一个基于 React 和 ECharts 的乌兰察布地图组件的 TypeScript 函数组件示例: ```tsx import React, { useEffect, useRef } from 'react'; import * as echarts from 'echarts'; import 'echarts/map/js/province/inner-mongolia'; interface MapProps { width: string | number; height: string | number; } const Map: React.FC<MapProps> = ({ width, height }) => { const chartRef = useRef<HTMLDivElement>(null); useEffect(() => { if (chartRef.current) { const chart = echarts.init(chartRef.current); chart.setOption({ tooltip: { trigger: 'item', }, visualMap: { min: 0, max: 1000, left: 'left', top: 'bottom', text: ['高', '低'], // 文本,默认为数值文本 calculable: true, }, series: [ { name: '乌兰察布市', type: 'map', mapType: '内蒙古', // 自定义扩展图表类型 label: { show: true, }, data: [ { name: '集宁区', value: Math.round(Math.random() * 1000) }, { name: '卓资县', value: Math.round(Math.random() * 1000) }, { name: '化德县', value: Math.round(Math.random() * 1000) }, { name: '商都县', value: Math.round(Math.random() * 1000) }, { name: '兴和县', value: Math.round(Math.random() * 1000) }, { name: '丰镇市', value: Math.round(Math.random() * 1000) }, ], }, ], }); } }, []); return <div ref={chartRef} style={{ width, height }} />; }; export default Map; ``` 使用方法: ```tsx <Map width="100%" height="500px" /> ``` 这个例子中,我们使用 `useRef` 获取到组件的 `div` 元素,然后在 `useEffect` 中初始化 ECharts 实例,并设置地图的数据和样式。最后,我们将 `div` 的引用传递ECharts 实例,以便它可以在其中绘制地图
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值