首页 > 其他分享 >echarts圆环图

echarts圆环图

时间:2024-09-06 15:51:50浏览次数:5  
标签:false name show color var option2 echarts 圆环

image
外环的渐变是内环的阴影

    var chartDom2 = document.getElementById('container-workcode2');
    var myChart2 = echarts.init(chartDom2);
    var option2;
    option2 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            top: '0%',
            left: 'center'
        },
        title: {
            text: '60%',
            subtext: "完成率",
            itemGap: 5,
            top: "40%",
            left: "center",
            zlevel: 3, //层级
            textStyle: {
                fontWeight: '700',
                color: '#0091FF',
                fontSize: '20'
            },
            subtextStyle: {
                color: "rgba(99,99,99,0.5)",
                fontSize: 14,
                top: "center"
            }
        },
        series: [
            {
                type: 'pie',
                zlevel: 2,
                radius: ['0', '50%'],
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0,0,0,.75)',
                        color: '#fff',
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                },
                hoverAnimation: false,
                data: [100],
            },
            {
                name: '完成率',
                type: 'pie',
                radius: ['50%', '60%'],
                avoidLabelOverlap: false,
                labelLine: {
                    show: false
                },
                data: [
                    { value: 60, name: '' },
                    { value: 40, name: '' }
                ],
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var colorList = ['#2A9F85', '#F7B500'];
                            return colorList[params.dataIndex];
                        }
                    }
                }
            }
        ]
    };
    option2 && myChart2.setOption(option2);

标签:false,name,show,color,var,option2,echarts,圆环
From: https://www.cnblogs.com/duixue/p/18400405

相关文章

  • 基于ECharts+JS+Flask 交互可视化呈现NBA近期比赛信息及球队排名及数据 | 源码分享
    目录文章|内容结语|源代码文章|内容和大家分享一个我在闲暇之余写的一个小项目。为了能够更加直观的了解近期的NBA比赛信息、球队排名以及数据,本项目采用了ECharts、JS、Flask等技术进行可视化呈现。通过这种方式,我们可以更直观的了解NBA比赛,为球迷提供更好的观赛体验......
  • vue3+vite+echarts集成中国地图
    前段时间我们的项目有使用到echarts集成中国地图的功能,实际上这个功能我进项目组的时候人家就已经完成了,我这边只是简单复刻了一遍,先看看效果图;上代码,走起<template><!--第一步:设置地图容器--><divid="map"style="width:100vw;height:100vh"></div></template>......
  • Excel制作“非闭合圆环图”稍难点
     ABC1区域增长率辅助列2北京18.39%81.61%3厦门20.89%79.11%4上海32.85%67.15%5山东44.53%55.47%6广州50.02%49.98%7黑龙江73.19%26.81%      (上述表格,是随便打出来的)      稍难点一:做出圆环 如上图,7个地区的圆环只能一个一个复制出来。首先在【插......
  • react中使用echarts关系图
     一,工作需求,展示几类数据关系,可缩放大小,可拖拽位置,在节点之间的连线上展示相关日期,每个节点展示本身信息,并且要求每个关系节点能点击。实现情况如图所示:二,实现过程中遇到的问题: 关系图完美呈现,但关系节点点击后,整个关系图会杂乱无章的浮动,导致不知道点击了哪个关系节点。 ......
  • 基于VUE2-dataV和echarts实现的可视化大屏,百分比适配PC端
    可视化平台中,数据分别通过仪表盘、环状图、柱形图、曲线图、滚动表格等多种形式展示数据变化。可视化平台大致分为左、中、右三部分,左侧由能耗总览、耗能占比、库存预警构成,中间由数据总览、销售计划完成率构成,右侧由销售统计、销售排名(TOP8)、生产统计构成。平台右上角动态......
  • Pyecharts可视化数据大屏分析文章
    Pyecharts可视化数据大屏分析文章引言随着大数据时代的到来,数据可视化成为企业决策、业务分析不可或缺的一部分。Pyecharts,作为一个基于Python的开源数据可视化库,以其丰富的图表类型和强大的功能,成为制作数据大屏的理想工具。本文将结合具体案例,分析如何使用Pyecharts实现数......
  • Echarts + 低代码 :可视化如何赋能企业的创新之路?
    前言数据驱动已经成为企业决策和业务优化的关键所在,在数字化时代,高效的数据分析与可视化呈现是实现智能决策的关键。利用低代码开发平台,企业可以快速构建满足业务需求的应用系统,实现对各类数据源的便捷接入。结合Echarts等可视化工具,复杂的数据信息能够以直观、富交互性的图表......
  • ECharts实现雷达图详解
    ECharts是一款由百度开源的数据可视化工具,它提供了丰富的图表类型,如折线图、柱状图、饼图、散点图、雷达图、地图、K线图、热力图、仪表盘等,以及丰富的交互功能。ECharts组件的核心功能实现原理主要包括以下几个方面:数据驱动:ECharts采用数据驱动的设计理念,图表的生成和更新......
  • Echarts:配置信息
    目录官网配置详情title(标题组件)legend(图例组件)tooltip(提示框组件)toolbox(内置工具栏)dataZoom(区域缩放)xAxis(X轴)yAxis(Y轴数据)series(图表数据)官网配置详情title(标题组件)标题组件,包含主标题和副标题。legend(图例组件)图例组件。图例组件展现......
  • WPF—LiveCharts图表
    LiveCharts图表LiveCharts是一个简单灵活、交互式以及功能强大的跨平台图表库,支持wpf、winform...应用程序。快速入门安装在应用程序中右键`引用`​,点击`管理NuGet程序包`​,选择`浏览`​,搜索`LiveChartsCore.SkiaSharpView.WPF`​,注意必须勾选`包括预发行版`​选项,否则搜索......