echarts实现饼图见渐变

在这里插入图片描述

数据中添加itemStyle,修改颜色为渐变色

option = {tooltip: {show:false,trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,label: {show: false,position: 'center',color: 'red'},emphasis: {label: {show: true,fontSize: 40,fontWeight: 'bold',formatter(data){return '111'},color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'blue'}, {offset: 1,color: 'red'}])}},labelLine: {show: false},data: [{ value: 1048, name: 'Search Engine',itemStyle: {color: new echarts.graphic.LinearGradient( 0, 1, 1, 1,[{offset: 0, color: 'rgba(23, 75, 224, 0.5)'},{offset: 1, color: 'rgba(23, 75, 224, 1)'}, ])},},{ value: 735, name: 'Direct',itemStyle: {color: new echarts.graphic.LinearGradient( 0, 1, 1, 1,[{offset: 0, color: 'rgba(0, 215, 223, 0.5)'},{offset: 1, color: 'rgba(0, 215, 223, 1)'}, ])}, },{ value: 580, name: 'Email',itemStyle: {color: new echarts.graphic.LinearGradient( 0, 1, 1, 1,[{offset: 0, color: 'rgba(36, 182, 255, 0.5)'},{offset: 1, color: 'rgba(36, 182, 255, 1)'}, ])}, },{ value: 484, name: 'Union Ads',itemStyle: {color: new echarts.graphic.LinearGradient( 0, 1, 1, 1,[{offset: 0, color: 'rgba(221, 175, 96, 0.5)'},{offset: 1, color: 'rgba(221, 175, 96, 1)'}, ])}, },{ value: 300, name: 'Video Ads',itemStyle: {color: new echarts.graphic.LinearGradient( 0, 1, 1, 1,[{offset: 0, color: 'rgba(18, 191, 111, 0.5)'},{offset: 1, color: 'rgba(18, 191, 111, 1)'}, ])}, }]}]
};

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【任推邦新悟空网盘拉新】八款地推网推新项目,周期稳定,受众广!

现在地推网推新项目打得火热,尤其是夸克网盘,地推网推新流程其实很简单,简单来说就是就是给项目增加新用户,每邀请一个新用户注册,你就能得到收益,下面小推给大家整理了一份好推的项目,希望能够…

如何用Java后端处理JS.XHR请求

Touching searching engine destroies dream to utilize php in tomcat vector.The brave isn’t knocked down,turn its path to java back-end. Java Servlet Bible schematic of interaction between JS front-end and Java back-end Question 如何利用Java…

若依 ruoyi-vue 接口挂载获取Resources静态资源文件权限校验

解决小程序图片打包过大,放置后端,不引用ngnix、minio等组件,还能进行权限校验 package com.huida.web.controller.common.app;import com.huida.common.core.controller.BaseController; import com.huida.common.utils.file.FileUtils; imp…

css 实现排行榜向上滚动

使用动画实现无线向上滚动 复制一层dom&#xff0c;使用动画向上滚动&#xff0c;鼠标hover的时候暂停动画 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthd…

vue $set()使用复习总结

一维数据&#xff1a; this.$set(数组, 下标, 内容); this.$set(this.typeList, 1, 榴莲); 数组对象&#xff1a; this.$set( target要更改的数据源(可以是对象或者数组), key要更改的具体数据, value重新赋的值 ) 用法一&#xff1a; 循环外&#xff0c;单独使用 用法二 &…

2024年【低压电工】考试试卷及低压电工模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年低压电工考试试卷为正在备考低压电工操作证的学员准备的理论考试专题&#xff0c;每个月更新的低压电工模拟考试祝您顺利通过低压电工考试。 1、【单选题】Ⅱ类手持电动工具是带有()绝缘的设备。&#xff08; …

解决IDEA 控制台中文乱码

运行某个项目时IntelliJ IDEA 控制台中文乱码&#xff0c;但其他的项目是正常的。接口文档也显示乱码&#xff1a; 一、修改 IntelliJ IDEA 全局编码、项目编码、属性文件编码 上方导航栏“File→Settings…”进入配置页面&#xff0c;在“Editor”中下滑找到“File Encodings…

Vue3:用Pinia的storeToRefs结构赋值store数据

一、情景描述 我们学习了Pinia之后&#xff0c;知道&#xff0c;数据是配置在Pinia的state里面的。 那么&#xff0c;如果有多个字段需要取出来使用&#xff0c;并且不丢失数据的响应式&#xff0c;如何优雅的操作了&#xff1f; 这里就用到了Pinia的storeToRefs函数 二、案…

git入门教程

Git 1. Git历史 同生活中的许多伟大事件一样&#xff0c;Git 诞生于一个极富纷争大举创新的年代。Linux 内核开源项目有着为数众广的参与者。绝大多数的 Linux 内核维护工作都花在了提交补丁和保存归档的繁琐事务上&#xff08;1991&#xff0d;2002年间&#xff09;。到 2002…

证书生成和获取阿里云备案获取密钥流程

1.在java文件夹下 输入 cmd 打开命令行窗口 2. keytool -genkey -alias 证书名 -keyalg RSA -keysize 2048 -validity 36500 -keystore 证书名.keystore 输入这一行&#xff0c;把证书名三个字 改成 项目的名称&#xff08;例如&#xff1a;D23102802&#xff09; 3. 密码默认填…

传统海外仓的管理模式有什么缺点?使用位像素海外仓系统的海外仓有什么优势?

传统的海外仓管理模式主要需要大量的人工操作和相对简单的信息化手段进行仓库的日常运营。因此&#xff0c;传统海外仓的运作比较依赖仓库员工的手工记录、核对和处理各种仓储和物流信息。 然而&#xff0c;传统海外仓管理模式通常存在一些缺点&#xff1a; 效率低下 因为需…

蓝桥杯DFS自练三题-串变换,玩具蛇,分糖果

题目一:串变换 代码解析: #include <iostream> using namespace std; struct Option{int select;int x;int y; }; string S,T; int N,K;//N是串的长度&#xff0c;K是操作指令的大小 Option opt[10];//存储所有的指令 bool vis[10];//标记数组&#xff0c;重要&#xff…