ECharts数据可视化饼图(南丁格尔玫瑰图)

最新推荐文章于 2025-01-26 16:57:54 发布

Yolo416

最新推荐文章于 2025-01-26 16:57:54 发布

阅读量4.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签： javascript

本文链接：https://blog.csdn.net/m0_50125215/article/details/116793624

本文介绍了如何使用ECharts实现数据可视化的饼图，特别是南丁格尔玫瑰图。首先，通过HTML引入图表，然后根据产品定制需求进行调整。详细步骤包括从官方示例获取模板，对图表进行个性化设置，如标签的edgeDistance属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ECharts图表实现步骤：

从官方示例中找到类似图表，适当修改，引入到HTML页面中。
按照产品需求，来定制图表。

https://echarts.apache.org/zh/option.html#series-pie.label.edgeDistance

在这里插入图片描述

echarts五个步骤

    1. 引入库：echarts.min.js
    2. 准备有大小的DOM容器（HTML结构）
    3. 实例化echarts对象：echarts.init(DOM容器)
    4. 配置echarts：提供一个对象配置项
    5. 将配置项给echarts对象：echarts对象.setOption(配置项)

1. HTML引入图表

2. 定制需求

option = {
   
    // 提示框组件
    tooltip: {
   
      // trigger 触发方式。  非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: 'item',
      // 格式化提示内容：
      // a 代表series系列图表名称