今天第一次用了echarts弄了个饼形

最新推荐文章于 2023-03-10 21:42:55 发布

原创最新推荐文章于 2023-03-10 21:42:55 发布 · 423 阅读

0 ·

CC 4.0 BY-SA版权

ECharts 专栏收录该内容

0 篇文章

订阅专栏

本文介绍使用ECharts创建饼图的过程，详细展示了如何设置饼图的各项参数，包括图例、标签显示方式及数据项等内容，并强调了数据项的一致性要求。

<div id="main" style="width:100%;height:550px;"></div>
<script src='__PUBLIC__/js/echarts.common.min.js'></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
/* tooltip: {
trigger: 'item',
//formatter: "{a} <br/>{b}: {c} ({d}%)"
},*/
legend: {
orient: 'vertical',
x: 'left',
data:[
'设备总数：{$apCount}',
'在线总数：{$userCount}',
'今日收入：{$todayMoney}',
'本月收入：{$monthMoney}',
'会员提现：{$withdraw}元',
'查看提现'
]
},
series : [
{
name: '所占比例',
type: 'pie', //类型为饼
radius: '90%', //图形大小
center: ['50%', '50%'], //居中
label: {
normal: {
position: 'inner' //数据字体围绕着饼里面
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:200, name:'设备总数：{$apCount}'},
{value:200, name:'在线总数：{$userCount}'},
{value:200, name:'查看提现'},
{value:200, name:'今日收入：{$todayMoney}'},
{value:200, name:'本月收入：{$monthMoney}'},
{value:200, name:'会员提现：{$withdraw}元'}
]
}
]
})
myChart.setOption(option);

</script>

发现两个data数据要一样，不然会被干掉