var myCharts = echarts.init(document.getElementById(id));
var unit = '元';
var option = {
grid: {
left: '8%',
right: '20%',
top: '20%',
bottom: '15%',
containLabel: true
},
tooltip: {
trigger: "item",
formatter: function (p) {
return p.value + unit;
},
},
xAxis: {
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
},
yAxis: [{
type: "category",
inverse: false,
data: [],
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
type: "dashed",
color: "#8e5139",
},
},
axisLabel: {
margin: 35,
textStyle: {
color: "#fff",
fontSize: 14,
},
},
}, ],
series: [{
tooltip: {
show: false,
},
itemStyle: {
normal: {
opacity: 0.2
}
},
z: 4,
type: "pictorialBar",
symbolSize: [14, 14],
symbolRepeat: "fixed",
data: [],
},
{
z: 6,
type: "pictorialBar",
symbolSize: [14, 14],
animation: true,
symbolRepeat: "fixed",
symbolClip: true,
symbolPosition: "start",
symbolOffset: [0, 0],
data: [],
label: {
normal: {
show: true,
textStyle: {
color: "#ffffff",
fontSize: 14,
},
formatter: function (p) {
return p.value + unit;
},
position: "right",
offset: [8, 0],
},
},
},
],
};
var img1 = {
finance1: './images/icon-finance-yellow.png',
finance2: './images/icon-finance-purple.png',
};
var res = {
data:[1260,2680,3320,12360,85600,10000],
axisData:['水费','电费','物业费','劳务费','资产性支出','其他']
};
if (res.data.length == 0) {
$('#' + id).html(_err)
} else {
let yAxisData = res.axisData;
let serData = res.data;
option.yAxis[0].data = yAxisData.slice(0, 5);
var data = [],
data_max = [];
var max = 0;
max = Math.max(...serData);
for (var i = 0; i < serData.slice(0, 5).length; i++) {
data.push({
value: serData.slice(0, 5)[i],
symbol: "image://"+img1['finance' + (i % 2 == 0 ? 1 : 2)],
symbolSize: [14, 14],
})
data_max.push({
value: max,
symbol:"image://"+ img1['finance' + (i % 2 == 0 ? 1 : 2)],
symbolSize: [14, 14],
})
}
option.series[0].data = data_max
option.series[1].data = data
myCharts.setOption(option);
function moveFun() {
var yAxisData_data = yAxisData.shift(),
serData_data = serData.shift();
yAxisData.push(yAxisData_data);
serData.push(serData_data);
option.yAxis[0].data = yAxisData.slice(0, 5);
var data = [],
data_max = [];
var max = 0;
max = Math.max(...serData);
for (var i = 0; i < serData.slice(0, 5).length; i++) {
data.push({
value: serData.slice(0, 5)[i],
symbol: "image://"+img1['finance' + (i % 2 == 0 ? 1 : 2)],
symbolSize: [14, 14],
})
data_max.push({
value: max,
symbol:"image://"+ img1['finance' + (i % 2 == 0 ? 1 : 2)],
symbolSize: [14, 14],
})
}
option.series[0].data = data_max
option.series[1].data = data
myCharts.setOption(option);
}
if (serData.length > 5) {
var timer = setInterval(moveFun, 3000)
$('#' + id).hover(function () {
clearInterval(timer)
}, function () {
timer = setTimeout(moveFun, 500)
timer = setInterval(moveFun, 3000);
})
}
window.addEventListener("resize", function () {
myCharts.resize();
});
}
myCharts.setOption(option);
window.addEventListener("resize", function () {
myCharts.resize();
});
动态象形柱图
最新推荐文章于 2023-04-19 16:42:14 发布