效果图:

代码:

问题:// 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图片(扇形为例)的更多相关文章

  1. echarts中的option.legend.data has not been defined.

    1.错误描述 2.错误原因 var map = function(mapData){ require( [ 'echarts', 'echarts/chart/map' ], function (ec ...

  2. echarts中饼图显示百分比

    通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法:     tooltip : {         trigger: ' ...

  3. echarts中关于自定义legend图例文字

    formatter有两种形式: - 模板 - 回调函数 模板 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' 回调函数 formatter: f ...

  4. ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)

    导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...

  5. 在项目中增加自定义icon图标

    以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...

  6. echarts 中 柱图 、折线图、柱图层叠

    app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...

  7. Echarts中Option属性设置

    目录 一.title--标题组件 二.legend--图例组件 三.tooltip--提示框组件 四.grid--可用于调整图例在整个容器中的占位 五.xAxis--x 轴 六.yAxis-y 轴 七 ...

  8. ECharts 中的事件和行为

    在 ECharts 的图表中用户的操作将会触发相应的事件.开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等. 如下是一个绑定点击操作的示例. ...

  9. echart 饼图图例legend支持滑动

    ps: 以下针对option操作 文章目录 图例过多加上滚动条图例形状图例自定义显示图例过多加上滚动条 legend:{ top:'50', bottom:'50', type:'scroll',} ...

随机推荐

  1. Hystrix&Dashboard配置使用

    目录 Hystrix是什么 熔断 什么是熔断 熔断类型 打开 半开 关闭 使用方法 导包 添加启动注解 新增方法 测试 降级 什么是降级 使用方法 导包 修改yml,新增如下 启动类新增注解 @Ena ...

  2. JVM探究 面试题 JVM的位置 三种JVM:HotSpot 新生区 Young/ New 养老区 Old 永久区 Perm 堆内存调优GC的算法有哪些?标记清除法,标记压缩,复制算法,引用计数法

    JVM探究 面试题: 请你弹弹你对JVM的理解?Java8虚拟机和之前的变化更新? 什么是OOM?什么是栈溢出StackOverFlowError?怎么分析 JVM的常用调优参数有哪些? 内存快照如何 ...

  3. svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件

    基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...

  4. Java的jstack命令使用详解

    jstack命令简介 jstack(Java Virtual Machine Stack Trace)是JDK提供的一个可以生成Java虚拟机当前时刻的线程快照信息的命令行工具.线程快照一般被称为th ...

  5. OpenCV基础_二

    阈值和平滑处理 cv2.threshold()二值化函数 ret,thresh = cv2.threshold(src, thresh, maxval, type[, dst]) 参数 src:所要进 ...

  6. mysql优化参数 (汇总)

    1 如下为128G内存32线程处理器的mariadb配置参数优化: [client]#password= your_passwordport= 3306 socket= /tmp/mysql.sock ...

  7. java web中统一结果返回封装类JsonResult

    废话不多说,直接上代码,源代码是慕课网老师风间影月写的,我拿来直接用了. package com.yb.entity; import java.util.List; import com.faster ...

  8. 6月26日 Django 中间件

     前戏 我们在前面的课程中已经学会了给视图函数加装饰器来判断是用户是否登录,把没有登录的用户请求跳转到登录页面.我们通过给几个特定视图函数加装饰器实现了这个需求.但是以后添加的视图函数可能也需要加上装 ...

  9. 5月10日 python学习总结 单表查询 和 多表连接查询

    一. 单表查询  一 语法 select distinct 查询字段1,查询字段2,... from 表名 where 分组之前的过滤条件 group by 分组依据 having 分组之后的过滤条件 ...

  10. springboot通过maven下载依赖失败解决

    公司直接用不了内网遇到的好的坑.导入网上的springboot项目的启动入口一致有报错,如:Cannot resolve symbol 'SpringApplication' maven配置设置都做了 ...