• 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+"
    "+"用户数"
                      }
                  },
                  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});    
        });
  • 相关阅读:
    Oracle调优总结--(经典实践 重要)
    ORACLE索引介绍和使用
    ORACLE索引介绍和使用
    oracle update 改为 merge
    oracle update 改为 merge
    在 Eclipse 下利用 gradle 构建系统
    在 Eclipse 下利用 gradle 构建系统
    关于SQL查询效率,100w数据,查询只要1秒
    关于SQL查询效率,100w数据,查询只要1秒
    Add Binary
  • 原文地址:https://www.cnblogs.com/javascripter/p/11549666.html
Copyright © 2020-2023  润新知