echarts pie饼图既显示内部又显示外部指示线

查了echarts 文档，并不能通过简单的配置来实现，原因如下：在单个serie的label中，只能设置一个label，位置可以选择在饼图内部inner，或者饼图外部outer，无法实现同时实现内部、外部显示，想到设置两个serie，让两个饼图完全重合即可，一个外标签显示文字说明，另一个显示内标签，实现百分比。

解决办法：
1、可以写两个图表让他们重合，一个内部显示，一个外部显示

<div style="width: 100%;height:100px;position: relative;background-color: #fff;"><div id="uplrfu" style="width: 100%;height:100px;box-sizing: border-box;position: absolute;top: 0;left: 0;"></div><div id="uplrfu2" style="width: 100%;height:100px;box-sizing: border-box;position: absolute;top: 0;left: 0;"></div></div>

2、series写两个对象

function piecharts() {var myChart = echarts.init(document.getElementById('uplrfu'), 'light');var option = {tooltip: {trigger: 'item'},legend: {show: false},color: ["#0B4CB0", "#027ACF"],series: [{type: 'pie',radius: '90%',label: {            //饼图图形上的文本标签show: true,position: 'outside', //标签的位置textStyle: {fontWeight: 300,fontSize: 14    //文字的字体大小},formatter: function (d) {console.log(d);return d.name+"\n"+d.value+"公里"}},data: [{ value: 484, name: '左幅' },{ value: 300, name: '右幅' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},{type: 'pie',radius: '90%',label: {            //饼图图形上的文本标签show: true,position: 'inside', //标签的位置textStyle: {fontWeight: 300,fontSize: 16    //文字的字体大小},formatter: function (d) {return Math.round(d.percent) + '%'}},data: [{ value: 484, name: '左幅' },{ value: 300, name: '右幅' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};myChart.setOption(option);
}

echarts pie饼图既显示内部又显示外部指示线相关推荐

Echarts pie 饼图类型后显示数据
Echarts pie 饼图类型后显示数据 sysPie:function(libtypelist){var that=this;libtypelist=that.indexData.libtypel ...
Echarts pie饼图的使用（入门级）
2023.1.6今天我学习了如何使用echarts pie饼图,效果如: 首先是给容器设置id,宽高然后是 var pieChart = echarts.init(document.getEleme ...
echarts pie饼图的使用（初级版包括设置百分比）
2022.12.07今天我学习了如何简单通过echarts做一个pie饼图. <template><div ref="Pie" style="width ...
人脸识别显示内部服务器显示错误,百度人脸识别——人脸搜索，出现222207错误（未找到匹配用户）怎么解决...
使用官方例子,注册人脸.对比人脸等都可以,但是到人脸搜索的时候一直显示222207错误,而我的指定库里面有很多张人脸(不存在没有人脸的情况),我使用的Http SDK文档-v3 C#语言,求问这是什么 ...
echarts 饼状图 label 既在内部显示数值（百分比），又显示外部指示线
需求项目开发中,产品经理绘制的原型图中,需要前端实现一个饼状图,且既在饼图内部中显示百分比,又显示外部指示线及数值,效果如下图所示: 查了下 Echarts 官网文档,需要配置 series ...
Echarts实现饼图+饼图中心文字显示
Echarts实现饼图+饼图中心文字显示描述效果源代码描述 Echarts实现饼图+中心文字显示. 在 title 内实现饼图中心文字展示. 效果源代码 let data = [{ name ...
echarts中饼图显示百分比
通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法: tooltip : { trigger: ...
解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
安装Linux显示内部错误,Ubuntu14.04安装XRDP远程连接及显示内部错误解决方案
之前ubuntu14.04装的xrdp不小心删掉了,重新安装的时候一直出问题,RDP远程连接显示"内部错误",搞了差不多一天终于搞定. 1.安装xRDP及vncserver sud ...

echarts pie饼图既显示内部又显示外部指示线

echarts pie饼图既显示内部又显示外部指示线相关推荐

最新文章

热门文章