这个可以修改，用自定义的就可以修改默认的legend形状
代码如下
legend: {
orient: 'horizontal', // 'vertical'
x: 'right', // 'center' | 'left' | {number},
y: 'top', // 'center' | 'bottom' | {number}
backgroundColor: '#eee',
borderColor: 'rgba(178,34,34,08)',
borderWidth: 4,
padding: 10, // [5, 10, 15, 20]
itemGap: 20,
textStyle: {color: 'red'},
selected: {
'降水量' : false
},
data: [
{
name:'蒸发量',
icon : 'image:///asset/ico/faviconpng',
textStyle:{fontWeight:'bold', color:'green'}
},
'降水量','最高气温', '最低气温'
]
}
主要看data属性里面
第步新建静态页面barhtml修改title并引入echarts js文件图所示：
第二步添加条状图容器插入div并给id属性宽度高度图所示：
第三步编写条状图js代码添加数据式图所示：
第四步预览该图形界面看效图图所示：
第五步编写点击条状图柱获取namevalue图所示：
第六步再预览该界面打浏览器控制台查看打印结图所示：
第一步，新建静态页面barhtml，修改title并引入echarts js文件，如下图所示：第二步，添加条状图容器，在插入一个div，并给出id属性和宽度高度，如下图所示：第三步，编写生成条状图的js代码，添加数据和样式，如下图所示：第四步，预览该图形界面，可以看到效果图，如下图所示：第五步，编写点击条状图的柱子，然后获取它们的name和value，如下图所示：第六步，再次预览该界面，打开浏览器的控制台，查看打印结果，如下图所示：如何利用echarts图表获取条状图点击名称和值
1客户端通过ajax发送请求
先绘制一个最简单的Echarts图表：
（这里就直接贴上代码了，直接用的是官网教程里异步数据加载和更新里的代码）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 401 Transitional//EN" ">
//使用Ajax请求你的servlet或者controller或者action 然后获取数据
$get('Query_RealTimeServlet')done(function jzdata(result) {
//有可能出现没转换成功的json数据 再转换一次
var json = JSONparse(result);
//用数组存储数据 我这边有三个
//xdata 是X轴的数据
// ldata rdata是表中的两条折线
var xdata = new Array();
var ldata = new Array();
var rdata = new Array();
//循环 存入数组
for (var i = 0; i < jsonlength; i++) {
var timestr = json[i]updatetime;
xdatapush(timestrsubstr(11));
ldatapush(json[i]left_torque);
rdatapush(json[i]right_torque);
}
//将数组中的数据存放
torque_chartsetOption({
xAxis : {
data : xdata
},
series : [
{
name : '左轮',
data : ldata
},
{
name : '右轮',
data : rdata
}
]
});
});
//这一块只是Ajax的请求存放数据 前边你还得自己设置你的图表样式 比如下边的
//js是我存放JavaScript的文件夹名称 你用你自己的
<script type="text/javascript" src="js/jquery-321minjs"></script>
<script src="js/echartsjs"></script>
<script src="js/esljs"></script>
//初始化 XXXecharts图
var XXX= echartsinit(documentgetElementById("你要放置echarts图的DIV的ID 这个DIV必须有宽高"));
//XXX图的 配置项
XXXsetOption({
//设置标题
title : {
text : '自己起个标题',
textStyle : {
color : '#FFFFFF',
fontSize : 20,
}
},
//设置图例组件
legend : {
left : '40%',
top : '10%',
data : [ 'L', 'R' ]
},
//设置X轴
xAxis : {
name : 'time',
nameTextStyle : {
color : '#FFFFFF'
},
type : 'category',
//名字与坐标轴的距离
nameGap : '5',
//ajax获取时间
data : []
},
//设置Y轴
yAxis : {
name : 'a',
nameTextStyle : {
color : '#FFFFFF'
},
splitLine : {
show : false,
}
},
//设置图表类型
series : [
//第一条线 L
{
type : 'line',
name : 'L',
itemStyle : {
normal : {
color : '#1F77D1',
}
},
lineStyle : {
normal : {
color : '#1F77D1',
}
},
data : []
},
//第二条线 R
{
type : 'line',
name : 'R',
itemStyle : {
normal : {
color : '#D35321',
}
},
lineStyle : {
normal : {
color : '#D35321',
}
},
data : []
}
]
});
//补充 Ajax是在设置完图表之后的 之后的 之后的
设置定时请求 每隔1000 (1秒)请求一次 视你的数据上传频率为准
setInterval(function xxx(), 1000);
以上就是关于如何利用echarts图表插件获取legend切换参数全部的内容，包括:如何利用echarts图表插件获取legend切换参数、我用的echarts中国地图怎么获取到当前选中的区域id或者名称、如何利用echarts图表获取条状图点击名称和值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）