Incubator-echarts: 饼图 默认显示一个 怎么设置

[believeZJP]

One-line summary [问题简述]

期望实现如图的效果，没有找到配置项

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]:
• Browser version [浏览器类型和版本]:
• OS Version [操作系统类型和版本]:

最新版

Expected behaviour [期望结果]

ECharts option [ECharts配置项]

option = {

}

Other comments [其他信息]

[mangoZT]

圆环图可以实现该效果

[mangoZT]

http://echarts.baidu.com/demo.html#pie-doughnut

[believeZJP]

怎样默认选中第一个呢，比如搜索引擎

[mangoZT]

你这个不是选中 只是颜色不一样罢了 设置一下就好了

[mangoZT]

不就是这样么

[believeZJP]

不是，我想让中间显示百分比和文字

[believeZJP]

默认上来就显示一种类型的百分比和文字

[mangoZT]

那只有一种还是会切换的

[mangoZT]

一种不变的话可以用title 多种切换的话你等等 我看看

[mangoZT]

属性控制用label:{normal:{ show:true}}加入第一个数据项配置里即可

[believeZJP]

我试了，这个有多个的话，会都显示出来，要想显示一个，其他的必须为空，而且鼠标放到每个上的时候，里面的内容切换的话会直接在直接访问的下面显示

[mangoZT]

恩 会重叠 我再看一下

[mangoZT]

myChart.setOption控制吧 属性我暂时没发现既可以默认显示又可以自由切换的
鼠标停留改变当前label:{normal:{ show:true}}
自动化可以问下@passing

[believeZJP]

鼠标停留改变当前的是用formatter吗，可是怎么清除之前的文字呢

[mangoZT]

这样写 自己加个判断 哪个数据来的 就在哪个数据后面加哪个label属性

[mangoZT]

OK的话记得给好评

[believeZJP]

实现是实现了，但是效果不太好啊，
http://believezjp.github.io/views/fe/testPieEcharts.html
还是建议增加一个属性配置吧， 这样写感觉不太好~~

[mangoZT]

坐下定位就好了， 属性配置也要百度官方慢慢来 毕竟场景那么多

[lewiscutey]

现在 有解决方法了吗？

[crifan]

这种图形，属于ECharts中的 嵌套环形图，官网有demo和示例代码的。

经过研究，我最后找到了如何设置，达到对应的效果了：
正常显示的效果：

鼠标移动上去的效果：

核心思想是：

1. 中间显示的文字，其实也是一个环，然后外部是另外一个环
2. 中间显示文字部分的效果，通过去设置normal（和／或emphasis）的formatter。

完整的（ReactJS中的）代码，如下：

  getProspectOption() {
    const option = {
      title: {
        text: '',
        textStyle: {
          color: 'red'
        }
      },
      tooltip: {
        trigger: 'item',
        //formatter: '{a} <br/>{b}: {c}<br/>百分比：{d}%'
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },

      series: [
        {
        name:'有望完成进度',
        type:'pie',
        selectedMode: 'single',
        radius: ['0%', '90%'],

        // labelLine :{show:true},

        label: {
          //正常显示（鼠标还没有移动上去）时的配置
          normal: {
            position: 'center', //让label显示在饼图中间
            //formatter: '{c} <br/>{b}', //此处测试结果<br/>不起作用
            formatter: '{c}\r\n{b}', //  \r\n是回车换行，才起效果
            //设置正常时候的label的字体大小，颜色等属性
            textStyle: {
              color: 'red',
              fontSize: 24
            }
          },
          //当鼠标移动上去时的配置
          emphasis:{
            position: 'center',
            formatter: '{c}\r\n{b}',
            textStyle: {
              color: 'blue',
              fontSize: 32
            }              
          }
        },
        itemStyle: {
          normal: {
            color: '#ECF0F5'             
          }
        },
        data:[
          {
            value: '17.79%',
            name:'已使用配额',
            // selected:true
            //当鼠标移动上去时，弹出的框显示内容的配置
            tooltip: {
              trigger: 'item',
              formatter: '{a}<br/>{b}: {c} ({d}%)' //此处<br/>是有效果的，可以换行
            },
          }
        ]
      },

//外层的环的配置，此处无关紧要，仅供参考
      {
        name:'客户来源',
        type:'pie',
        selectedMode: 'single',
        radius: ['90%', '100%'],

        label: {
          normal: {
            show: false
            // position: 'inner',
            // // formatter: '{a}/{b}/{c}/{d}%'
            // formatter: '{b} {c}'
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data:[
          // {value:113, name:'缺口', selected:true},
          {value:17, name:'缺口'},
          {value:83, name:'新增数'}
        ]
      }

      ]
    };

    return option;
  }

另，关于ECharts的饼图的更多的配置，详见官网文档：
ECharts 饼图属性设置

[lcoder]

请问为什么我设置某个具体的扇形selected: true 的时候，会重叠？

我的配置:

// "echarts": "^3.8.5",
list = list.map( ( { name , ratio , selected } ) => ( { name , value: Number( ratio ) , selected: false , hoverAnimation: false } ) ) ;
    let isCompleteRate = type === pieCompleteRate ,
        serieLabel = isCompleteRate ? [ '{a|已完成}',`{b|${total}}`] : [ '{a|工单总量}',`{b|${total}}`] ;
    let option = {
        tooltip: {
            show: false ,
        } ,
        legend: {
            show: !isCompleteRate ,
            bottom: 0 ,
            data: list.map( ({name})=>name ) ,
            selectedMode: false ,
            formatter: ( currentName ) => {
                let target = list.find( ( {name} )=>name===currentName ) ,
                    value ,
                    txt = currentName ;
                if ( target !== undefined ) {
                    value = target.value ;
                }
                if ( value !== undefined ) {
                    txt += ` ${value}%` ;
                }
                return txt ;
            } ,
            itemGap: 40 ,
        } ,
        color: isCompleteRate ? [ '#85E516' , '#90AAFF' ] : ( type === pieType ? [ '#6187FF', '#B586FF' ] : [ '#868DFF', '#FFC65D' ] ) ,
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                selectedMode: true ,
                label: {
                    normal: {
                        show: true ,
                        position: 'center' ,
                        formatter:  serieLabel.join('\n') ,
                        rich: {
                            a: {
                                color: '#666666',
                                fontSize: '12' ,
                                lineHeight: 30
                            },
                            b: {
                                color: '#333333',
                                fontSize: '42' ,
                                fontWeight: 'bold' ,
                            } ,
                        }
                    } ,
                    emphasis: {
                        show: false ,
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: list , // [ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'},]
            }
        ]
    } ;
    instance.setOption( option ) ;
    if ( isCompleteRate ) {
        instance.dispatchAction( {
            type: 'pieSelect',
            dataIndex: 0 ,
        } )
    }

直接在list 中的item设置seleclted：true也一样的效果。感觉绘制了两遍label

[YeDongaidiiqu]

这种情况怎么解决呢，会重叠