• 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});    
        });
  • 相关阅读:
    javascript wgs84与ecef与enu坐标转换
    istioctl 部署 istio
    redis学习之初体验redis
    zabbix server 4.0 lts 升级php7.4
    python实现csv格式文件转为asc格式文件的方法
    静默安装参数
    flask 根据数据库生成model
    pycharm中在虚拟环境中安装依赖包
    Jenkins的流水线(Pipeline)
    Jenkins集成Kubernetes集群
  • 原文地址:https://www.cnblogs.com/javascripter/p/11549666.html
Copyright © 2020-2023  润新知