使用Echarts快速绘图-饼图

最新推荐文章于 2025-05-22 15:15:18 发布

Sojourn2017

最新推荐文章于 2025-05-22 15:15:18 发布

阅读量890

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript echarts b

本文链接：https://blog.youkuaiyun.com/weixin_40870788/article/details/81086477

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用ECharts实现一个简单的饼图，并展示了从引入库到完成饼图配置的全过程。通过具体示例代码，读者可以了解到如何设置饼图的各项属性，包括样式、颜色和数据映射等。

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

Echarts

ECharts，一个使用 JavaScript实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

通过使用ECharts，可以快速实现数据可视化，下面简单演示一下饼图的简单使用
实现效果如下：
这里写图片描述

echarts的使用大致可以分为以下5个部分：

引入ECharts.js 库（可以通过官网地址下载）
为ECharts 实例准备具备大小的DOM
初始化实例
指定绘图的相关配置
使用实例

本例中使用webpack对文件进行打包，webpack的简单快速应用可以查看Webpack V4安装使用与常用配置总结

demo目录如下:

  webpack-demo
  |- index.html
  |- /src
    |- index.js
    |- /js
      |- pie-chart.js
  |- /build

index.html 文件代码如下，#pie-chart 为准备的用于绘制饼图的div, bundle.js 为打包好的js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echarts-test</title>
    <!-- <script src="./lib/echarts.js"></script> -->
    <style>
        div {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="pie-chart"></div>
    <script src="./build/bundle.js"></script>
</body>
</html>

绘图的相关配置放在pie-chart.js中:

// pie-chart.js

// 引入echarts库
var echarts = require('echarts');

// 初始化实例
var myChart = echarts.init(document.getElementById('pie-chart'));

// 指定配置
myChart.setOption({
  title: {
    // 标题组件
    text: 'ECharts 饼图'，    // 主标题名称
  },
  textStyle: {
    color: '#808080',    // 文字颜色
  },
  series: [
    {
      name: '访问来源',   // 定义名字
      type: 'pie',    // 定义类型（饼图）
      radius: '55%',    // [ default: [0, '75%'] ] 饼图半径 第一项为内半径，第二项为外半径
      data: [
        { value: 235, name: '视频广告' },
        { value: 274, name: '联盟广告' },
        { value: 310, name: '邮件营销' },
        { value: 335, name: '直接访问' },
        { value: 400, name: '搜索引擎' }
      ].sort((a,b) => a.value - b.value),
      roseType: 'radius',    // 南丁格尔图，通过半径区分数据大小
      itemStyle: {    // 图像样式
        // 阴影的大小
        shadowBlur: 200,
        // 阴影水平方向上的偏移
        shadowOffsetX: 0,
        // 阴影垂直方向上的偏移
        shadowOffsetY: 0,
        // 阴影颜色
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        // 颜色
        color: '#c23531',
      },
      labelLine: {
        lineStyle: {
          color: '#808080',
        }
      }
    }
  ],
  visualMap: {
    // 确定是否显示visualMap组件
    show: false,
    // 最小映射值
    min: '80',
    // 最大映射值
    max: '600',
    // 映射范围
    inRange: {
      // 通过明暗度映射
      colorLightness: [0, 1]
    }
  },
  backgroundColor: '#2c343c',   // 背景色
})

module.exports = {
  pieChart: myChart
}