定制echarts3.0饼图

2023-10-03 16:20
文章标签 定制 echarts3.0

本文主要是介绍定制echarts3.0饼图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

/*** Customized Pie(定制饼图)* @param obj* @param data* @param params*/
function getCustomizedPie(obj,data,params){// 定制饼图默认参数var params_pie = {isTitle : true,titleLeft : "center",titleMaginTop : 20,isVisualMapShow :false,visualMapMin : 10,visualMapMax : 1000,isLegend : false,legendOrient : "horizontal",legendLeft : "center",legendTop : "bottom",isToolbox : false,toolboxOrient : "horizontal",toolboxLeft : "right",toolboxTop : "top",		radius : "55%",left : "50%",top : "50%",labelLineSmooth : 0.2,labelLineLength : 10,labelLineLength2 : 20,// 回调函数func : null};// 处理参数if (typeof params == "object") {if (params == null) {params = params_pie;} else {params = mix(params_pie, params, true);}} else {params = params_pie;}var num = "[" + data.data + "]";var legend = "[" + data.legend + "]";num = eval(num);legend = eval(legend);var option = {backgroundColor: '#2c343c',title: {show : params.isTitle,text : data.title,subtext : '',left: params.titleLeft,top: params.titleMaginTop,textStyle: {color: '#ccc'}},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},visualMap: {show: params.isVisualMapShow,min: params.visualMapMin,max: params.visualMapMax,inRange: {colorLightness: [0, 1]}},legend : {show : params.isLegend,orient : params.legendOrient,// vertical/horizontalleft : params.legendLeft,top : params.legendTop,data : legend},toolbox : {show : params.isToolbox,orient : params.toolboxOrient,left : params.toolboxLeft,top : params.toolboxTop,feature : {dataView : {readOnly : false},restore : {},saveAsImage : {}}},series : [{name:'访问来源',type:'pie',radius : params.radius,center: [params.left, params.top],data: num.sort(function (a, b) { return a.value - b.value}),roseType: 'angle',label: {normal: {textStyle: {color: 'rgba(255, 255, 255, 0.3)'}}},labelLine: {normal: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'},smooth: params.labelLineSmooth,length: params.labelLineLength,length2: params.labelLineLength2}},itemStyle: {normal: {color: '#c23531',shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200;}}]};var myChart = echarts.init(document.getElementById(obj));if(params.func){myChart.on('click', function(para) {// 下面写回调函数params.func(para.data.data_id);});}myChart.setOption(option);
}

这篇关于定制echarts3.0饼图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/612

相关文章

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面,macOS26采用了全新的玻璃质感视觉风格,应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日(6 月 13 日)发布博文,报道称在 macOS 26 Tahoe 中

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言

SpringBoot定制JSON响应数据的实现

《SpringBoot定制JSON响应数据的实现》本文主要介绍了SpringBoot定制JSON响应数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录前言一、如何使用@jsonView这个注解?二、应用场景三、实战案例注解方式编程方式总结 前言

PDFQFZ高效定制:印章位置、大小随心所欲

前言 在科技编织的快节奏时代,我们不仅追求速度,更追求质量,让每一分努力都转化为生活的甜蜜果实——正是在这样的背景下,一款名为PDFQFZ-PDF的实用软件应运而生,它以其独特的功能和高效的处理能力,在PDF文档处理领域脱颖而出。 它的开发,源自于对现代办公效率提升的迫切需求。在数字化办公日益普及的今天,PDF作为一种跨平台、不易被篡改的文档格式,被广泛应用于合同签署、报告提交、证书打印等各个

超越IP-Adapter!阿里提出UniPortrait,可通过文本定制生成高保真的单人或多人图像。

阿里提出UniPortrait,能根据用户提供的文本描述,快速生成既忠实于原图又能灵活调整的个性化人像,用户甚至可以通过简单的句子来描述多个不同的人物,而不需要一一指定每个人的位置。这种设计大大简化了用户的操作,提升了个性化生成的效率和效果。 UniPortrait以统一的方式定制单 ID 和多 ID 图像,提供高保真身份保存、广泛的面部可编辑性、自由格式的文本描述,并且无需预先确定的布局。

小白装修之全屋定制和软装

装修决策方法论:三点走下来 是则是 否则否 第一步:想清楚 哪些 是 真实需求 第二步: 了解这些需求是通过何种方式实现的 第三步:考虑 实现方式的缺点 是否能接受  全屋定制  方式:1.找全屋定制的商家  2.木工现场打柜子 组成:设计 + 板材 + 加工 + 配件 +安装 设计板块:明明有成品家具可以购买 为什么要做定制呢? 自主规划 选设计师 1.更符合我们房屋和物

TCP-BPF :通过BPF定制TCP行为

TCP-BPF :通过BPF定制TCP行为 作者介绍 jianmingfan@126.com 如何以通俗的方式讲解技术 前腾讯云专家工程师,长期专注于操作系统,网络,BPF技术发展。 TCP-BPF又名sockops,由facebook工程师开发。它的缘起是工程师考虑如何针对数据中心内部的网络特征,定制TCP参数,优化TCP的表现。例如可以灵活的修改TCP 缓冲区大小,SYN RTO, SYN

再谈协议--定制协议

目录 1 协议 2 自定义协议 3 常用的序列化和反序列化方法 1 协议 协议是一种约定,这是我们前面的理解。 在我们之前使用 socket 进行 udp或者tcp通信时,我们默认都是按照字符串或者说字节流的方式来发送和读取的,可是如果我们要传输一些结构化的数据,该怎么办呢? 就比如我们使用qq进行聊天,可能我们发送一条消息,实际上发送到网络中的不止这条消息本身,还有

JMeter:如何定制Http请求取样器

一般使用JMeter发送HTTP请求时都会用到HTTP Request取样器,这种取样器大多数时候能够满足压力测试的需要。 图1        但也有一些场景,可能需要更加强大的取样器,或者需要定制一些功能,这时就需要自己手动编写取样器。幸好JMeter为我们提供了这样的扩展点,也就是下面将要介绍的java Requset取样器。 图2       通过java Req

智慧社区管理系统平台:架构全新升级,Java商业版OEM开源定制开发

智慧社区综合管理平台,致力于打造以党建为引领,精细化治理 + 个性化服务于一体的智慧社区平台。 平台整体包含智慧社区综合管理云平台+数字孪生大屏可视化+APP+微信小程序,满足智慧街道、智慧社区标准化功能建设。数字孪生倾斜摄影,支持模型管理、模型发布、基于Cesium单体化分层分户工具化、网格划分、地名道路标注、漫游路径等功能化管理等。 1、大数据平台:洞察社区的智能之眼 智慧社区的大数