HTML饼状图中心添加文字,echarts饼状图环形中间动态文字

let currName = "";

let myChart= echarts.getInstanceByDom(document.getElementById(‘chart-panel‘));//console.log(myChart);

myChart.on(‘mouseover‘, (params) =>{

currName=params.name;

console.log(params)

let op=myChart.getOption();

let _label={

normal:{

show:true,

position:‘center‘,

formatter: [

`{a|${params.name}}`,

`{b|${params.percent + "%"}}`

].join(‘\n‘),

rich: {

a: {

color:‘#fff‘,

fontSize:18,

lineHeight:30},

b: {

color:‘blue‘,

fontSize:20,

foneWeight:‘bold‘,

},

}

}

}if(params.seriesIndex === 1){

_label.normal.formatter= [‘zhiliang‘].join(‘\n‘)

}

op.series[0].label =_label;

myChart.setOption(op,true)

})

option={

tooltip: {

trigger:‘item‘,

formatter:‘{a}
{b}: {c} ({d}%)‘},

legend: {

orient:‘vertical‘,

right:10,

top:20,

bottom:20,

data: [‘直接访问‘, ‘邮件营销‘, ‘联盟广告‘, ‘视频广告‘, ‘搜索引擎‘]

},

color : [‘red‘, ‘orange‘, ‘yellow‘, ‘green‘, ‘blue‘, ‘indigo‘, ‘purple‘],

series: [

{

name:‘访问来源‘,

type:‘pie‘,

radius: [‘50%‘, ‘70%‘],

avoidLabelOverlap:false,

label: {

normal:{

show:true,

position:‘center‘,

formatter: [‘zhiliang‘].join(‘\n‘),

rich: {

a: {

color:‘#fff‘,

fontSize:18,

lineHeight:30},

b: {

color:‘yellow‘,

fontSize:20,

foneWeight:‘bold‘,

textShadowBlur:20,

textShadowColor:‘yellow‘},

}

}

},

labelLine: {

normal: {

show:false}

},

data: [

{value:335, name: ‘直接访问‘,color:"#cccccc"},

{value:310, name: ‘邮件营销‘},

{value:234, name: ‘联盟广告‘},

{value:135, name: ‘视频广告‘},

{value:1548, name: ‘搜索引擎‘}

]

},

{

name:‘边框1‘,

type:‘pie‘,

hoverAnimation:false,

radius:[‘75%‘, ‘75%‘],

labelLine:{

normal:{

show:false}

},

itemStyle:{

normal:{

borderWidth:1,

borderColor:"#ffffff",

opacity:0}

},

data: [

{

value:100,

tooltip:{

show:false}

}

]

},

]

};

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

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

相关文章

pos共识机制_OK区块链60讲 | 第17集:什么是PoS共识机制

什么是PoS共识机制https://www.zhihu.com/video/1196092110837805056《OK区块链60讲》是由OKEx&新浪科技联合出品的区块链科普动画视频,针对区块链零基础用户,通过系列文章、科普动画等形式,从概念、技术、应用等角度,…

html溢出左右滚动,html-选项卡溢出时水平滚动

我在容器中有一个基本表。 该表将包含约25列。 我正在尝试在表格溢出时添加水平滚动条,现在过得很艰难。现在正在发生的情况是,表格单元格通过自动调整单元格的高度并保持固定的表格宽度来容纳单元格的内容。对于我的方法为何无法解决此问题的建议&#…

大疆无人机android登录闪退,你的DJI APP闪退了吗?附官方解决方案

原标题:你的DJI APP闪退了吗?附官方解决方案今天,很多飞友反应,在使用大疆无人机过程中出现DJI APP闪退情况。随后在大疆社区官方给出了解决方案,如下:关于DJI GO 4 APP闪退解决方案目前关于DJI GO4 APP闪退…

ps导出gif颜色不对_PS基础知识(1)

视图平移命令:1,使用工具箱中的抓手工具或着(H)2按住空格键,上下左右移动视图。(常用方法)图像格式PSD:原始的图像文件,包含所有的 Photoshop 处理信息,如图层&#xff0…

html如何设置鼠标选中状态,怎么用CSS 设置 当鼠标移动到菜单时,该按钮变色,鼠标点击后,页面停留在鼠标滑过时的状态!!很急!...

用javascript就可以,基本代码在下面,你自己照着改吧htmlheadmeta http-equivContent-Type contenttext/html;charset gb2312 //headbodyscript typetext/javascriptfunction changeA(){document.getElementById(menuA).style.background#f00;document.g…

python中难的算法_Python算法很难吗?python神书《算法图解》PDF电子版分享给你

许多小伙伴后台私信说,python算法让自己很头疼,有没有可以让算法像小说一样有趣的书籍资料呢?看这里吧!小宋为大家找到了这本《算法图解》的PDF电子版!让你在学习python的路上变得轻松有趣!内 容 提 要本书…

音乐分享 html,支付宝朋友圈可以分享音乐嘛

