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改变默认选中项的两种方式
引言 其实是不想总结这方面的内容,发现太简单了,可是在这上面也栽了跟头.所以还是记录一下吧,算是提醒自己,不要太看不起太基础的东西,有这种心理,是会载大跟头的. 一个例子 这里模拟一下最常用的一个例子 ...
随机推荐
- 2012-2013 Northwestern European Regional Contest (NWERC 2012)
B - Beer Pressure \(dp(t, p_1, p_2, p_3, p_4)\)表示总人数为\(t\),\(p_i\)对应酒吧投票人数的概率. 使用滚动数组优化掉一维空间. 总的时间复杂 ...
- Centos下添加用户到用户组
将一个用户添加到用户组中,千万不能直接用: usermod -G groupA 这样做会使你离开其他用户组,仅仅做为 这个用户组 groupA 的成员. 应该用 加上 -a 选项: usermod - ...
- H5 存储数据sessionStorage
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS 个性化滚动条样式
页面中有许多内容过多时,为了不影响整体布局,总会有滚动效果代替.but,许多情况浏览器自带的滚动条样式与整体UI 界面不搭啊,怎么办,当然作为界面的化妆师CSS就出手啦~ 滚动条样式由多个伪类组成 下 ...
- CCPC2018 桂林 G "Greatest Common Divisor"(数学)
UPC备战省赛组队训练赛第十七场 with zyd,mxl G: Greatest Common Divisor 题目描述 There is an array of length n, contain ...
- js求1到任意数之间的所有质数
何为质数: 只能被1 和 自身 整除的数; 方法: 利用js中求模, 看是否有余数. ---> 3%2 = 1; 5%2 = 3......... 代码如下: function test (n) ...
- 2018-2-13-git-合并两个仓库
title author date CreateTime categories git 合并两个仓库 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23:3 ...
- 研发环境容器化实施过程(docker + docker-compose + jenkins)
目录 背景介绍 改造思路 容器构建 基础准备 中间件容器 外部依赖容器 业务应用容器 容器整合 自动构建容器 Maven相关 非Maven项目 总结 背景介绍 目前公司内部系统(代号GMS)研发团队, ...
- 解决IDEA下tomcat启动server乱码
亲测成功的方式: 配置TOMCAT时,在VM opthions 添加 -Dfile.encoding=UTF-8
- 基于 Apache APISIX 的下一代微服务架构
2019 年 12 月 14 日,又拍云联合 Apache APISIX 社区举办 API 网关与高性能服务最佳实践丨Open Talk 广州站活动,Apache APISIX PPMC 温铭做了题为 ...