首页 > 其他分享 >简单的可视化图表——“饼图”

简单的可视化图表——“饼图”

时间:2022-11-21 17:46:43浏览次数:80  
标签:name show 样式 text value label 图表 可视化 简单

ECharts饼图

基础模板参考:https://echarts.apache.org/handbook/zh/get-started/

例图:

下附简单代码:

let option = {
    // 鼠标移入
    tooltip: {
        trigger: 'item'
    },
    // 顶部提示
    legend: {
        bottom: '5%',
        left: 'center'
    },
    // 标题
    title: {
        text: 'demo',
        left: '10',
        top: '10',
    },
    color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
    series: [
        {
            name: 'text',   //鼠标放上去
            type: 'pie',
            radius: ['50%', '60%'], //内圈大小,外圈大小
            avoidLabelOverlap: true, // 调整重叠
            // 饼样式
            itemStyle: {
                borderRadius: 15,
                borderColor: '#fff',
                borderWidth: 2
            },
            // 文本样式
            label: {
                show: false,
                position: 'center'
            },
            // 移入高亮样式
            emphasis: {
                // 文本
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            // 连接线
            labelLine: {
                show: false
            },
            // 数据
            data: [
                { value: 1048, name: 'demo1' },
                { value: 735, name: 'demo2' },
                { value: 580, name: 'demo3' },
                { value: 484, name: 'demo4' },
            ]
        }
    ]
};

标签:name,show,样式,text,value,label,图表,可视化,简单
From: https://www.cnblogs.com/Ayako/p/16912103.html

相关文章

  • DOM简单学习和事件简单学习
    DOM简单学习:DOM简单学习:为了满足案例要求功能∶控制html文档的内容代码:获取页面标签(元秦)对象Elementdocument.getElementById("id值"):通过元素的id获取元素对象......
  • 简单的可视化图表——“柱状图”
    ECharts柱状图基础模板参考:https://echarts.apache.org/handbook/zh/get-started/例图:下附简单代码:letoption={//1.鼠标移入tooltip:{......
  • 790. 多米诺和托米诺平铺 : 简单状态机 DP 运用题
    题目描述这是LeetCode上的​​790.多米诺和托米诺平铺​​,难度为中等。Tag:「状态机DP」有两种形状的瓷砖:一种是 ​​2x1​​​的多米诺形,另一种是形如 ​​"......
  • 区间简单操作
    求区间交和并给定一些区间,求出这些区间的交集和并集。交集一定连续。我们维护左端点和右端点,按照任意顺序扫描并维护即可。并集,先按照左端点排序,然后扫过去,维护最大......
  • 简单的可视化图表——“折线图”
    Examples折线图基础模板参考:https://echarts.apache.org/handbook/zh/get-started/例图:下附简单代码:varoption={//鼠标移入tooltip:{trigger......
  • log4net 的简单配置
    安装Nuget包▲这个没什么说的。log4net.config右键项目新建程序配置:log4net.config<?xmlversion="1.0"encoding="utf-8"?><configuration><configSections><!--......
  • log4net 的简单配置
    安装Nuget包▲这个没什么说的。log4net.config右键项目新建程序配置:log4net.config<?xmlversion="1.0"encoding="utf-8"?><configuration><configSections><!--......
  • echarts 图表设置默认选中
    一、数据图形import*asechartsfrom'echarts'constmyChart=echarts.init(document.querySelector('pie'))​​官方文档events​​​​官方文档action​​设置高亮m......
  • 简单端口映射、转发、重定向工具-Rinetd
    一、概述Rinetd是为在一个Unix和Linux操作系统中为重定向传输控制协议(TCP)连接的一个工具。将TCP连接从一个IP地址和端口重定向到另一个。它处理文件中/etc/rinetd.c......
  • 模拟简单的计算机程序
    packagebase.method;importjava.util.Scanner;publicclassDemo6{publicstaticStringequal;publicstaticdoublerest;publicstaticdouble......