效果:

代码:

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('mouseover',function(e){
      myChart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex:0}); 
      if(e.dataIndex != index){            
        myChart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: index  });     
      }
      if(e.dataIndex == 0){
        myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex:e.dataIndex});
      }
    });
    //当鼠标离开时,把当前项置为选中
myChart.on('mouseout',function(e){
index = e.dataIndex;
myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});
});

echarts圆饼图设置默认选中项并在中间显示文字的更多相关文章

  1. Vue Echarts 饼图设置默认选中一个

    Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...

  2. Dojo Tree设置默认选中项并且获得它

    先上用来生成Tree的JSON数据 [    { "id": "Root", "name": "资源目录" },    ...

  3. HTML中的<select>标签如何设置默认选中的选项

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  4. Android RadioGroup中设置默认选中RadioButton 后,选中两个的问题 解决方法

    项目中遇到多个RadioGroup中单选RadioButton ,设置了默认选中第一个 . 然后就 能选中两个RadioButton . . .. 我开始这样给设置默认选中一个的: for (int ...

  5. vue中select设置默认选中

    vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...

  6. struts2设置<s:select>默认选中项的方法

    struts2的select标签中,常用的有以下几个属性:(1)struts2中的select 标签中,必须设置的属性只有一个,即是list.(2)select标签的list中必须有值,不然会报错.如 ...

  7. echarts 设置默认选中,单选

    默认选中 和 不选中 传送门

  8. html select 标签设置默认选中

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  9. [Asp.net]DropDownList改变默认选中项的两种方式

    引言 其实是不想总结这方面的内容,发现太简单了,可是在这上面也栽了跟头.所以还是记录一下吧,算是提醒自己,不要太看不起太基础的东西,有这种心理,是会载大跟头的. 一个例子 这里模拟一下最常用的一个例子 ...

随机推荐

  1. 原生js实现最简单的瀑布流布局

    文章地址 https://www.cnblogs.com/sandraryan/ 瀑布流:瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动, ...

  2. js实现div的碰壁反弹效果

    文章地址 https://www.cnblogs.com/sandraryan/ 需求: 写一个div,让div在父级进行匀速运动,碰到父级上下左右的边框,就向反方向运动. 碰壁反弹在游戏制作中很常用 ...

  3. 以P2P网贷为例互联网金融产品如何利用大数据做风控?

    以P2P网贷为例互联网金融产品如何利用大数据做风控?   销售环节 了解客户申请意愿和申请信息的真实性:适用于信贷员模式. 风控关键点 亲见申请人,亲见申请人证件,亲见申请人签字,亲见申请人单位. 审 ...

  4. SpringMVC 非注解配置

    web.xml配置: <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>o ...

  5. HeidiSQL工具导出导入MySQL数据

    有时候,为了数据方便导出导入SQL,我们可以借助一定的工具,方便我们队数据库的移植,可以达到事半功倍的效果.在这里,就给大家简单的介绍一款能方便导出或者导入MySQL的数据. ①首先,选择你要导出的数 ...

  6. H3C开启Ssh

    [H3C]ssh server enable                       //开启SSH服务 [H3C]user-interface vty 0 4 [H3C-ui-vty0-4]au ...

  7. redis scan count的含义/二进制安全问题

    redis是单线程的,keys查询键类似hbase的全表扫描(也可以理解为select *),大数据量时非常耗时,因此官方给出了scan,使用scan类似数据库分页,可以指定查询多少个元素,官网的说明 ...

  8. gradle 打包后第三方登录不上

    使用 gradlew clean assembleReleaseChannels 生成不用的渠道包后 第三方登录不上 原因:打包未设置好APP的 .keystore

  9. JMeter Webservice API测试计划

    Web Services Web服务被定义为旨在通过网络支持两台机器之间交互的软件系统.它被设计为具有以通常在Web服务描述语言(WSDL)中指定的机器可处理格式描述的接口. 通常,“HTTP”是最常 ...

  10. 赋值、关系、逻辑运算、if、switch case

    cout << boolalpha将打印输出0转为false,1转为true 逻辑运算符: &&(与)    且      两个条件为真时结果为真 ||(或) 或   两个 ...