Skip to content

Instantly share code, notes, and snippets.

@mebusw

mebusw/balance wheel.html

Last active September 7, 2020 05:22
Show Gist options
  • Save mebusw/3f30ebc91ddd6f53510bb5545b510304 to your computer and use it in GitHub Desktop.
Save mebusw/3f30ebc91ddd6f53510bb5545b510304 to your computer and use it in GitHub Desktop.
Download ZIP
echart.js to draw balance wheel. See also https://jsfiddle.net/y93u7v6L/
Raw
balance wheel.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 400px;height:400px; z-index:1000;"></div>
<div id="bg" style="width: 400px;height:400px; z-index:-1000; background-color:blue; position:absolute; top: 8px; left:148px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
title: {
text: '南丁格尔玫瑰图',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: {show: true},
saveAsImage: {show: true}
}
},
series: [
{
name: '面积模式',
type: 'pie',
radius: [10, 110],
center: ['75%', '50%'],
roseType: 'area',
data: [
{value: 10, name: 'rose1'},
{value: 5, name: 'rose2'},
{value: 8, name: 'rose3'},
{value: 7, name: 'rose4'},
{value: 8, name: 'rose5'},
{value: 5, name: 'rose6'},
{value: 6, name: 'rose7'},
{value: 9, name: 'rose8'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
var myBg = echarts.init(document.getElementById('bg'));
var optionbg = {
backgroundColor: '#2c343c',
itemStyle: {
// 设置扇形的颜色
color: '#ffffff',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
title: {
text: '同名数量统计',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: [],
selected: false
},
series: [
{
name: '姓名',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: [{value:12.5},{value:12.5},{value:12.5},{value:12.5},{value:12.5},{value:12.5},{value:12.5},{value:12.5}],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myBg.setOption(optionbg);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment