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改变默认选中项的两种方式
引言 其实是不想总结这方面的内容,发现太简单了,可是在这上面也栽了跟头.所以还是记录一下吧,算是提醒自己,不要太看不起太基础的东西,有这种心理,是会载大跟头的. 一个例子 这里模拟一下最常用的一个例子 ...
随机推荐
- .net Framework 源代码 · ScrollViewer
本文是分析 .net Framework 源代码的系列,主要告诉大家微软做 ScrollViewer 的思路,分析很简单. 看完本文,可以学会如何写一个 ScrollViewer ,如何定义一个 IS ...
- 陈志生:德国信贷工厂风控模式对P2P的启发
上海合盘金融信息服务股份有限公司董事长陈志生 和讯银行消息 "2014中国金融论坛"于5月14-15日在北京召开,本次论坛主题为“全面深化金融体制改革与实体经济增长”.和讯网作为指 ...
- java 泛型的嵌套(map例子)
package july7; //泛型加Map的输出! import java.util.Iterator; import java.util.Map; import java.util.Map.En ...
- 分布式全局唯一ID
方案一.UUID UUID的方式能生成一串唯一随机32位长度数据,它是无序的一串数据,按照开放软件基金会(OSF)制定的标准计算,UUID的生成用到了以太网卡地址.纳秒级时间.芯片ID码和许多可能的数 ...
- 21个项目玩转深度学习:基于TensorFlow的实践详解01—MNIST机器学习入门
数据集 由Yann Le Cun建立,训练集55000,验证集5000,测试集10000,图片大小均为28*28 下载 # coding:utf-8 # 从tensorflow.examples.tu ...
- H3C通过端口ID决定端口角色
- JavaSE基础---多线程
进程:正在进行的程序.其实就是一个应用程序运行时的内存分配空间. 线程:进程中一个程序执行控制单元,一条执行路径.进程负责的事应用程序的空间的标识,线程负责的事应用程序的执行顺序. 进程和线程的关系: ...
- C++动态数组中的C6385, C6386警告
警告 C6385 从“m”中读取的数据无效: 可读大小为“col*sizeof(int)”个字节,但可能读取了“8”个字节. 警告 C6386 写入到“m”时缓冲区溢出: 可写大小为“col*size ...
- 2018-2-13-wpf-GifBitmapDecoder-解析-gif-格式
title author date CreateTime categories wpf GifBitmapDecoder 解析 gif 格式 lindexi 2018-2-13 17:23:3 +08 ...
- CentOS 7 修改root密码
1.开机,在启动菜单上选择CentOS Linux (3.10**.**.x86**) 7 (Core) 按下e,进入编辑模式2.将光标一直移动到 LANG=en_US.UTF-8 后面(如果找不到, ...