基本饼图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#main {
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
<script>
const dom = document.getElementById('main')
const myChart = echarts.init(dom)
const option = {
series: {
type: 'pie',
data: [
{ name: 'html', value: 30 },
{ name: 'css', value: 20 },
{ name: 'js', value: 40 },
{ name: 'canvas', value: 50 },
]
}
}
myChart.setOption(option)
</script>
</html>
饼图的几个相关属性
roseType、radius、itemStyle
series: {
type: 'pie',
data: [
{ name: 'html', value: 30 },
{ name: 'css', value: 20 },
{ name: 'js', value: 40 },
{ name: 'canvas', value: 50 },
],
roseType: 'radius', // 玫瑰图
radius: ['40%', '80%'], // 半径 [起始半径,结束半径] 可生成环形
itemStyle: {
color: 'blue'
}
}
整个环形由于颜色相同会难以区分,这时候需要 visualMap 属性上场了
visualMap
// 视觉映射
visualMap: {
min: 0, // 最小值
max: 100, // 最大值
inRange: { // 定义在选中范围中的视觉元素
colorLightness: [0, 1] // 亮度
}
}