echarts 饼图默认高亮 离开后再次高亮,中心区显示选中的数据

36 篇文章 4 订阅
18 篇文章 0 订阅
const roundFun=()=>{
  let myChart = echarts.init(document.getElementById('round'));
  let option=({
    legend: {
      orient: 'vertical',
      left: 10,
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
      selectedMode: false,
      show: false
  },
  series: [
      {
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
              show: false,
              position: 'center',
              formatter:'{b}\n{c}',
              color:"black",
              lineHeight:30,
          },
          emphasis: {
              label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
              }
          },
          labelLine: {
              show: false
          },
          data: [
              {value: 335, name: '直接访问'},
              {value: 310, name: '邮件营销'},
              {value: 234, name: '联盟广告'},
              {value: 135, name: '视频广告'},
              {value: 1548, name: '搜索引擎'}
          ]
      }
  ]
 
  })
  myChart.setOption(option)
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: 0
}); //中心默认显示内容
myChart.on('mouseover', (v) => { //清空第一次选中
    if (v.dataIndex != 0) {
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: 0
        });
    }
});
myChart.on('mouseout', (v) => { //鼠标离开圆环默认选第一次
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
    });
});
}

 其中显示中心区数据 主要是使用 label 将postion:center,  formatter:'{b}\n{c}' ,最后效果

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值