echarts中 legend 自定义方法和单独定义每个图例的样式和宽高

单独定义echarts中每个图例的样式,自定义图例的点击方法

//用不同样式的图例用数组写对应图例的样式
                legend:[{
                    top: "15%",
                    right: "24%",
                    textStyle: {
                        color: "#3BAEFE",
                        fontSize: 14,
                        fontFamily: "微软雅黑"
                    },
                    itemWidth: 27,
                    itemHeight: 16,
                    data:[{
                        name: "农药",
                        icon: "circle"
                    },{
                        name: "LOL",
                        icon: "rect"
                    }]
                },{
                    top: "15%",
                    right: "15%",
                    textStyle: {
                        color: "#3BAEFE",
                        fontSize: 14,
                        fontFamily: "微软雅黑"
                    },
                    itemWidth: 33,
                    itemHeight: 16,
                    data:[{
                        name: "农药+LOL",
                        icon: "image:///soyking/static/image/echarts/merge.png"  //引用自定义的图片
                    }]
                },{
                    top: "15%",
                    right: "15%",
                    textStyle: {
                        color: "#3BAEFE",
                        fontSize: 14,
                        fontFamily: "微软雅黑"
                    },
                    data:["\n","\n","\n","农药占比","LOL占比"]
                }],

结果:

自定义图例的方法 (点击图例,显示图例的选中结果)

var bar = echarts.init(document.getElementById("barDiv"));

//自定义图例的方法
            bar.on("legendselectchanged",function(obj){
                //获取图例选择的结果
                var selected = obj.selected;
                for(var i in selected){
                    alert(selected[i]);
                }
            });

原文链接:https://blog.csdn.net/weixin_39172079/java/article/details/90413831

原文地址:https://www.cnblogs.com/tzwbk/p/12699595.html

时间: 2024-10-07 10:25:41

echarts中 legend 自定义方法和单独定义每个图例的样式和宽高的相关文章

Echarts中线状图的X轴坐标标签倾斜样式

在echarts中应用线状图时可以展现很多的数据,而当数据量过多的时候,X轴的坐标就会显示不全,因为整个图形的宽度是一定的,X轴的全长是一定的 http://www.cnblogs.com/phpgcs 比如下面的例子中 X轴是常用的日期格式 20140508 这样子 而经过简单的配置,可以达到一个理想的效果,如下 其中相关的需要配置的option参数为: ? 1 2 3 4 formatDate:function(datestring){     if(datestring.length!=8

android中加载的html获取的宽高不正确

wap页面使用 js库是zepto,按照惯例在$(function(){})中,来获取当前可视区的宽高,但得到的宽高却与预想的相差十万八千里. 原本android手机的浏览器设定的宽高基本是360*640,原生的浏览器打印没问题,uc没问题,qq没问题. 结果app出问题... ios的各浏览器app都没问题.就android有这种问题,而且是诡异,以为是app没有调宽高... 为了获取高度原来是为了设定轮播图的高度的. 经过调试发现,在图片加载完后再获取宽高就标准了. 所以android ap

JavaScript中的各种宽高属性

转自慕课网:http://www.imooc.com/article/14516 在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight.offsetHeight.scrollHeight.availHeight.scrollLeft.scrollTop.style.height.innerHeight.outerHeight.scree.height等等......这么多,傻傻分不清也正常啊.本文的目标: 理清js及jquery的各种width和height 对width和

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

1.错误描述 2.错误原因 var map = function(mapData){ require( [ 'echarts', 'echarts/chart/map' ], function (ec) { var mapChart = ec.init(document.getElementById('mapDataChart')); var option = { title : { text: '', x : 'center', y : 'top' }, tooltip : { trigger

Echarts中series循环添加数据

1.首先定义变量 2.根据后台查询出来的数据循环添加到变量中 var series = []; for (var i = 0, size = data.dataList.length; i < size; i++) { legendData.push(data.dataList[i].sjjc); series.push({ name: data.dataList[i].sjjc, type: 'line', smooth: true, label: { normal: { show: true

【ECharts】SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

1导入包,搭建SSH框架. 导入JQuery的JS包,<script src="JS/jquery-1.7.1.js"></script> 导入ECharts的包.<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script> 前提你的SSH已经搭好了,数据已经传递到了Struts层. 2在Action层,将数据封装成J

C中的预编译宏定义

文章来自 http://www.uml.org.cn/c++/200902104.asp 在将一个C源程序转换为可执行程序的过程中, 编译预处理是最初的步骤. 这一步骤是由预处理器(preprocessor)来完成的. 在源流程序被编译器处理之前, 预处理器首先对源程序中的"宏(macro)"进行处理. C初学者可能对预处理器没什么概念, 这是情有可原的: 一般的C编译器都将预处理, 汇编, 编译, 连接过程集成到一起了. 编译预处理往往在后台运行. 在有的C编译器中, 这些过程统统由

在百度echarts中添加标识线markLine

在百度echarts中添加标识线,打开以下网址复制代码到输入框,绘制一条直线. http://echarts.baidu.com/echarts2/doc/example/line3.html option = { title : { text: '某楼盘销售情况', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['意向','预购','成交'] }, toolbox: { show : true, featur

ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

本文引用自:http://blog.csdn.net/ArcticFoxHan/article/details/38071641   1.导入包,搭建SSH框架 导入Jquery的JS包,<script src="JS/jquery.1.7.1.js"></script> 导入ECharts的包.<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"