echarts圆饼图设置默认选中项并在中间显示文字
效果:
代码:
var myChart = echarts.init(document.getElementById('quanshi-echarts-two'));
option = {
grid:{ //设置图表撑满整个画布
top:"12px",
left:"12px",
right:"16px",
bottom:"12px",
containLabel:true
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center',
formatter: function(data){ // 设置圆饼图中间文字排版
return data.value+"\n"+"用户数"
}
},
emphasis: {
show: true, //文字至于中间时,这里需为true
textStyle: { //设置文字样式
fontSize: '12',
color:"#333"
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'优秀',itemStyle:{color:"#3de16b"}},
{value:310, name:'良好',itemStyle:{color:"#27baff"}},
{value:234, name:'一般',itemStyle:{color:"#5865e5"}},
{value:135, name:'较差',itemStyle:{color:"#fea51a"}},
{value:1548, name:'糟糕',itemStyle:{color:"#ef5e31"}}
]
}
]
};
myChart.setOption(option);
//设置默认选中高亮部分
myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});
//当鼠标离开时,把当前项置为选中
myChart.on('mouseout',function(e){
index = e.dataIndex;
myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});
});
echarts圆饼图设置默认选中项并在中间显示文字的更多相关文章
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
- Dojo Tree设置默认选中项并且获得它
先上用来生成Tree的JSON数据 [ { "id": "Root", "name": "资源目录" }, ...
- HTML中的<select>标签如何设置默认选中的选项
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- Android RadioGroup中设置默认选中RadioButton 后,选中两个的问题 解决方法
项目中遇到多个RadioGroup中单选RadioButton ,设置了默认选中第一个 . 然后就 能选中两个RadioButton . . .. 我开始这样给设置默认选中一个的: for (int ...
- vue中select设置默认选中
vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...
- struts2设置<s:select>默认选中项的方法
struts2的select标签中,常用的有以下几个属性:(1)struts2中的select 标签中,必须设置的属性只有一个,即是list.(2)select标签的list中必须有值,不然会报错.如 ...
- echarts 设置默认选中,单选
默认选中 和 不选中 传送门
- html select 标签设置默认选中
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- [Asp.net]DropDownList改变默认选中项的两种方式
引言 其实是不想总结这方面的内容,发现太简单了,可是在这上面也栽了跟头.所以还是记录一下吧,算是提醒自己,不要太看不起太基础的东西,有这种心理,是会载大跟头的. 一个例子 这里模拟一下最常用的一个例子 ...
随机推荐
- NLP进阶之(七)膨胀卷积神经网络
NLP进阶之(七)膨胀卷积神经网络1. Dilated Convolutions 膨胀卷积神经网络1.2 动态理解1.2.2 转置卷积动画1.2.3 理解2. Dilated Convolutions ...
- iptables rc.firewall脚本代码
#!/bin/sh # # rc.firewall - Initial SIMPLE IP Firewall script for Linux 2.4.x and iptables # # Copyr ...
- Codeforces Round #340 (Div. 2) B. Chocolate
题意:一段01串 分割成段 每段只能有一个1 问一段串有多少种分割方式 思路:两个1之间有一个0就有两种分割方式,然后根据分步乘法原理来做. (不过这里有一组0 1 0这种数据的话就不好直接处理,所以 ...
- hibernate中因双向依赖而造成的json怪相--springmvc项目
简单说一下Jackson 如果想要详细了解一下Jackson,可以去其github上的项目主页查看其版本情况以及各项功能.除此以外,需要格外提一下Jackson的版本问题.Jackson目前主流版本有 ...
- [转]VsCode搭建Java开发环境(Spring Boot项目创建、运行、调试)
源码地址:https://github.com/YANGKANG01/Spring-Boot-Demo 安装扩展 安装如下两个主要扩展即可,这两个扩展已关联java项目开发主要使用的maven.spr ...
- Python--day39--进程池原理及效率测试
#为什么要有进程池的概念 #效率 #每次开启进程都要创建一个属于这个进程的内存空间 #寄存器 堆栈 文件 #进程过多 操作系统调度进程 # #进程池 #python中的 先创建一个属于进程的池子 #这 ...
- H3C 寻找邻居
- Java 5,6,7,8,9,10,11新特性吐血总结
作者:拔剑少年 简书地址:https://www.jianshu.com/u/dad4d9675892 博客地址:https://it18monkey.github.io 转载请注明出处 java5 ...
- H3C H3C设备DNS功能实现
- 初识Maven POM
POM Project Object Model项目对象模型定义了项目的基本信息,用于描述项目如何构建,申明项目依赖,等等. pom元素: <modelVersion>4.0.0</ ...