echarts 图表饼状图 实例

效果图:

代码: 

draw(data1, data2) {
        var option = {
            // backgroundColor: 'rgb(10,36,68)',
            color: [
                '#F19611 ',
                '#0095FE',
                '#162D86',
                '#0096FF',
                '#05F8FF',
                '#FFD985',
                '#FACDAA',
                '#F4A49E',
                '#EE7B91',
                '#E85285',
                '#BE408C',
                '#942D93',
                '#171E6D',
                '#1E3388',
                '#27539B',
                '#3073AE',
                '#3993C2',
                '#42B3D5',
                '#75C6D1',
                '#75C6D1',
                '#A9DACC',
                '#A9DACC',
                '#D2EDC8',
                '#E2F8DA',
            ],
            grid: {
                left: '2%',
                top: '10%',
                bottom: '1%',
                right: '1%',
                containLabel: true,
            },

            legend: {
                orient: 'vertical',
                top: 8,
                right: 0,
                height: 240,
                itemWidth: 6, //修改icon图形大小
                itemHeight: 6, //修改icon图形大小
                textStyle: {
                    fontSize: 10,
                    color: '#CACACA',
                },
                data: data1,
            },
            calculable: true,
            series: [
                {
                    type: 'pie',
                    radius: ['6%', '8%'],
                    center: ['35%', '55%'],
                    hoverAnimation: false,
                    labelLine: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: false,
                        },
                    },
                    data: [
                        {
                            name: '',
                            value: 0,
                            itemStyle: {
                                normal: {
                                    color: '#202F57 ',
                                },
                            },
                        },
                    ],
                },

                {
                    stack: 'a',
                    type: 'pie',
                    radius: ['12%', '60%'],
                    center: ['35%', '55%'],
                    roseType: 'area',
                    zlevel: 10,
                    label: {
                        normal: {
                            formatter: '{b}: {c}台',
                            borderWidth: 0,
                            borderRadius: 4,
                            padding: [0, -50],
                            height: 40,
                            fontSize: 10,
                            align: 'center',
                            rich: {
                                b: {
                                    fontSize: 10,
                                    lineHeight: 5,
                                    color: '#41B3DC',
                                },
                            },
                            color: '#fff',
                        },
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 10,
                            length2: 35,
                        },
                        emphasis: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                            // 设置扇形的阴影
                            shadowBlur: 10,
                            shadowColor: 'rgb(0,0,0,.5)',
                            shadowOffsetX: -5,
                            // shadowOffsetY: 5
                        },
                    },
                    data: data2,
                },
            ],
        };

        window.addEventListener('resize', () => {
            this.myChart.resize();
        });
        this.myChart.setOption(option);
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/65535.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JVM如何调优

一、JVM内存模型及垃圾收集算法 1.根据Java虚拟机规范,JVM将内存划分为: New(年轻代) Tenured(年老代) 永久代(Perm) 其中New和Tenured属于堆内存,堆内存会从JVM启动参…

day0808

1.单链表实现约瑟夫环 #include "joseph.h" LoopLink list_create(int m) {LoopLink L (LoopLink)malloc(sizeof(Node));if(NULLL){printf("内存创建失败\n");return 0;}LoopLink qL;for(int i1; i<m; i){LoopLink p (LoopLink)malloc(sizeof(Node));…

MyBatis-XML映射文件

XML映射文件 规范 XML映射文件的名称与Mapper接口名称一致&#xff08;EmpMapper对应EmpMpper.xml&#xff09;&#xff0c;并且将XML映射文件和Mapper接口放置在相同包下&#xff08;同包同名&#xff09; ​​​ 在maven项目结构中所有的配置文件都在resources目录之下&…

二级python和二级c哪个简单,二级c语言和二级python

大家好&#xff0c;小编为大家解答二级c语言和二级office一起报可以吗的问题。很多人还不知道计算机二级c语言和python哪个好考&#xff0c;现在让我们一起来看看吧&#xff01; 介绍Python有很多库和使用Qt编写的接口,这自然创建c调用Python的需求。一路摸索,充满艰辛的添加头…

docker compose一键部署lnmt环境

创建docker compose 目录 [rootlocalhost ~]# mkdir -p /compose_lnmt 编写nginx的dockerfile文件 创建目录 [rootlocalhost compose_lnmt]# mkdir -p nginx 编写nginx配置文件 [rootlocalhost nginx]# vim nginx.conf user root; #运行身份#nginx自动设置进程…

Learning Rich Features for Image Manipulation Detection阅读笔记

文章目录 Abstract3.3. 双线性池 Abstract 图像篡改检测与传统的语义目标检测&#xff08;semantic object detection&#xff09;不同&#xff0c;因为它更关注篡改伪影&#xff08;tampering artifacts&#xff09;而不是图像内容&#xff0c;这表明需要学习更丰富的特征。我…

flutter开发实战-实现css线性渐变转换flutter渐变LinearGradient功能

