echarts를 사용하여 원형 차트를 생성 할 때 값 뒤에 단위 표시를 추가합니다.
echarts를 사용하여 원형 차트를 만듭니다. 값과 백분율을 보려면 해당 섹터로 마우스를 이동합니다. 값 뒤에 단위를 추가하는 방법. 예 : 작업 할당 : 15.498155 분 (34.23 %) 값과 이름 만 있습니다. series.data 배열에서 "분"단위를 추가하는 방법은 무엇입니까?
도구 설명에는 원하는대로 수동 포맷터 방법이 있습니다.
값과 단위를 보여주는 원형 차트
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="../node_modules/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '2019年入职首月验收',
x: 'center',
textStyle: {
"color": "#8ECBFF"
},
},
// 提示框设置
tooltip: {
// trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
trigger: 'item',
// showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
// hideDelay: 20, // 隐藏延迟，单位ms
// backgroundColor: 'rgba(255,0,0,0.7)', // 提示框背景颜色
textStyle: {
fontSize: '8px',
color: '#000' // 设置文本颜色 默认#FFF
},
// formatter设置提示框显示内容
// {a}指series.name {b}指series.data的name
// {c}指series.data的value {d}%指这一部分占总数的百分比
formatter: '{a} <br/>{b} : {c}个 ({d}%) '
},
legend: {
orient: 'vertical', // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
// top: 5,
x:'right', // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
y:105, // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）,另外
// 经多次尝试，发现top优先级高于y
itemWidth: 40, // 设置图例图形的宽
itemHeight: 40, // 设置图例图形的高
data: ['视频广告', '联盟广告', '邮件营销', '直接访问','搜索引擎'],
textStyle: {
//图例文字的样式
color: '#8ECBFF',
fontSize: 13
},
// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
// itemGap: 30,
backgroundColor: '#pink', // 设置整个图例区域背景颜色
},
series: [
{
name: '访问来源',
// 图型半径 默认radius: '50%', 设置饼状图大小为100%时，最大直径=整个图形的min(宽，高)
radius: '55%',
//radius: ['30%', '60%'], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
type: 'pie',
// pie有几种画图角度，有angle、area
roseType: 'angle',
center: ['50%', '50%'], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位
// 设置值域的标签
label: {
normal: {
position: 'outer', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b}
// {a}指series.name {b}指series.data的name
// {c}指series.data的value {d}%指这一部分占总数的百分比
formatter: '{b}:{c}'
}
},
// 设置值域的那指向线
labelLine: {
normal: {
show: true // show设置线是否显示，默认为true，可选值：true ¦ false
}
},
data: [
{
value: 235, name: '视频广告' },
{
value: 274, name: '联盟广告' },
{
value: 310, name: '邮件营销' },
{
value: 335, name: '直接访问' },
{
value: 400, name: '搜索引擎' }
]
}
]
});
</script>
</body>
</html>
효과 차트는 다음과 같습니다 :
단위 증가
series: [
{
name: flow_tile,
type: 'pie',
radius: '50%',
data: [{
value: 1, name: '新疆维吾尔自治区' },
{
value: 437, name: '湖北省' },
{
value: 494, name: '北京市' },
{
value: 29, name: '河北省' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
// 设置值域的标签
label: {
normal: {
position: 'outer', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b}
// {a}指series.name {b}指series.data的name
// {c}指series.data的value {d}%指这一部分占总数的百分比
formatter: '{b}:{c}' + '单'
}
},
}
]
그래프에는 제목, 범례, 파이 차트, 레이블, 레이블 라인, 프롬프트 상자 등 여러 부분이 있음을 알 수 있습니다. 각 부분의 간단한 설정은 코드에서 학습하고 확인할 수 있습니다. 여기서는 원형 차트를 다룹니다.
또한 원형 차트의 그림자를 간단히 설정할 수 있으며 코드는 다음과 같습니다.
myChart.setOption({
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
roseType: 'angle',
itemStyle: {
// 阴影的大小
shadowBlur: 1200,
// 阴影水平方向上的偏移
shadowOffsetX: 250,
// 阴影垂直方向上的偏移
shadowOffsetY: 5,
// 阴影颜色
shadowColor: 'rgba(25, 55, 186, 185)'
},
data: [
{
value: 235, name: '视频广告' },
{
value: 274, name: '联盟广告' },
{
value: 310, name: '邮件营销' },
{
value: 335, name: '直接访问' },
{
value: 400, name: '搜索引擎' }
]
}
]
});
렌더링은 다음과 같습니다.
