去掉Echarts饼状图的引导线

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>五分钟上手之饼状</title><!-- 引入 echarts.js --><script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script><script src="http://code.jquery.com/jquery-1.8.0.min.js"></script></head><body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 300px;height:300px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据myChart.setOption({tooltip: {trigger: 'item',formatter: "{a} <br/>{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' } },]}]});</script></body>
</html>

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

属性：

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

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>五分钟上手之饼状</title><!-- 引入 echarts.js --><script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script><script src="http://code.jquery.com/jquery-1.8.0.min.js"></script></head><body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 300px;height:300px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据myChart.setOption({tooltip: {trigger: 'item',formatter: "{a} <br/>{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'}},]}]});</script></body>
</html>

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

查看全文

http://www.taodudu.cc/news/show-4837065.html

数据可视化（一）
累死累活干不过一个写PPT的
vue2升级vue3知识点
Echarts3.0入门基础与实战(学习笔记)
【swagger】Swagger注解介绍
Swagger注释路径不对
【SpringBoot】mybatis 自动生成swagger注解，及普通查询sql
什么是swagger以及swagger注解详解
Swagger注解传参
Swagger注解详解
golang swagger注解说明
Swagger 注解使用
【Hi Elsa,java is coming】Error:(57, 21) java: 不兼容的类型: java.lang.String无法转换为com.sun.org.apa
进销存ERP系统、销售单、采购单、退货单、库存管理、库存盘点、调拨、借入、借出、出库、入库、归还单、收款单、付款单、资金流水、销售报表、采购报表、库存报表、财务报表、商品库、电商erp、连锁erp
电商ERP系统——商品SKU与库存设计
Redis实现秒杀库存加减
Mysql数据库练习题之商品库
pytz 的所有函数
python 获取指定时区的时间——pytz
pytz实现时区的转换
Unable to import required dependencies: pytz: No module named ‘pytz‘ ,dateutil: No module named【已解决】
一些可以用于串口的一些通信协议
电脑收不到UDP广播
VISCA CAM_Zoom PosInq 0p 0q 0r 0s
云台控制协议总结（VISCA/PELCOD/PELCOP）
PELCO-D与PELCO-P协议介绍
Sony相机型号对比
MHD-20HDMI高清20倍视频会议摄像头
visca接口转RS-232C接口线序
Camera in ROS and VISCA

去掉Echarts饼状图的引导线相关推荐

Echarts饼状图视觉引导线设置
如何设置饼状图引导线位置我们在使用Echarts绘制饼状图时,经常需要确定引导线位置,官网给出的示例并未明确哪些属性决定了引导方式及位置,例如: 如下外部引导线方式: 有内部引导线方式如何设置这两 ...
echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
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 ...
echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
vue+elementui+echarts饼状图内部显示百分比
<div id="main" style="width: 400px;height: 350px;"></di ...
Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
vue+echarts饼状图中间计算总数
饼状图中间显示总数值,效果图如下: dom结构: <div class="chart1" ref="chart1" style="width: ...

去掉Echarts饼状图的引导线

相关文章：

去掉Echarts饼状图的引导线相关推荐

最新文章

热门文章