echarts 环形图

已于 2024-05-16 09:52:02 修改
阅读量247 收藏
点赞数 3
分类专栏： 工作笔记 echarts 文章标签： echarts 前端 javascript
于 2024-05-16 09:46:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JunJiu0420/article/details/138946087
版权

运行结果：

代码

import {truncate, merge} from 'lodash';
import {getBasePieOptions, getTooltipFormatter} from "*/money/utils";

const colorArray = ['#1F8BFF', '#EDBE75', '#26E3F0', '#AF8FFF', '#61DDAA', '#FD996A', '#8367E0', '#1AAF87']

export function getTypeOptions(data) {
    const options = getBasePieOptions()
    // 提示框配置
    options.tooltip = merge(options.tooltip, {
        formatter: (params) => {
            const {color, name, value} = params
            return getTooltipFormatter(color, [name, value])
        }
    })

    // 图表配置
    options.legend = merge(options.legend, {
        top: 100,
        right: 16,
        height: 298,
        textStyle: {
            rich: {
                // 标题
                a: {
                    width: 100,
                    padding: [0, 6, 0, 0],
                },
                // 数量
                b: {
                    width: 50,
                    align: 'right',
                    fontSize: 16,
                    color: '#333',
                    padding: [0, 2, 0, 0],
                    verticalAlign: 'center'
                },
                // 份
                c: {
                    align: 'right',
                    fontSize: 12,
                    color: '#666',
                    verticalAlign: 'center'
                },
                // 百分比
                d: {
                    width: 45,
                    align: 'right',
                    padding: [0, 0, 0, 36],
                    fontSize: 16,
                    color: '#333',
                },
                // 百分比符号
                e: {
                    align: 'right',
                    fontSize: 12,
                }
            }
        },
        formatter: function (name) {
            let item = data.find(item => item.name === name)
            let truncatedName = truncate(name, 12) // 截断文本，保留字符
            return `{a|${truncatedName}}{b|${item.value}}{c|份}{d|${item.percent}}{e|%}`
        },
    })

    // 系列配置
    const seriesConfig = options.baseSeries
    delete options.baseSeries
    options.series = [merge(seriesConfig, {
        right: '50%',
        radius: ['50%', '65%'],
        emphasis: {
            label: {
                rich: {
                    // 标题
                    a: {
                        fontSize: 20,
                        fontWeight: 500,
                        lineHeight: 28,
                        padding: [0, 0, 25, 0]
                    },
                    // 数量
                    b: {
                        fontSize: 32,
                        fontWeight: 500,
                    },
                    // 单位
                    c: {
                        fontSize: 14,
                        color: '#999',
                        padding: [4, 0, 0, 0],
                    },
                },
                formatter: function (params) {
                    return `{a|${params.name}} \n {b|${params.value}} {c|份}`;
                },
            },
        },
        data: data.map((item, index) => {
            return {
                name: item.name,
                value: item.value,
                percent: item.percent,
                itemStyle: {
                    color: colorArray[index % colorArray.length] // 使用颜色数组中的索引值作为颜色
                }
            };
        })
    })]
    return options
}

