echarts柱状图+折线动态切换
更新时间: 2022-10-24 13:48:00
阅读 1339
柱状图+折线动态切换
制作柱状图+折线实现动态效果
效果图如下: 首先在有数中创建一个javascript图表: 将下列代码复制到有数中,并选择ECharts-V5 引擎: 复制代码如下:
dataSet=dataSet.map((data,i)=>dataSet.map(d=>d[i]));
var dataX=dataSet[0];
var dataY1=dataSet[1];
var dataY2=dataSet[2];
let category = [];
let lineData = [];
let barData = [];
var j=8;
var k=0;
for (let i = 0; i < 8; i++) {
category.push(dataX[i]);
barData.push(dataY1[i]);
lineData.push(dataY2[i]);
}
option = {
title: {
text: 'Steam 各游戏玩家充值玩家对比',
padding:[2,0,0,12],
textStyle:{
color:'#ffffff'
},
},
backgroundColor: '#222831',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['充值人数', '下载人数'],
textStyle: {
color: '#ffffff'
}
},
xAxis: {
type:'category',
data: category,
axisLine: {
lineStyle: {
color: '#ffffff'
}
}
},
yAxis: {
type: 'value',
name:'人数',
min: 0,
max: 5000,
position: 'left',
splitLine: { show: false },
axisLine: {
show: true,
lineStyle: {
color: '#ffffff'
}
},
},
series: [
{
name: '充值人数',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 15,
color:'#00adb5',
data: lineData,
label:{
show : true,
color:"#ffffff",
position:"left"
}
},
{
name: '下载人数',
type: 'bar',
barWidth: 10,
itemStyle: {
borderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00adb5' },
{ offset: 1, color: '#eeeeee' },
])
},
label:{
show : true,
position :'top',
color:"#ffffff"
},
data: barData
}
]
};
setInterval(function(){
category=[];
barData=[];
lineData=[];
for (let i = 0; i < 8; i++) {
if(j==87){
j=8
}else{
category.push(dataX[j]);
barData.push(dataY1[j]);
lineData.push(dataY2[j]);
j=j+1;
}
};
myChart.setOption({
xAxis: [
{
data: category
}
],
series: [
{
data: lineData
},
{
data: barData
}
]
})
},5000);
option && myChart.setOption(option);
文档反馈
以上内容对您是否有帮助?