echarts中饼图的legend自定义icon图片(扇形为例)
效果图:


代码:
问题:// icon: "pin", // 这个字段控制形状 类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none满足不了我们的时候,就可以自定义图片
<div id="main" style="width: 268px;height:200px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart_one = echarts.init(document.getElementById('main_one'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: '160px',
y: '30px',
// data:['温度报警0(0%)','窃电报警0(0%)','打火报警0(0%)','三相报警0(0%)','短路报警0(0%)','漏电报警0(0%)'],
data:[
{value:335, name:'温度报警0(0%)',icon:'image://img/pin_1.jpg' },
{value:310, name:'窃电报警0(0%)',icon:'image://img/pin_2.jpg' },
{value:234, name:'打火报警0(0%)',icon:'image://img/pin_3.jpg' },
{value:135, name:'三相报警0(0%)',icon:'image://img/pin_4.jpg' },
{value:1548, name:'短路报警0(0%)',icon:'image://img/pin_5.jpg' },
{value:1548, name:'漏电报警0(0%)',icon:'image://img/pin_6.jpg' }
],
textStyle: {
color: '#fff',
fontSize: '10' // 图例文字颜色
},
icon:'image://img/1主页.png' ,
itemWidth: 16, // 图例图形宽度
itemHeight: 12, // 图例图形高度
// icon: "pin", // 这个字段控制形状 类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['35%', '70%'],
avoidLabelOverlap: false,
center : ['30%', '50%'],
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '9',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'温度报警0(0%)'},
{value:310, name:'窃电报警0(0%)'},
{value:234, name:'打火报警0(0%)'},
{value:135, name:'三相报警0(0%)'},
{value:1548, name:'短路报警0(0%)'},
{value:1548, name:'漏电报警0(0%)'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart_one.setOption(option);
</script>
echarts中饼图的legend自定义icon图片(扇形为例)的更多相关文章
- echarts中的option.legend.data has not been defined.
1.错误描述 2.错误原因 var map = function(mapData){ require( [ 'echarts', 'echarts/chart/map' ], function (ec ...
- echarts中饼图显示百分比
通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法: tooltip : { trigger: ' ...
- echarts中关于自定义legend图例文字
formatter有两种形式: - 模板 - 回调函数 模板 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' 回调函数 formatter: f ...
- ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)
导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
- 在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
- echarts 中 柱图 、折线图、柱图层叠
app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...
- Echarts中Option属性设置
目录 一.title--标题组件 二.legend--图例组件 三.tooltip--提示框组件 四.grid--可用于调整图例在整个容器中的占位 五.xAxis--x 轴 六.yAxis-y 轴 七 ...
- ECharts 中的事件和行为
在 ECharts 的图表中用户的操作将会触发相应的事件.开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等. 如下是一个绑定点击操作的示例. ...
- echart 饼图图例legend支持滑动
ps: 以下针对option操作 文章目录 图例过多加上滚动条图例形状图例自定义显示图例过多加上滚动条 legend:{ top:'50', bottom:'50', type:'scroll',} ...
随机推荐
- jarvisoj_level3
自己的第一篇博客 *其实很早就想写博客了但是自己安全学的比较晚而且也很菜,现在虽然还是比较菜但是也是有一些心得的 *第一个问题什么是ctf,根据某度来说:CTF(Capture The Flag)中文 ...
- C/C++ 大型工程工具链搭建
一.配置环境要求 C/C++ 编译器 此项有系统区别,如果是 Windows 平台,那么可以下载 VS2022 社区版,它自带 MSVC 编译器.如果嫌它太笨重,也可以直接下载 MSVC 再发行组件. ...
- 【一】TSP、VRP、VRP模型介绍
一. TSP问题数学模型 编辑 TSP,即Traveling Salesman Problem,也就是旅行商问题,又译为旅行推销员问题.货郎担问题,简称为TSP问题,是最基本的路线问题,该问题是在寻求 ...
- kkFileView部署到windows服务出现问题解决
1.部署之后执行出现api-ms-win-crt-runtime-l1-1-0.dll丢失的办法 微软官网下载vc_redist.x64.exe vc_redist.x86.exe 64位的操作系统需 ...
- 企业网络防范Serv-U的漏洞
很多企业都将自己的网站建立在互联网上,日常有专门的维护人员进行维护,很多时候对网站的更新当然不是直接在服务器上操作,而是将要更新的网页页面通过FTP工具上传到服务器上实现.因此必须要在服务器上搭建起一 ...
- MySQL二进制binlog日志说明以及利用binlog日志恢复数据
MySQL的binlog日志对于mysql数据库来说是十分重要的.在数据丢失的紧急情况下,我们往往会想到用binlog日志功能进行数据恢复(定时全量备份+binlog日志恢复增量数据部分). 一.关于 ...
- luffy项目中关于APIView的使用
views中 from rest_framework.views import APIView from django.shortcuts import HttpResponse from api.u ...
- 4月19日 python学习总结 套接字模块的使用
服务端: import socket phone=socket.socket(socket.AF_INET,socket.SOCK_STREAM) # 买电话 phone.bind(('127.0.0 ...
- linux的文件与目录的权限设置
@font-face { font-family: 宋体 } @font-face { font-family: "Cambria Math" } @font-face { fon ...
- Python datetime获取当前年月日时分秒
from datetime import datetime now_time = datetime.now() str_time = now_time.strftime("%Y-%m-%d ...