react + echarts饼图轮播高亮

BSCIO_599

已于 2023-12-08 14:54:42 修改

阅读量283

点赞数 3

文章标签： react.js echarts typescript

于 2023-12-08 14:30:45 首次发布

本文链接：https://blog.csdn.net/weixin_40581358/article/details/134877853

版权

本文介绍了如何在React项目中结合Echarts库创建饼图，并实现图表的轮播高亮效果。通过阅读组件PieChart.tsx的实现和在index.tsx中的使用方法，读者可以了解到如何在TypeScript环境中优雅地整合React和Echarts功能。

摘要由CSDN通过智能技术生成

组件 - PieChart.tsx

import * as echarts from 'echarts'
import { px2vh } from '@/utils/styleUtils'
import styled from 'styled-components/macro'
import { useEffect, useMemo, useRef, useState } from 'react'

export function PieChart({ chartId, height = 180, legendList, colorlist, optionData }) {
  const myChart = useRef(null)
  const [currentIndex, setCurrentIndex] = useState<number>(0)
  useEffect(() => {
    drawChart()
    setTimeout(() => {
      window.onresize = () => {
        myChart.current.resize()
      }
    }, 200)
  }, [])
  const option = useMemo(() => {
    return {
      legend: {
        show: false,
      },
      color: colorlist,
      series: [
        //外层圆
        {
          name: '圆圈',
          type: 'pie',
          zlevel: 0,
          radius: ['0', '0'],
          center: ['50%', '50