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}
}
]
},
]
};
HTML饼状图中心添加文字,echarts饼状图环形中间动态文字相关推荐
- echarts饼状图环形中间动态文字
上代码 <template><div class="circle-wrapper"><div class="circle-title&quo ...
- echarts 环形图中间添加html,echarts配置一个中间显示文字的环形图
先贴一张效果图 1.导包 我没有用什么框架,直接引入echarts.min.js文件,代码如下: 注意这样引入不要放在header标签里,会阻塞html渲染,导致报错. 2.给echarts一个盒子 ...
- JS Echarts之雷达图 | 使用Excel画雷达图
文章目录 第一部分:JS Echarts之雷达图 1. 什么是 Echarts 2. JS Echarts之雷达图 2.1 使用Echarts画雷达图 2.3 echarts雷达图中常用修改 修改in ...
- R语言ggplot2可视化图中添加希腊字母实战
R语言ggplot2可视化图中添加希腊字母实战 目录 R语言ggplot2可视化图中添加希腊字母实战 #ggplot2可视化图中添加希腊字母1
- Matlab:向图中添加注释
Matlab:向图中添加注释 创建简单的图 圆圈注释 文本箭头注释 注释是添加到图中的额外信息,用来帮助标识一些重要信息.此示例首先解释不同类型的注释,然后说明如何向图中添加圆圈和文本箭头. #注释的 ...
- 1.Echarts饼状图详解及示例
前言说明:因工作需要用到图统计数据作为展示,用到echarts3(你也可以考虑用阿里的AntV:http://antv.alipay.com/zh-cn/index.html,或者国外的一些图形插件) ...
- vue+elementui+echarts饼状图内部显示百分比
<!--饼状图--><div id="main" style="width: 400px;height: 350px;"></di ...
- Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
- ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比 简单的实现可以参考: export default {data() {return {}},mounte ...
最新文章
- 过河 2005年NOIP全国联赛提高组(离散化+dp)
- Linux复习(六)
- Oracle最新的Java 8更新破坏了您的工具-它是如何发生的?
- 【渝粤教育】国家开放大学2018年秋季 0633-21T化工CAD 参考试题
- Android 编程下 ListView 和 CheckBox 混合使用时的常见问题
- 如何实现:GridView 控件中显示的文本不自动换行,隐藏超出宽度部分wj-wangjun
- java基于ssm人体健康体检信息管理系统-springboot
- 大数据可视化(一)数据可视化概述
- 学习日志之synthesis and optimization(7)——Heuristic optimization
- vs2008设置选中 高亮
- 红米、小米 开发者选项
- 抱薪者说 | 从零开始 ,社区年会诞生记
- 2020/5/4/ 每日一咕
- 设计模式之代理模式之静态代理
- Redis 之BIO与RIO
- 第十二章:synchronized与锁升级
- 沭阳学爬虫01HTTP基本原理
- 好诗好词PARKER SCP01-100-24-07苏轼
- 重装系统 linux u盘启动不了怎么办,用U盘启动盘重装系统启动时黑屏
- 使用Mitmproxy工具进行小姐姐图片(不管什么网站,只要是.jpg格式的图片都可自动下载)的批量下载
热门文章
- 08服务器许可证安装向导,08_安装部署GRID许可证服务器.pdf
- vs未能找到程序集platform.winmd_PP体育直播大连人VS恒大:新老8冠王首尾对决竟有十大看点...
- BugkuCTF-WEB题bp
- java 不支持fork,grails不能运行fork模式解决方法
- mysql jdbc 单利_java单利模式设计
- linux非阻塞等待线程,linux – 即使异步I / O操作挂起,只有线程处理io_service正在等待...
- python网络库_python的网络库
- Linux能适应不同的指令集,(转)linux常用指令集
- 腾达路由器dns服务器未响应,腾达路由器的设置方法
- Oracle中表连接的方式有哪些