echarts 饼图引导线尾部画圆入坑

看网上的例子，改了下，得知只有用formatter才能画圆，然后通过padding改变位置，然后并没调整好，最后设置lineHeight调整好了，还有圆设置的背景颜色要和item一样，所以不能写死，要用for循环来设置data的label，按索引设置颜色

 const color = [{ colorStops:[{ color: '#9874FF', offset: 0 },{ color: '#6053F5', offset: 1 }],'global': false,'type': 'linear','x': 0,'x2': 0,'y': 0,'y2': 1},{ colorStops:[{ color: '#FFAE0A', offset: 0 },{ color: '#FCDF0C', offset: 1 }],'global': false,'type': 'linear','x': 0,'x2': 0,'y': 0,'y2': 1},{ colorStops:[{ color: '#FF5D18', offset: 0 },{ color: '#FFA11B', offset: 1 }],'global': false,'type': 'linear','x': 0,'x2': 0,'y': 0,'y2': 1},{ colorStops:[{ color: '#267CFE', offset: 0 },{ color: '#07DEFF', offset: 1 }],'global': false,'type': 'linear','x': 0,'x2': 0,'y': 0,'y2': 1},{ colorStops:[{ color: '#31FDDC', offset: 0 },{ color: '#3FEDFF', offset: 1 }],'global': false,'type': 'linear','x': 0,'x2': 0,'y': 0,'y2': 1}]const colorTwo = ['#9874FF', '#FFAE0A', '#FF5D18', '#267CFE', '#31FDDC']const setLabel = (data) => {const opts = []for (let i = 0; i < data.length; i++) {const item = {}item.name = data[i].nameitem.value = data[i].valueitem.label = {show: true,lineHeight: 10,formatter: ['{a|{b}}', // 引导线上面文字'{b|}','{p|{d}%}'// 引导线下面文字].join('\n'), // 用\n来换行rich: {a: {left: 20,padding: [-30, -90, -20, -90]},b: {height: 5,width: 5,// lineHeight: 5,padding: [0, -5],borderRadius: 5,backgroundColor: color[i]},p: {padding: [10, -85, 0, -85],color: colorTwo[i]}}}opts.push(item)}return opts}const option = {title: {text: '积分占比',left: 'center',top: '46%'},legend: {bottom: '5%',left: 'center',icon: 'rect'},color: color,series: [{type: 'pie',center: ['50%', '50%'],radius: ['40%', '60%'],hoverAnimation: false,avoidLabelOverlap: false,labelLine: {show: true,length: 15,length2: 110,maxSurfaceAngle: 80},data: setLabel(data)},{type: 'pie',center: ['50%', '50%'],radius: ['35%', '35%'],label: {show: false},data: [{value: 1000,itemStyle: {borderColor: '#7667FB',color: '#f5f6f7',borderWidth: '1',borderType: 'dashed'}},{value: 1000,itemStyle: {borderColor: '#7667FB',color: '#f5f6f7',borderWidth: '1',borderType: 'dashed'}}]}]}return option

echarts 饼图引导线尾部画圆入坑相关推荐

canvas画条形图微信小程序_小程序-引入 echart 图表画圆饼图
前言在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢示例效果完整示例效果-可以点击此处查看下载使用 ec-canvas 在github上下载echarts ...
python用渐变色画圆_利用python控制Autocad:pyautocad方式
发现pyautocad模块:可以用python控制autocad的包.今天把文档中的重点内容摘录出来,以后绘图.计算大工程量.或者识别施工图的时候时候也许可以用到. 一.连接cad pyautocad ...
画图板-- 中点算法画圆
为了能以任意点为圆心画圆,我们可以把圆心先设为视点(相当于于将其平移到坐标原点),然后通过中点法扫描转换后,再恢复原来的视点(相当于将圆心平移回原来的位置). 圆心位于原点的圆有四条对称轴x=0,y= ...
【转】【OPenGL】OPenGL 画图板-- 中点算法画圆
为了能以任意点为圆心画圆,我们可以把圆心先设为视点(相当于于将其平移到坐标原点),然后通过中点法扫描转换后,再恢复原来的视点(相当于将圆心平移回原来的位置). 圆心位于原点的圆有四条对称轴x=0,y= ...
php画圆锯齿,优雅的解决canvas画圆锯齿问题
canvas 解决canvas画圆锯齿问题之前做一各项目需要画一个饼图,于是使用HTML5的canvas元素画出来的.一看在移动端手机上测试都发现画图有一点锯齿明显问题, 1 效果如下代码如下 v ...
0基础学原画多久入行？看看你还差什么？
0基础学原画多久入行?看看你还差什么?许多人认为学习原画的必要因素不是零基础,滴水石穿,基础是历练出来的,学习的自制力也是很重要的,能不能在零基础的情况下学习原画,要看你有没有学习的决心. 学习原画的 ...
心理学角度教你如何左手画圆，右手画方
中国有句俗话叫"一心不可二用",但是,现实生活中却的的确确有"一心二用"的现象,举些最常见的例子,人可以在边走路的时候边聊天,也可以边听音乐边看书.更有甚者,美 ...
echarts 饼图基本配置
var option = {//饼图不需要配置x和y轴series: [{type: "pie",//指定图表类型为饼图data: pieData,// radius:" ...
echarts 饼图取消legend图例的点击事件，保留鼠标悬浮legend上显示tooltie提示信息的事件
echarts 饼图因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏,进行了数据的二次处理,所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件,会关 ...

echarts 饼图引导线尾部画圆入坑

echarts 饼图引导线尾部画圆入坑相关推荐

最新文章

热门文章