echarts 饼图3d属性
时间: 2024-01-08 17:19:42 浏览: 89
echarts 3D饼图组件
以下是使用echarts绘制3D饼图的示例代码,其中包含了一些3D属性的设置:
```html
<template>
<div id="chart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-gl'
export default {
mounted() {
const chartDom = document.getElementById('chart')
const myChart = echarts.init(chartDom)
const option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
// 3D属性设置
itemStyle: {
opacity: 0.7,
borderWidth: 1,
borderColor: '#fff'
},
label: {
formatter: '{b}: {d}%'
},
labelLine: {
length: 10,
length2: 20
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200
}
}
]
}
myChart.setOption(option)
}
}
</script>
```
在上述代码中,我们使用了echarts的`pie`类型来绘制饼图,并设置了一些3D属性,例如`itemStyle`、`labelLine`、`animationType`等。其中,`itemStyle`用于设置每个扇形的样式,`labelLine`用于设置标签线的长度,`animationType`用于设置动画类型,`animationEasing`用于设置动画的缓动效果,`animationDelay`用于设置动画的延迟时间。
阅读全文