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

2024-12-15 17:39:25
推荐回答(1个)
回答1:

代码,如下:
step1:将一下代码放到标签中;
[html] view plain copy











step2:将下面的JavaScript也放到标签中;
[javascript] view plain copy

step3:页面布局,放在body标签之间;
[html] view plain copy










step4:建立一个drawChartsThird.js文件,在此文件中写入画的echarts图的代码,此处只以天为例,周和月做出一下注释中相应的改变即可;
[javascript] view plain copy
var mTimesDayBar; //周该为 var mTimesWeekendBar;月改为 var mTimesMonthsBar
//多发时间段柱状图Day
function mTimesDay(id){ //周该为 function mTimesWeekend;月改为 function mTimesMonths
[javascript] view plain copy
//将下面的全部的mTimesDayBar改为:周的是mTimesWeekendBar;月的是mTimesMonthsBar;对数据data做出相应的改变即可
[javascript] view plain copy

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;
}
完成以上步骤就可以了。