echarts饼状图引导线加圆点

实现echarts饼状图引导线加圆点实现思路:

1.首先我们在series里设置三个饼状图，设置共有的数据来防止页面交互显示错位问题
设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会合并在一起

let data = [{value: 20, name: '测试1'},{value: 30,name: '测试2'},{value: 30, name: '测试3' },{value: 20, name: '测试4' },
];

2.第一个为饼状图的圆点显示，该数据为series里的第一个对象代码如下：

{type: 'pie',minAngle: 18,radius: ['65%', '70%'],center: ['50%', '45%'],data: [{value: 20, name: ''},{value: 30,name: ''},{value: 30, name: '' },{value: 20, name: '' },                                ],labelLine: { length: 0,length2: 0,minSurfaceAngle: 90},itemStyle: { opacity: 0  },label: {normal: {opacity:1,show: true,width:0,height:0,padding:2.5,borderRadius:2.5, backgroundColor:"auto",distanceToLabelLine :-2.5}}
}

注意：圆点显示的data里面name默认给空数据，能防止圆点显示错位问题

3.第二个为饼状图的引导线显示，代码如下：

{type: 'pie',minAngle: 18,radius: ['65%', '70%'],center: ['50%', '45%'],data:data,itemStyle: { opacity:0 },label: {alignTo: 'edge',margin: 0,formatter: '{value|{d}%}\n{name|{b} }',opacity:1,lineHeight: 20,rich: {value: {fontSize: 14,color: '#333',fontWeight:'bold',padding:[0,0,0,0],},name: {fontSize: 14,color: '#333',padding:[8,0,0,0],},},distanceToLabelLine: 0},labelLine: {length: 20,length2: 30,minSurfaceAngle: 90},labelLayout: function (params) {const isLeft = params.labelRect.x < myChart.getWidth() / 2;const points = params.labelLinePoints;points[2][0] = isLeft? params.labelRect.x : params.labelRect.x + params.labelRect.width;return {labelLinePoints: points};},
},

4.第三个为饼状图扇形区，代码如下：

{type: 'pie',minAngle: 18,radius: ['44%', '65%'],center: ['50%', '45%'],data: data,label: {show: false},
}

5.综上，我们的代码就编写成功了现在看看图表效果

6.现在，我们整理下代码，看看整体代码

let data = [{value: 20, name: '测试1'},{value: 30,name: '测试2'},{value: 30, name: '测试3' },{value: 20, name: '测试4' },
];
option = {series: [{type: 'pie',minAngle: 18,radius: ['65%', '70%'],center: ['50%', '45%'],data: [{value: 20, name: ''},{value: 30,name: ''},{value: 30, name: '' },{value: 20, name: '' },                                ],labelLine: { length: 0,length2: 0,minSurfaceAngle: 90},itemStyle: { opacity: 0  },label: {normal: {opacity:1,show: true,width:0,height:0,padding:2.5,borderRadius:2.5, backgroundColor:"auto",distanceToLabelLine :-2.5}}      },{type: 'pie',minAngle: 18,radius: ['65%', '70%'],center: ['50%', '45%'],data:data,itemStyle: { opacity:0 },label: {alignTo: 'edge',margin: 0,formatter: '{value|{d}%}\n{name|{b} }',opacity:1,lineHeight: 20,rich: {value: {fontSize: 14,color: '#333',fontWeight:'bold',padding:[0,0,0,0],},name: {fontSize: 14,color: '#333',padding:[8,0,0,0],},},distanceToLabelLine: 0},labelLine: {length: 20,length2: 30,minSurfaceAngle: 90},labelLayout: function (params) {const isLeft = params.labelRect.x < myChart.getWidth() / 2;const points = params.labelLinePoints;points[2][0] = isLeft? params.labelRect.x : params.labelRect.x + params.labelRect.width;return {labelLinePoints: points};},
},{type: 'pie',minAngle: 18,radius: ['44%', '65%'],center: ['50%', '45%'],data: data,label: {show: false},}]
};

echarts饼状图引导线加圆点相关推荐

Echarts饼状图视觉引导线设置
如何设置饼状图引导线位置我们在使用Echarts绘制饼状图时,经常需要确定引导线位置,官网给出的示例并未明确哪些属性决定了引导方式及位置,例如: 如下外部引导线方式: 有内部引导线方式如何设置这两 ...
去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
echarts饼状图的使用
echarts饼状图的使用地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echart ...
ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
Echarts饼状图数据动态获取
首先肯定是引入echarts的相关jar包,地址:https://www.echartsjs.com/zh/download.html 你可以引入在线定制生成的jar包,如下图所示: 然后接下来就自己 ...
echarts 饼状图 java_SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供 ...

echarts饼状图引导线加圆点

echarts饼状图引导线加圆点相关推荐

最新文章

热门文章