如何通combobox中的select标签选择不同的值展示不同的echarts图标

 我来答

1个回答

#热议# 在购买新能源车时，要注意哪些？

就烦条0o
2017-05-17 · 知道合伙人软件行家

就烦条0o
知道合伙人软件行家

采纳数：33315 获赞数：46492

从事多年系统运维，喜欢编写各种小程序和脚本。

向TA提问私信TA

关注

展开全部

代码，如下：
step1：将一下代码放到<head></head>标签中;
[html] view plain copy

<link href="/css/easyui.css" rel="stylesheet"></link>
<link href="/css/icon.css" rel="stylesheet"></link>
<link href="/css/main.css" rel="stylesheet"></link>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.easyui.min.js"></script>
<script src="/js/easyui-lang-zh_CN.js" charset="utf-8"></script>

<script src="/js/echarts.min.js"></script>

<script src="/js/drawChartsThird.js"></script>
step2：将下面的JavaScript也放到<head></head>标签中；
[javascript] view plain copy
<script>
$(function(){
load();//打开之后默认展示的图片
//根据选择加载相关的图片，这里用到onChange方法
$("#mySelect").combobox({
onChange:load
});
});
function load(){
//此处用“getValue”获得选择的值
var type = $("#mySelect").combobox("getValue");
if(type=="day"){
$(".self-box").attr("id","self-box-day");/*给div添加一个id */
mTimesDay("self-box-day");/*将id值传给mTimesDay方法，显示此方法定义的图片 */
}else if(type=="week"){
$(".self-box").attr("id","self-box-week");
mTimesWeekend("self-box-week");
}else{
$(".self-box").attr("id","self-box-months");
mTimesMonths("self-box-months");
}
}
</script>
step3：页面布局，放在body标签之间；
[html] view plain copy
<table border="1">
<tr>
<td>
<select class="easyui-combobox" id="mySelect" >
<option value="day">按天选择</option>
<option value="week">按周选择</option>
<option value="months">按月选择</option>
</select>
</td>
</tr>
</table>

<div class="self-box" style="width: 1500px; height: 500px;">
step4：建立一个drawChartsThird.js文件,在此文件中写入画的echarts图的代码,此处只以天为例，周和月做出一下注释中相应的改变即可；
[javascript] view plain copy
var mTimesDayBar; //周该为 var <span style="font-family: Arial, Helvetica, sans-serif;">mTimesWeekendBar；月改为 var </span><span style="font-family: Arial, Helvetica, sans-serif;">mTimesMonthsBar</span><span style="font-family: Arial, Helvetica, sans-serif;">
</span>//多发时间段柱状图Day
function mTimesDay(id){ <span style="font-family: Arial, Helvetica, sans-serif;">//周该为 function </span><span style="font-family: Arial, Helvetica, sans-serif;">mTimesWeekend；月改为 function </span><span style="font-family: Arial, Helvetica, sans-serif;">mTimesMonths</span>
[javascript] view plain copy
<span style="white-space:pre"> </span>//将下面的全部的<span style="font-family: Arial, Helvetica, sans-serif;">mTimesDayBar改为：周的是</span><span style="font-family: Arial, Helvetica, sans-serif;">mTimesWeekendBar；月的是</span><span style="font-family: Arial, Helvetica, sans-serif;">mTimesMonthsBar；对数据data做出相应的改变即可</span>
[javascript] view plain copy
<span style="font-family: Arial, Helvetica, sans-serif;">
</span> mTimesDayBar = echarts.init(document.getElementById(id));
var option = {
title: {
text: '当前辖区事件发现数'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['线索', '网格员上报','即发即处事件']
},
grid : {
top:'20%',
left : '3%',
right : '30%',
bottom : '1%',
containLabel : true
},
xAxis: {
type: 'category',
axisLabel: {
show: true,
interval: 0,
},
data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00']
},
yAxis: {
type: 'value'
},
series: [
{
name: '线索',
type: 'bar',
data: [1823, 2389, 2034, 10970, 11744, 60230,2904, 2034, 10970]
},
{
name: '网格员上报',
type: 'bar',
data: [1925, 2338, 3100, 11594, 13441, 68807,11594, 2338, 3100]
},
{
name: '即发即处事件',
type: 'bar',
data: [1935, 2338, 3000, 11594, 14141, 61807,61807, 2338, 3000]
}
]
};
mTimesDayBar.setOption(option);
window.onresize =mTimesDayBar.resize;
}
完成以上步骤就可以了。

本回答由网友推荐

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何通combobox中的select标签选择不同的值展示不同的echarts图标

其他类似问题

为你推荐：