flutter开发实战-实现css线性渐变转换flutter渐变LinearGradient功能 在之前项目开发中&#xff0c;遇到更换样式&#xff0c;由于从服务器端获取的样式均为css属性值&#xff0c;需要将其转换成flutter类对应的属性值。这里只处理线性渐变linear-gradient 比如渐变 “linear-…

Unity 基础函数

Mathf&#xff1a; //1.π-PI print(Mathf.PI); //2.取绝对值-Abs print(Mathf.Abs(-10)); print(Mathf.Abs(-20)); print(Mathf.Abs(1)); //3.向上取整-Ce il To In t float f 1.3f; int i (int)f; …

什么是Milvus

原文出处&#xff1a;https://www.yii666.com/blog/393941.html 什么是Milvus Milvus 是一款云原生向量数据库&#xff0c;它具备高可用、高性能、易拓展的特点&#xff0c;用于海量向量数据的实时召回。 Milvus 基于 FAISS、Annoy、HNSW 等向量搜索库构建&#xff0c;核心是…

java+springboot+mysql校园通讯录管理系统

项目介绍&#xff1a; 使用javaspringbootmysql开发的校园通讯录管理系统&#xff0c;系统包含超级管理员、管理员、用户角色&#xff0c;功能如下&#xff1a; 超级管理员&#xff1a;管理员管理&#xff1b;部门管理&#xff1b;用户管理&#xff1b;留言管理&#xff1b;公…

抽象工厂模式-java实现

介绍 抽象工厂模式基于工厂方法模式引入了“产品族”的概念&#xff0c;即我们认为具体产品是固定的&#xff0c;具体产品存在等级之分&#xff0c;比如我们常说的手机&#xff0c;有“青春版”&#xff0c;“至尊版”&#xff0c;“至臻版”。一个产品有多个版本族。这时候&a…

ROS实现自定义信息以及使用

常见的消息包 消息包定义一般如下&#x1f447; &#xff08;1&#xff09;创建包和依赖项 &#xff08;2&#xff09;在新建的qq_msgs的包新建msgs的文件夹&#xff0c;在该文件夹里面新建Carry.msg类型的文件。 其实&#xff0c;Carry.msg就是你自己定义的消息类型&am…

vue3项目中引入dialog插件,支持最大最小化、还原、拖拽

效果图&#xff1a; 上图是layui-vue组件库中的layer插件&#xff0c;我的项目使用的是element-plus组件库&#xff0c;在用不上layui组件库的情况下&#xff0c;就单独引入layui/layer-vue这个弹层插件就可以了 npm地址&#xff1a;layui/layer-vue - npm layui-vue组件库地址…

数仓架构模型设计参考

1、数据技术架构 1.1、技术架构 1.2、数据分层 将数据仓库分为三层&#xff0c;自下而上为&#xff1a;数据引入层&#xff08;ODS&#xff0c;Operation Data Store&#xff09;、数据公共层&#xff08;CDM&#xff0c;Common Data Model&#xff09;和数据应用层&#xff…

组合模式(C++)

定义 将对象组合成树形结构以表示部分-整体’的层次结构。Composite使得用户对单个对象和组合对象的使用具有一致性(稳定)。 应用场景 在软件在某些情况下&#xff0c;客户代码过多地依赖于对象容器复杂的内部实现结构&#xff0c;对象容器内部实现结构(而非抽象接口)的变化…

设计模式(3)装饰模式

一、介绍&#xff1a; 1、应用场景&#xff1a;把所需的功能按正确的顺序串联起来进行控制。动态地给一个对象添加一些额外的职责&#xff0c;就增加功能来说&#xff0c;装饰模式比生成子类更加灵活。 当需要给一个现有类添加附加职责&#xff0c;而又不能采用生成子类的方法…

(树) 剑指 Offer 34. 二叉树中和为某一值的路径 ——【Leetcode每日一题】

❓ 剑指 Offer 34. 二叉树中和为某一值的路径 难度&#xff1a;中等 给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a…

数据库架构演变过程

&#x1f680; ShardingSphere &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&…

考研408 | 【计算机网络】概述

计算机网络体系结构 计算机网络概述&#xff1a;1.概念&#xff0c;组成&#xff0c;功能&#xff0c;分类2.标准化工作及相关组织3.性能指标体系结构&参考模型&#xff1a;1.分层结构2.协议&#xff0c;接口&#xff0c;服务3.ISO/OSI模型4.TCP/IP模型 目录 计算机网络体…

Postman 的简单使用

什么是Postman 在程序开发中用于调试网络程序或者跟踪网页请求。可以对网页进行简单的基本信息调试。Postman最早是作用chrome浏览器插件存在的&#xff0c;但是2018年初Chrome停止对Chrome应用程序的支持。所以现在Postman提供了独立的安装包&#xff0c;不再依赖于Chrome浏览…