React + Echarts 绘制环形嵌套

最新推荐文章于 2025-06-15 09:06:09 发布

原创

最新推荐文章于 2025-06-15 09:06:09 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #react.js #javascript

本文介绍了如何使用React结合Echarts绘制环形嵌套图表，详细步骤包括安装Echarts、删除不必要的选项、调整颜色和宽度、修改配置以及数据。通过这些步骤，你可以轻松创建出环形嵌套效果。此外，还提及了一篇关于JavaScript与ES的25个重要知识点的笔记，可供学习提升。

Reach + Echarts 模拟实现一个大概类似的。

安装命令

yarn add echarts echarts-for-react

或者

npm install --save echarts echarts-for-react

初始使用

import React from 'react';
import ReactEcharts from 'echarts-for-react';
import './index.css'

export default class Line extends React.Component {getOption = () => {let option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]};return option

最低0.47元/天解锁文章