export function getStatusOptions(data) {
    const options = getBasePieOptions()
    // 提示框配置
    options.tooltip = merge(options.tooltip, {
        formatter: (params) => {
            const {color, name, value} = params
            return getTooltipFormatter(color, [name, value])
        }
    })

    // 图表配置
    options.legend = merge(options.legend, {
        top: 65,
        right: 16,
        height: 298,
        textStyle: {
            rich: {
                // 标题
                a: {
                    width: 100,
                    padding: [0, 6, 0, 0],
                },
                // 数量
                b: {
                    width: 50,
                    align: 'right',
                    fontSize: 16,
                    color: '#333',
                    padding: [0, 2, 0, 0],
                    verticalAlign: 'center'
                },
                // 份
                c: {
                    align: 'right',
                    fontSize: 12,
                    color: '#666',
                    verticalAlign: 'center'
                },
                // 百分比
                d: {
                    width: 45,
                    align: 'right',
                    padding: [0, 0, 0, 36],
                    fontSize: 16,
                    color: '#333',
                },
                // 百分比符号
                e: {
                    align: 'right',
                    fontSize: 12,
                }
            }
        },
        formatter: function (name) {
            let item = data.find(item => item.name === name)
            let truncatedName = truncate(name, {length: 12}) // 截断文本，保留字符
            return `{a|${truncatedName}}{b|${item.value}}{c|份}{d|${item.percent}}{e|%}`
        },
    })

    // 系列配置
    const seriesConfig = options.baseSeries
    delete options.baseSeries
    options.series = [merge(seriesConfig, {
        right: '50%',
        radius: ['50%', '65%'],
        emphasis: {
            label: {
                rich: {
                    // 标题
                    a: {
                        fontSize: 20,
                        fontWeight: 500,
                        lineHeight: 28,
                        padding: [0, 0, 25, 0]
                    },
                    // 数量
                    b: {
                        fontSize: 32,
                        fontWeight: 500,
                    },
                    // 单位
                    c: {
                        fontSize: 14,
                        color: '#999',
                        padding: [4, 0, 0, 0],
                    },
                },
                formatter: function (params) {
                    return `{a|${params.name}} \n {b|${params.value}} {c|份}`;
                },
            },
        },
        data: data.map((item, index) => {
            return {
                name: item.name,
                value: item.value,
                percent: item.percent,
                itemStyle: {
                    color: colorArray[index % colorArray.length] // 使用颜色数组中的索引值作为颜色
                }
            };
        })
    })]
    return options
}

export function getTooltipFormatter(color, tips) {
    return `
                <div style="display: flex;align-items: center;justify-content: flex-start;background-color: rgba(255, 255, 255, 0.9); padding: 8px; border-radius: 4px;">
                    <span style="display: inline-block; margin-right: 5px; width: 10px; height: 10px; border-radius: 50%;background-color: ${color}';"></span>
                    <span style="font-family: Source Han Sans CN;color: #666666;text-align: left;margin-right:10px;letter-spacing: 0px;line-height: 20px;font-size: 12px;font-weight: normal;">
                        ${tips[0]}
                    </span>
                    <span style="margin-left: auto; font-family: Source Han Sans CN;color: #333333;letter-spacing: 0px;line-height: 20px;font-size: 12px;font-weight: normal;">
                        ${tips[1]}
                    </span>
                </div>
            `
}


// 获取饼图配置
export function getBasePieOptions() {
    return {
        tooltip: {
            trigger: 'item',
            extraCssText: 'border-radius: 6px;background: linear-gradient(314deg, rgba(253, 254, 255, 0.6) -6%, rgba(244, 247, 252, 0.6) 85%);backdrop-filter: blur(10px);box-shadow: 0px 10px 20px 0px rgba(167, 200, 255, 0.5),inset 0px -2px 12px 0px rgba(229, 237, 250, 0.5),inset 0px 2px 6px 0px rgba(229, 237, 250, 0.9);',
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            icon: 'circle',
            itemGap: 14,
            itemWidth: 12,
            itemHeight: 12,
            // selectedMode: false,
            textStyle: {
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                rich: {
                    a: {
                        fontSize: 12,
                        color: '#666',
                        lineHeight: 15,
                        fontWeight: 500,
                        verticalAlign: 'center'
                    },
                    b: {
                        fontSize: 12,
                        color: '#666',
                        fontWeight: 500,
                        lineHeight: 15,
                        verticalAlign: 'center'
                    },
                    c: {
                        fontSize: 12,
                        color: '#666',
                        fontWeight: 500,
                        lineHeight: 15,
                        verticalAlign: 'center'
                    },
                    d: {
                        fontSize: 12,
                        color: '#666',
                        fontWeight: 500,
                        lineHeight: 15,
                        verticalAlign: 'center'
                    },
                    e: {
                        fontSize: 12,
                        color: '#666',
                        fontWeight: 500,
                        lineHeight: 15,
                        verticalAlign: 'center'
                    }
                }
            },
        },
        baseSeries: {
            name: 'pie',
            type: 'pie',
            radius: ['35%', '50%'],
            legendHoverLink: false,
            label: {
                show: false,
                position: 'center',
            },
            emphasis: {
                label: {
                    show: true,
                    fontFamily: 'Source Han Sans CN',
                    rich: {
                        a: {
                            fontSize: 14,
                            color: '#333',
                            lineHeight: 26,
                            fontWeight: 400,
                            verticalAlign: 'center'
                        },
                        b: {
                            fontSize: 14,
                            color: '#333',
                            lineHeight: 26,
                            fontWeight: 400,
                            verticalAlign: 'center'
                        },
                        c: {
                            fontSize: 14,
                            color: '#333',
                            lineHeight: 26,
                            fontWeight: 400,
                            verticalAlign: 'center'
                        },
                        d: {
                            fontSize: 14,
                            color: '#333',
                            lineHeight: 26,
                            fontWeight: 400,
                            verticalAlign: 'center'
                        },
                        e: {
                            fontSize: 14,
                            color: '#333',
                            lineHeight: 26,
                            fontWeight: 400,
                            verticalAlign: 'center'
                        },
                    }
                }
            },
            labelLine: {
                show: true
            },
            avoidLabelOverlap: false,
        }
    }
}

