去掉Echarts饼状图的引导线

您所在的位置:网站首页 电磁炉viper22a电路图 去掉Echarts饼状图的引导线

去掉Echarts饼状图的引导线

2023-04-04 16:18| 来源: 网络整理| 查看: 265

五分钟上手之饼状 // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 myChart.setOption({ tooltip: { trigger: 'item', formatter: "{a} {b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'right', y: 'bottom', data: ['在线', '离线'] }, series: [{ name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, data: [ { value: 12, name: '在线', itemStyle: { color: '#005eff' } }, { value: 3, name: '离线', itemStyle: { color: '#ff9194' } }, ] }] });

当饼状图数据比较多的时候 这个引导线显得比较杂乱无章了 这个时候需要去掉Echarts饼状图的引导线

属性:

label: { normal: { show: false, }, }, labelLine: { normal: { show: false } },

这个时候,引导线就会隐藏起来了 统计图看上去就简洁了不少

五分钟上手之饼状 // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 myChart.setOption({ tooltip: { trigger: 'item', formatter: "{a} {b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'right', y: 'bottom', data: ['在线', '离线'] }, series: [{ name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, }, }, labelLine: { normal: { show: false } }, data: [{ value: 12, name: '在线', itemStyle: { color: '#005eff' } }, { value: 3, name: '离线', itemStyle: { color: '#ff9194' } }, ] }] });

再看一下实际项目上 只有当鼠标放上去的时候,Echarts饼状图的引导线才会出现



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3