效果图:

代码:

问题:// 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. laravel7 jqAjax下拉框搜索

    html: 设置页面改变事件 <div id="show"> <div class="page-container" style=" ...

  2. sql server数据库如何存储数组,int[]float[]double[]数组存储到数据库方法

    原文地址:https://www.zhaimaojun.top/Note/5475296 将数组存储到数据库的方法 (本人平时同csharp编写代码,所以本文中代码都是csharp代码,有些地方jav ...

  3. tensorflow源码解析之common_runtime-graph_optimizer

    目录 核心概念 graph_optimizer function optimization_registry 1. 核心概念 本篇主要讲图的优化迭代器.我们在构建原始图的时候,专注于达到目的,但不会去 ...

  4. LGP6240题解

    题解 我们可以发现,背包有结合律. 也就是先加入元素 \(a\) 再加入元素 \(b\) 和 \(c\),与先加入元素 \(a\) 后再与只有元素 \(b\) 和元素 \(c\) 的背包合并,得到的背 ...

  5. ArcGIS热点分析

    许多论文中一般会有热点分析图,ArcGIS中提供了热点分析的功能. 先看下描述:给定一组加权要素,使用 Getis-Ord Gi* 统计识别具有统计显著性的热点和冷点. 其实非常简单,今天博主就跟大家 ...

  6. Oracle在存储过程中建表、建索引权限不足

    修改存储过程,在存储过程名称后面添加 Authid Current_User 后执行通过. CREATE OR REPLACE PROCEDURE p_test Authid Current_User ...

  7. 74cms v4.2.1-v4.2.129-后台getshell漏洞复现

    0x00 影响范围 v4.2.1-v4.2.129 0x01 环境搭建 1. 先去官网下载 骑士人才系统基础版(安装包) 2.将下载好的包进行安装 0x02 复现过程 当前版本v4.2.111 点加工 ...

  8. sql注入之简要注入

    #mysql简要注入流程 mysql注入简要流程如下图: 由于还没学习完先结合sqlilabs的第一关讲解信息收集的一部分和数据注入的information_schema的有据查询. #sqli-la ...

  9. EasyUI 之datagrid 使用 【DataGrid属性解释】

    可选的参数 DataGrid 属性 覆写了 $.fn.datagrid.defaults. 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls ...

  10. Prim算法求最小生成树

    首先在介绍这个算法之前我们要之明确一下什么是最小生成树的概念: 由 V 中的全部 n 个顶点和 E 中 n−1 条边构成的无向连通子图被称为 G 的一棵生成树,其中边的权值之和最小的生成树被称为无向图 ...