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} 
{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>

转载于:https://www.cnblogs.com/520BigBear/p/11328376.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！