打开手机,找到手机里面的支付宝应用点击进入在进入的支付宝界面里,选择底下的朋友点击进入在弹出的朋友界面选择生活圈选择生活圈下方的朋友动态进到朋友动态界面,点击右上角的照相机图标支付宝 怎么发朋友圈动态?进入支付宝页面中…

eplan单线原理图多线原理图_EPLAN-黑盒-2

3、黑盒的功能定义制作完成的黑盒仅仅图形化描述了一个变频器,它实现逻辑上的智能了吗?双击黑盒弹出属性标签,它的主标签还是现实黑盒,如图,图形和逻辑还没匹配。因此,必须为它重新定义功能。EPLAN的功能定…

html图片热点新窗口,HTML基础必看---表单,图片热点,网页划区和拼接详解

html表单里面的图片点击相应图片跳转到本页其他去在表格里面选了这个 鼠标点击一下跳转到相应区块 代码要怎么写,夜影驱动编程小编今天和大家分享大神需要在一张图片上设置多个能点击跳转的链接区域时,推荐使用网页的热点链接。 参考代码如下&#xff1a…

ios 点击出现另外一套tabbar_IOS 点击tabbaritem跳转到一个新界面,且隐藏tabbar

先自定义一个UITabbarController,用于Storyboard中再在MyTabbarController中实现protocolinterface MyTabbarController : UITabBarController end再实现代理里面的方法implementation MyTabbarController- (BOOL)tabBarController:(UITabBarController *)tabBarCon…

viewpage 去掉左右切换效果_ViewPager实现多页面切换以及动画效果

作者写的非常详细,在此赞一下。尤其画图示意计算。常看代码不知coder数字的含义,看此博文无此感。我只在此列出流程和需要注意的点。步骤1:导入android-support-v4.jar包两种方法(升级到adt17 后需要注意的问题)a, 新建libs文件夹…

获取html内标题,通过html敏捷包获取标题标签

我正在尝试使用htmlagility pack来获得结果的链接和结果我有这个代码using HtmlAgilityPack;using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.IO;using System.Linq;using System.Net;using …

html视频播放div,打造自己的html5视频播放器

推荐这篇文章遇新是直朋能到:前段时间重新少端原码动近基开创学画近基开创学画近基开学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器。所谓“打造自…

wpf 代码获取contextmenu_[C#] 转:在WPF里面获取右键弹出菜单(ContextMenu)的鼠标点击源(Owner)控件...

WPF的ContextMenu没有类似WinForm里面ContextMenu.SourceControl的概念,但是你可以通过ContextMenuService的GetPlacementTarget方法来获取类似的效果。很多时候,我们会希望在WPF的资源文件里面定义一个通用的右键弹出菜单,然后将这个菜单通过…

2021辽宁高考艺考成绩查询系统入口,2019年辽宁省艺考统考成绩查询官方入口

2019年辽宁省普通高等学校招生美术类、音乐舞蹈类专业统考成绩已经公布。考生可以通过以下方式查询美术类、音乐舞蹈类专业统考成绩:一、美术类专业统考合格分数线美术类本科专业统考合格分数线为185分,且3门科目中至少有2门各不低于60分;专科专业统考合…

python出现traceback什么意思_python-异常处理 traceback获取详细异常

直接来几个简单的栗子:try:100/0except Exception as err:print(err)输出结果:division by zero只知道是报了这个错,却不知道在哪个文件哪个函数哪一行报的错。使用 traceback 模块importtracebacktry:100/0exceptException as e:traceback.print_exc()输出结果:Tra…

2020辅警考试计算机知识题,2019年辅警考试公共基础知识题库:计算机知识习题(二)...

中公招警考试网为考生提供2019年辅警考试计算机基础知识题目及答案解析,帮助考生顺利备考辅警考试。辅警考试备考周期短、复习范围大,中公小编建议考生充分利用各个辅警考试题进行练习。1. 如果要查找Glossary.txt, Glossary.doc 和Glossy.doc 三个文件&…

用python程序编写二元多项式_Python多项式回归的实现方法

多项式回归是一种线性回归形式,其中自变量x和因变量y之间的关系被建模为n次多项式。多项式回归拟合x的值与y的相应条件均值之间的非线性关系,表示为E(y | x)为什么多项式回归:研究人员假设的某些关系是曲线的。显然,这种类型的案例…

微型计算机硬盘为什么要分区,为什么懂电脑的人,都说硬盘不需要分区?看完你就知道了...

你的电脑有多少个分区呢?当你拿到一台新电脑的时候,一般只能看到一个系统分区。这时候就会开始进行系统分区,将硬盘分为C、D、E等等盘符,用途也各不相同,系统盘,资料盘,娱乐盘等等。似乎所有人都…

字符串固定长度 易语言_易语言字符串操作源码

易语言字符串操作源码系统结构:字符串_取长度,字符串_取中间,字符串_取左边,字符串_取右边,字符串_替换,到宽字符,到多字节,取文本数据地址,取字节集数据地址,MultiByteToWideChar,WideCharToMultiByte,程序集1| || |------ _启动子程序| || |------ _临时子程序| || |程…