Echarts制作饼图之环状图_echarts圆环饼图

详细配置参考官网配置文档： https://echarts.apache.org/zh/option.html#title

初始化Echarts实例

首先在HTML中定义一个容器div用来绘制图像，切记为容器设置适当的宽、高属性。

<div 
	style="width: 100%;height: 100%;"
	id="ec-sh">
</div>
1
2
3
4

在项目中引入ECharts JS文件

<script src="../c-ui/c-plugin/echarts/echarts.min.js"></script>
1

指定好容器的id，并且在js代码中获取到当前div，使用ECharts提供的初始化函数来初始化一个ECharts实例

const ecsh = echarts.init(document.getElementById
1

设置对应参数

首先定义options作为环状图的参数
基本参数有：
options.series:系列数据列表列表。每个系列通过 type 决定自己的图表类型
series为数组形式，可以存放多组数据，当前只讲单环形式，即series[0]的结构：
name：图像名称
type：图像类型
radius：饼图的半径
data：饼图数据数组

示例数据：

option = {
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

options扩展参数：
tooltip：提示框组件，鼠标放在图上的提示信息
示例：

tooltip: {
      trigger: 'item',
      formatter: '{b}: {d}%'
    },
1
2
3
4

legend：图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。
示例：

legend: {
      bottom: '10',
      left: 'center',
      itemGap: 20,
      orient: 'horizontal'
    },
1
2
3
4
5
6

color：对应区域图像的颜色
示例：

color: ['#E9745F', '#F9B600', '#819EE3'],
1

series扩展参数：
center：饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
示例：

center: ['50%', '35%'],
1

label：饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
示例：

label: {
        formatter: '{a|{b}:{d}%}',
        borderWidth: 1,
        borderRadius: 4,
        color: '#4F4F4F',
        fontFamily: 'PingFangSC-Regular',
        fontSize: '12px',
        rich: {
          a: {
            color: '#4F4F4F',
            lineHeight: 17,
            align: 'center'
          }
        }
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

最终实现

最后使用setOption函数绘制环状图

ecsh.setOption(optionsh);
1

最终效果如下

完整代码

完整代码如下：

<div class="pie-chart">
	<p class="pie-chart-title">发稿比例详情</p>
	<div class="pie-panel-body">
    	<div style="width: 100%;height: 100%;" id="ec-sh">
        </div>
    </div>
</div>
1
2
3
4
5
6
7

.pie-chart {
    display: inline-block;
    width: 433px;
    height:235px;
}
.pie-chart-title {
    min-width: 90px;
    height: 50px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #000000;
}
.pie-panel-body {
    width: 100%;
    height: 180px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  const ecsh = echarts.init(document.getElementById("ec-sh"));
  const optionsh = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {d}%'
    },
    legend: {
      bottom: '10',
      left: 'center',
      itemGap: 20,
      orient: 'horizontal'
    },
    color: ['#E9745F', '#F9B600', '#819EE3'],
    series: [{
      type: 'pie',
      name: '名称',
      radius: ['40%', '60%'],
      center: ['50%', '35%'],
      label: {
        formatter: '{a|{b}:{d}%}',
        borderWidth: 1,
        borderRadius: 4,
        color: '#4F4F4F',
        fontFamily: 'PingFangSC-Regular',
        fontSize: '12px',
        rich: {
          a: {
            color: '#4F4F4F',
            lineHeight: 17,
            align: 'center'
          }
        }
      },
      data: [
        {value: 45, name: '经验分享'},
        {value: 35, name: '新闻稿'},
        {value: 20, name: '培训'}
      ],
    }]
  };
  ecsh.clear();
  ecsh.setOption(optionsh);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43