echarts---饼状图

cc&

已于 2023-03-15 14:56:03 修改

阅读量561

点赞数

分类专栏：数据可视化文章标签： echarts javascript ecmascript

于 2023-03-15 14:16:49 首次发布

本文链接：https://blog.csdn.net/grow_/article/details/129553846

版权

数据可视化专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章提供了一个使用ECharts库创建点位分布统计图表的完整HTML代码示例，包括了自定义颜色、饼图大小、显示模式、数据内容以及字体大小和引导线长度的调整。此外，还介绍了如何使图表在浏览器缩放时自动适配。

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

1.完整的HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="pie" style="width: 100%; height: 500px"></div>
    <script src="./js/echarts.js"></script>
    <script>
      // 点位分布统计模块
      (function () {
        // 1. 实例化对象
        var myChart = echarts.init(document.querySelector(".pie"));
        // 2. 指定配置项和数据
        var option = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          color: [
            "#006c1f",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff",
          ],
          series: [
            {
              name: "面积模式",
              type: "pie",
              radius: [30, 110],
              center: ["75%", "50%"],
              roseType: "area",
              label: {
                fontSize: 10,
              },
              labelLine: {
                length: 3,
                length2: 2,
              },
              data: [
                { value: 10, name: "rose1" },
                { value: 5, name: "rose2" },
                { value: 15, name: "rose3" },
                { value: 25, name: "rose4" },
                { value: 20, name: "rose5" },
                { value: 35, name: "rose6" },
                { value: 30, name: "rose7" },
                { value: 40, name: "rose8" },
              ],
            },
          ],
        };

        // 3. 配置项和数据给我们的实例化对象
        myChart.setOption(option);
        // 监听浏览器缩放，图表对象调用缩放resize函数
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      })();
    </script>
  </body>
</html>

2.定制需求

第一步：参考官方例子，熟悉里面参数具体含义

tootip 含义解析

series 含义解析

option = {
    // 提示框组件
    tooltip: {
      // trigger 触发方式。  非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: 'item',
      // 格式化提示内容：
      // a 代表series系列图表名称  
      // b 代表series数据名称 data 里面的name    
      // c 代表series数据值 data 里面的value   
      // d代表  当前数据/总数据的比例
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 控制图表
    series: [
      {
        // 图表名称
        name: '点位统计',
        // 图表类型
        type: 'pie',
        // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
        // 饼形图半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）
        radius: ['10%', '70%'],
        // 图表中心位置 left 50%  top 50%  距离图表DOM容器
        center: ['50%', '50%'],
        // radius 半径模式，另外一种是 area 面积模式
        roseType: 'radius',
        // 数据集 value 数据的值 name 数据的名称
        data: [
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        }
    ]
};

第二步：按照需求定制

需求1：颜色设置

color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

需求2：修改饼状图大小（series对象）

radius: ['10%', '70%'],

需求3：把饼状图的显示模式改为半径模式

 roseType: "radius",

需求4：数据使用低缓（series对象里面data对象）

          { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 42, name: '湖北' }

细节优化

需求5：字体略小一些 10px (series对象里面设置)

饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置

series: [
      {
        name: "面积模式",
        type: "pie",
        radius: [30, 110],
        center: ["50%", "50%"],
        roseType: "radius",
        // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
        label: {
          fontSize: 10
        },
      }
    ]
  };

需求6：防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )连接图表 6 px 连接文字 8 px

+        // 文字调整
+        label:{
+          fontSize: 10
+        },
+        // 引导线调整
+        labelLine: {
+          // 连接扇形图线长
+          length: 6,
+          // 连接文字线长
+          length2: 8
+        } 
+      }
+    ],

需求7：浏览器缩放的时候，图标跟着自动适配

// 监听浏览器缩放，图表对象调用缩放resize函数
window.addEventListener("resize", function() {
    myChart.resize();
  });

cc&

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录