console
const chart = echarts.init(document.querySelector('.chart'))
const option = {
color: ['#4e87f4', '#6397fd', '#f26682', '#fd806c', '#768af5', '#a5c2ed'],
legend: {
itemWidth: 12,
itemHeight: 12,
orient: 'vertical',
itemGap: 15,
textStyle: {
color: '#63779a',
},
left: '80%',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '凑数'],
},
series: [
{
hoverAnimation: false,
type: 'pie',
radius: ['30%', '60%'],
avoidLabelOverlap: false,
label: {
fontSize: 16,
lineHeight: 20,
position: 'center',
formatter: function (params) { // 默认显示第一个数据
return '{p|55595}' + '\n{s|停机总时间}'
},
rich: {
p: {
fontSize: 20,
color: '#014bc6'
},
s: {
color: '#666',
fontSize: 12,
}
}
},
labelLine: {
show: false
},
data: [
{ value: 335, name: '直接访问直接访问', },
{value: 310, name: '邮件营销', },
{value: 234, name: '联盟广告', },
{value: 135, name: '视频广告', },
{value: 1548, name: '搜索引擎', },
{value: 158, name: '凑数', },
]
}
]
}
chart.setOption(option)
chart.on('legendselectchanged', function(params) {
return false
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<script crossorigin="anonymous" integrity="sha384-DX1FVVXdGcNR016Jj6c5WuxYmyUvkb2/0ZMXKwbXaXs8j9tPs3e4RUjNg4tViEj4" src="https://lib.baomitu.com/echarts/4.7.0/echarts-en.common.js"></script>
</head>
<body>
<div class="chart"></div>
</body>
</html>
body {
background: #fff;
}
.chart {
width: 600px;
height: 600px;
}