// 增强饼图功能
export function emphasizePieFunction(chartInstance, data, {
    enableLoop,
    interval,
    immediate
}) {
    // 初始化索引
    chartInstance.currentIndex = 0;
    chartInstance.seriesIndex = 0;

    chartInstance.on('mouseover', (e) => {
        if (enableLoop) {
            // 鼠标悬浮于饼图时清除轮播，并展示悬浮块的信息
            clearInterval(chartInstance.timer)
            chartInstance.timer = null
        }
        chartInstance.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: chartInstance.currentIndex
        })
        if (e.dataIndex === chartInstance.currentIndex) {
            chartInstance.dispatchAction({
                type: 'highlight', // 启动高亮
                seriesIndex: 0,
                dataIndex: chartInstance.currentIndex
            })
        }
        chartInstance.currentIndex = e.dataIndex
    })
    chartInstance.on('mouseout', (e) => {
        clearInterval(chartInstance.timer)
        if (enableLoop) autoTime()
    })

    function autoTime() {
        chartInstance.dispatchAction({
            type: 'highlight', // 启动高亮
            seriesIndex: chartInstance.seriesIndex,
            dataIndex: chartInstance.currentIndex
        })
        chartInstance.timer = setInterval(() => {
            chartInstance.dispatchAction({
                type: 'downplay', // 关闭高亮
                seriesIndex: 0,
                dataIndex: chartInstance.currentIndex
            })
            chartInstance.currentIndex++
            if (chartInstance.currentIndex === data.length) {
                chartInstance.currentIndex = 0
            }
            chartInstance.dispatchAction({
                type: 'highlight', // 启动高亮
                seriesIndex: 0,
                dataIndex: chartInstance.currentIndex
            })
        }, interval)
    }

    if (immediate) autoTime();
}

