//图标的制作
var arr1 = [];//温度
var arr2 = [];//湿度
for(var i = 0;i < 34; i++){
arr1[i] = [];
arr2[i] = [];
for(var j = 0;j < 10; j++){
arr1[i][j] = 10+0.1*Math.floor(Math.random()*100);
arr2[i][j] = 10+Math.floor(Math.random()*40);
}
}
function fetchData(index,cb) {
// 通过 setTimeout 模拟异步加载
setTimeout(function () {
cb({
arr1:arr1[index],
arr2:arr2[index],
});
}, 1000);
}
var dom = document.getElementById("barChartCustom3");
var myChart = echarts.init(dom);
var app = {};
option = null;
var posList = [
'left', 'right', 'top', 'bottom',
'inside',
'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];
app.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: echarts.util.reduce(posList, function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
var labelOption = {
normal: {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
}
};
myChart.setOption({
series: [{
label: labelOption
}, {
label: labelOption
}]
});
}
};
var labelOption = {
normal: {
show: false,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {
textBorderColor: '#fff'
}
}
}
};
option = {
color: ['#ffcc66', '#4cabce'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['温度', '湿度']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: (function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
}
return res;
})()
}
],
yAxis : [{
type: 'value',
name: '温度',
},
{
type: 'value',
name: '湿度',
min: 0,
max: 100,
interval: 25,
axisLabel: {
formatter: '{value} %'
}
}],
series: [
{
name: '温度',
type: 'bar',
label: labelOption,
barGap:'0',//柱图间距
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push(Math.round(Math.random() *20));
}
return res;
})()
},
{
name: '湿度',
type: 'bar',
label: labelOption,
data:(function (){
var res = [];
var len = 0;
while (len < 10) {
res.push(10+Math.floor(Math.random()*40));
len++;
}
return res;
})()
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
//图标随着鼠标的选择省份更改值
$(document).ready(function(){
$('svg path').click(function(){
var index = $("svg path").index(this);
//console.log(index);
$("#chartname").text($(this).attr("name"));
myChart.showLoading();
fetchData(index,function (data) {
myChart.hideLoading();
myChart.setOption({
series: [{
// 根据名字对应到相应的系列
name: '温度',
data: data.arr1
},
{
name:'湿度',
data:data.arr2
}]
});
});;
});
});```
echarts异步加载
最新推荐文章于 2024-04-25 21:06:24 发布