前言
饼图在实际开发中是经常使用的，但是数据过多时，会影响的显示，比如：
当然这个数据还不算特别多，还能看，但是数据要是更多呢
解决
这里借助图例的滚动来实现分页显示
demo代码
<template>
<div class="base-pie" id="pie"></div>
</template>
<script setup lang="ts">
//引入
import * as echarts from 'echarts'
import {
onMounted } from 'vue'
//初始化
let init = () => {
let dom = document.getElementById('pie')
if (dom) {
let chart = echarts.init(dom);
//显示6个
let pageSize = 8
//要想显示分页条，必须是legend的的实际高度，大于设置的高度
//实际高度的计算大体为 个数 * （图例间隔 + 图例图像的高度） + （分页图标的大小）
//注意padding属性会有影响，这里设置成5，小于图例间隔，小于等于图例间隔时（上下padding小于等于间隔），上下padding不会生效
let option = {
title: {
text: '一个饼图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'right',
padding: 5,
itemGap: 10, //图例间隔
itemHeight: 14, //图像图例高度，14是默认高度尽量不修改
itemWidth: 15, //图像图例宽度
pageIconSize: 15, //翻页按钮大小，15是默认大小，尽量不修改
height: pageSize * (10 + 14) + 15,
textStyle: {
fontSize: 12
},
type: 'scroll',
data: [
{
name: '贪生怕死' },
{
name: '五花八门' },
{
name: '天网恢恢' },
{
name: '鸟语花香' },
{
name: '目中无人' },
{
name: '水深火热' },
{
name: '美中不足' },
{
name: '一团和气' },
{
name: '落花流水' },
{
name: '自以为是' },
]
},
series: [
{
name: 'test',
type: 'pie',
radius: '50%',
data: [
{
value: 10, name: '贪生怕死' },
{
value: 20, name: '五花八门' },
{
value: 30, name: '天网恢恢' },
{
value: 40, name: '鸟语花香' },
{
value: 50, name: '目中无人' },
{
value: 60, name: '水深火热' },
{
value: 70, name: '美中不足' },
{
value: 80, name: '一团和气' },
{
value: 90, name: '落花流水' },
{
value: 100, name: '自以为是' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart.setOption(option)
//将所有图例设置为未选中状态
chart.dispatchAction({
type: 'legendInverseSelect'
})
let legendData = ['贪生怕死', '五花八门', '天网恢恢', '鸟语花香', '目中无人', '水深火热', '美中不足', '一团和气', '落花流水', '自以为是']
//选中前6个
for (let i = 0; i < pageSize; i++) {
chart.dispatchAction({
type: 'legendSelect',
// 图例名称
name: legendData[i]
})
}
//箭头点击分页事件
chart.on('legendscroll', (params: any) => {
//将所有图例设置为未选中状态
chart.dispatchAction({
type: 'legendInverseSelect'
})
//更新
for (let i = 0; i < pageSize; i++) {
chart.dispatchAction({
type: 'legendSelect',
// 图例名称
name: legendData[i + params.scrollDataIndex]
})
}
})
window.addEventListener('resize', function () {
chart.resize();
});
}
}
onMounted(() => {
init()
})
</script>
<style lang="scss" scoped>
.base-pie {
width: 800px;
height: 400px;
border: 1px solid gray;
}
</style>
效果图
注意点
分页：
legend 属性里面有个type: 'scroll', 设置后，图例会分页
要想显示分页条，必须是legend的的实际高度，大于设置的高度
legend数据：
图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name。如果 data 没有被指定，会自动从当前系列中获取。
这里有个问题需要注意：比如·饼图只显示5条数据，legend全部显示；正常情况下是不行的，legend是与饼图的数据对应的；官方给了我们解决方式 如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 name。
data: [
{
name: '贪生怕死' },
{
name: '五花八门' },
{
name: '天网恢恢' },
{
name: '鸟语花香' },
{
name: '目中无人' },
{
name: '水深火热' },
{
name: '美中不足' },
{
name: '一团和气' },
{
name: '落花流水' },
{
name: '自以为是' },
]
高度的计算
上面说了，只有当legend的的实际高度，大于设置的高度才会显示分页条。因为要设置每次显示几条数据，高度需要进行计算，计算方式大体上如下：
//个数：let pageSize = 8
// 图例间隔：itemGap: 10, //图例间隔
//图例图像的高度： itemHeight: 14, //图像图例高度，14是默认高度尽量不修改
//分页图标的大小：pageIconSize: 15, //翻页按钮大小，15是默认大小，尽量不修改
//实际高度的计算大体为 个数 * （图例间隔 + 图例图像的高度） + （分页图标的大小）
//注意padding属性会有影响，这里设置成5，小于图例间隔，小于等于图例间隔时（上下padding小于等于间隔），上下padding不会生效
height: pageSize * (10 + 14) + 15,
滚动事件
通过建涛滚动事件legendscroll，当点击分页按钮触发滚动事件时，我们通过dispatchAction来设置哪些图例是选中状态（未选中状态的图例，饼图上不会显示）
需要注意的属性或方法