JunJiu0420
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echart 3D环形图 动画效果
12-18
在这个“echart 3D环形图 动画效果”的主题中，我们将探讨如何使用ECharts来创建具有3D视觉冲击力和动态效果的环形图。 3D环形图是一种特殊的饼图变体，通过三维视角展示数据的比例关系，使数据更具有立体感和层次...
Echarts饼图4.0（3D环形图、包含透明效果）
06-09
Echarts饼图4.0（3D环形图、包含透明效果）
echarts 环形图占比_环形图_仪表盘
aibujin的博客
04-24 2865
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、vue echarts
echarts占比环形图
qq_40576178的博客
03-03 2577
option = { backgroundColor: 'green', tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, graphic: { elements: [ { type: 'text', .
echarts环形占比图 环形百分比
localhost
06-28 1784
原文链接: https://blog.csdn.net/qq_47246331/article/details/119598704。
vue+echarts项目八：库存情况（显示占比圆环图）
benlalagang的博客
09-29 2142
显示库存关系对比的圆环图表，步骤 创建并初始化图表-》请求数据=》处理数据 更新图表实例=》启停定时器 =》视图分辨率的响应 展示其实是 五个圆环系列 控制好中心点分布 圆环一部分用渐变 一部分用黑底色
echarts环形图显示百分比
qq_45101496的博客
10-17 1万+
echarts 环形图 var ring = echarts.init(document.getElementById('main1')); var labelTop = {开发 normal: { label: { show: true, position: 'ce...
echarts环形图 百分比图
weixin_45549435的博客
11-16 3813
var e=80 option={ grid: { top: 0, bottom: 0, left: 0, right: 0 }, title: [{ text: e +'%', x: '50%', y: '37%', textAlign: 'center', textStyle: { fontSize.
echarts 圆环图 中间显示数据 下边显示标题
01-07
echarts 圆环图 中间显示数据 下边显示标题 $(function(){ getqykpnzqdata(qykpnzqjn,qykpnzqqn,wmgdseletj); }) /** * 获得数据并显示echarts图 * idnamejn : 显示今年数据的idname * idnameqn : 显示去年数据...
vue中使用echarts制作圆环图的实例代码
12-29
vue使用echarts制作圆环图，代码如下所示： <div id=main></div> [removed] export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts:...
Excel饼图圆环图模板-百分比圆环图
11-24
Excel饼图圆环图模板-百分比圆环图
带进度的圆形进度条,可显示百分比
06-12
带进度的圆形进度条,可显示百分比。可以在统计控球率的时候使用
图片环形3d效果
08-30
在IT行业中，图片的视觉呈现方式多种多样，其中一种引人注目的效果是“图片环形3D效果”。这种效果通常用于网站设计、应用程序界面、数字艺术作品等，以增加用户体验的吸引力和互动性。本篇文章将深入探讨“图片环形...
echarts 圆环图 legend图例显示数值和百分比
syt5324165的博客
07-26 5718
Math.round()与toFixed（）有所不同。虽然都是四舍五入，但是前者只能取整数，返回的是数字，后者可自定义小数位数，返回的是字符串（string）类型。
ECharts圆环图(详细示例——满满的注释)
热门推荐
GRAY_KEY的博客
06-03 2万+
图表效果如下：具体代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;圆环图案例&lt;/title&gt; &lt;!-- 引入 ECharts 文件 --&gt; &lt;script src="js/
echarts图环形图带百分比
浩星
07-21 8474
前言： 整理一些echarts中比较有个性的 效果图： 实现代码： option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['直达', '营销广告', '搜索引擎', ...
echarts圆环数据占比
qq_32615575的博客
06-30 3740
//圆形echarts占比 makeUpEcharts(el, makeUp_val) { let color = ['#EAF1FF', '#73A0FA'];//圆环两色 let echartData = [{ value: 100 - makeUp_val }, { value: makeUp_val } ]; let formatNumber = fu.
Echarts环形图
weixin_52063946的博客
05-08 261
【代码】Echarts环形图。
echarts环形图
最新发布
09-14
Echarts环形图是一种常用的数据可视化图表类型，用于展示数据的占比关系。它通常由一个圆环和多个扇形组成，扇形的大小表示数据的比例。以下是创建Echarts环形图的步骤： 1. 首先，导入Echarts库并创建一个容器来放置图表。可以使用HTML中的div元素作为图表的容器。 2. 接下来，定义一个JavaScript变量来存储图表的配置选项。配置选项包括图表的类型、标题、图例、数据等。 3. 在配置选项中，设置图表的类型为环形图。可以使用"pie"或者"pie"的别名"饼图"来表示环形图。 4. 设置图表的标题和副标题，以便更好地描述图表的含义。 5. 添加图例，图例用于标识不同扇形的含义。可以根据数据的类别或者名称来设置图例。 6. 定义图表的数据。数据可以是一个数组，每个元素代表一个扇形。每个扇形包括名称和对应的数值。 7. 对于环形图，可以设置内外半径来调整环的大小。可以使用"radius"或者"innerRadius"和"outerRadius"来设置半径值。 8. 设置其他样式选项，如背景颜色、字体样式、边框样式等。 9. 最后，使用Echarts的API将容器和配置选项绑定在一起，并渲染出图表。 总结一下，创建Echarts环形图的步骤包括导入库、创建容器、定义配置选项、设置图表类型、标题、图例和数据、调整半径和样式，最后将容器和配置选项绑定并渲染图表。 了解更多关于Echarts环形图的详细信息，可以参考Echarts的官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值