在react项目中使用highCharts图表,并给图表添加事件

代码:

import React, { useRef, useEffect } from 'react';
import _ from 'lodash';
import Highcharts from 'highcharts/highstock';
// import HighchartsMore from 'highcharts/highcharts-more';
// import HighchartsDrilldown from 'highcharts/modules/drilldown';
// import { Chart, Options, Point, Series } from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import highcharts3d from 'highcharts/highcharts-3d';highcharts3d(Highcharts);
const Pie = (props) => {const { employmentInfo, getPeopleList, setVisible } = propsconst data = employmentInfo.length !== 0 ? [[employmentInfo[0].label, employmentInfo[0].value],[employmentInfo[1].label, employmentInfo[1].value],[employmentInfo[2].label, employmentInfo[2].value],[employmentInfo[3].label, employmentInfo[3].value],[employmentInfo[4].label, employmentInfo[4].value],] : []const chart = useRef();const options = {chart: {backgroundColor: 'transparent',type: 'pie',options3d: {enabled: true,alpha: 25,beta: 0},height: 230,width: 230,},title: {text: '余东村就业情况',y: 66,x: 35,style: {color: '#fff',fontSize: '14px',},},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',depth: 35,dataLabels: {enabled: false,format: '{point.name}'}}},series: [{type: 'pie',name: '所占比例',data: data,showInLegend: true,events: {click: function (e) {getPeopleList({ income: e.point.options.name })setVisible(true)}}},],legend: {align: 'left',// y: '-10',layout: 'vertical',itemStyle: {color: '#ffffffe6',},},credits: {// 版权信息 (去水印)enabled: false,},}// 避免首次加载时,还没有拿到数据之前,页面就进行加载而导致没有数据;useEffect(() => {const reload = _.throttle(() => {chart.current.update({chart: {backgroundColor: 'transparent',type: 'pie',options3d: {enabled: true,alpha: 45,},// height: getRemSize(180),height: 200,width: 200,},series: [{type: 'pie',name: '所占比例',data: data,events: {click: function (e) {getPeopleList({ income: e.point.options.name })setVisible(true)}}},]});}, 500);window.addEventListener('resize', reload);return () => window.removeEventListener('resize', reload);}, []);return (<HighchartsReacthighcharts={Highcharts}options={options}callback={(ref) => (chart.current = ref)}/>)
}
export default Pie

效果:

点击某一项时可以调接口获取到对应的数据;
事件代码:

 series: [{type: 'pie',name: '所占比例',data: data,events: {click: function (e) {getPeopleList({ income: e.point.options.name })setVisible(true)}}},]

与echarts在react中的使用不同的是,highCharts在函数组件中不能通过实例来进行挂载,从而给实例添加事件;所以应该在series.event中添加事件

在react项目中使用highCharts图表,并给图表添加事件相关推荐

数据可视化：在 React 项目中使用 Vega 图表 (一)
相关包打开搜索引擎,一搜 Vega,发现相关的包有好几个,Vega, Vega-Lite, Vega-Embed,React-Vega 等等,不免让人头晕. 别急,它们之间的关系三四句话就能说明白, ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
react项目中使用mocha结合chai断言库进行单元测试
react项目中使用mocha结合chai断言库进行单元测试 git地址:https://github.com/yancekang/... 如果对你有所帮助,感谢start 项目搭建 create-r ...
优雅的在React项目中使用Redux
概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
如何优雅地在React项目中使用Redux
前言或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...
[react] 在React项目中你用过哪些动画的包？
[react] 在React项目中你用过哪些动画的包? react-transition-group 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...
如图:项目中百度地图的应用添加起始点.终点并绘制路线在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...

在react项目中使用highCharts图表,并给图表添加事件

在react项目中使用highCharts图表,并给图表添加事件相关推荐

最新文章

热门文章