【Echarts】- 制作饼图

59 阅读 0 评论 39 点赞

我是靠谱客的博主鳗鱼大象，最近开发中收集的这篇文章主要介绍【Echarts】- 制作饼图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果大概是这样

步骤分析

封装好函数，为后续传入真实数据做准备

初始化echarts

设置配置项，空的 option 即可

创建图表

查找官方示例

按需求，自定义配置图表

第一步：echarts基本步骤

 function pieChart() {
   let myChart = echarts.init(document.querySelector('.pie'));
     let option = {};
     myChart.setOption(option);
 }

第二步：参照官方示例

（官方示例：Examples - Apache ECharts）

只留下series系列数据配置，其他全部删除。

第三步：自定义配置

增加标题，标题颜色 #6d767e

增加鼠标移入提示。（比如：“各地学员分布北京市 12人占比6.8%”）

系列数据

修改 name 为 '各地学员分布'

饼图，内圈半径 10%，外圈半径 60%

居中显示

面积模式

扇形轮廓圆角（4px）

完成后的配置项如下：

function pieChart() {
  let myChart = echarts.init($('.pie')[0]); // $('.pie') 是jQuery对象；加 [0] 把它转为DOM对象
  let option = {
    // 标题
    title: {
      text: '籍贯 Hometown',
      textStyle: {
        color: '#6d767e'
      }
    },
    // 鼠标移入的提示
    tooltip: {
      // {a} 是 series[0].name ，系列名称
      // {b} 是 series[0].data.name ，每一项的名称
      // {c} 是 数值
      // {d} 是 百分比
      formatter: '{a} <br /> {b} <strong>{c}</strong>人 占比{d}%'
    },
    // 系列数据
    series: [
      {
        name: '各地人员分布', // 和提示有关系
        type: 'pie', // 表示这是饼图（line表示折线图、bar表示柱状图）
        radius: ['10%', '60%'], // 半径，一个表示饼图的内圈半径；一个表示外圈半径
        center: ['50%', '50%'], // 圆心点坐标
        // roseType 怎样表示数据，可选值有 area 和 radius
        // area 使用半径的长短表示数据的大小；每个扇形的圆心角相同
        // radius 使用半径的长短表示数据的大小；每个扇形的圆心角表示百分比
        roseType: 'area',
        // itemStyle 每一项的样式
        itemStyle: {
          borderRadius: 4
        },
        data: [
          { value: 40, name: '河北省' },
          { value: 20, name: '山东省' },
          { value: 32, name: '河南省' },
          { value: 30, name: '山西省' },
          { value: 28, name: '内蒙古' },
          { value: 26, name: '辽宁省' },
          { value: 22, name: '吉林省' },
          { value: 18, name: '黑龙江' }
        ]
      }
    ]
  };
  myChart.setOption(option);
}

pieChart();