function echarts_3() {
var myChart = echarts.init(document.getElementById('echart3'));
var years = [
'2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015',
'2016', '2017', '2018', '2019', '2020'
];
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: 'rgb(194,19,9)'
}
},
formatter: function (params) {
var tooltip = params[0].name + '<br />';
params.forEach(function (item) {
tooltip += item.seriesName + ': ' + Math.round(item.data) + '<br />';
});
return tooltip;
}
},
legend: {
top: '0%',
data: ['东部地区', '西部地区', '南部地区', '中部地区'],
textStyle: {
color: 'rgb(194,19,9)',
fontSize: '12',
}
},
grid: {
left: '10',
top: '30',
right: '10',
bottom: '10',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
color: "rgb(194,19,9)",
fontSize: 12,
},
},
axisLine: {
lineStyle: {
color: 'rgb(194,19,9)'
}
},
data: years
},
yAxis: {
type: 'value',
name: '次数', // 修改 y 轴名称
axisTick: { show: false },
axisLine: {
lineStyle: {
color: 'rgb(194,19,9)'
}
},
axisLabel: {
textStyle: {
color: "rgb(194,19,9)",
fontSize: 12,
},
formatter: '{value}' // 设置 y 轴标签的格式为整数
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
}
},
series: [
{
name: '东部地区',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
color: 'rgb(145,219,255)',
width: 2
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(31, 174, 234, 0.4)'
}, {
offset: 0.8,
color: 'rgba(31, 174, 234, 0.1)'
}], false),
shadowColor: 'rgba(255,255,255)',
},
itemStyle: {
color: '#1f7eea',
borderColor: 'rgba(31, 174, 234, .1)',
borderWidth: 5
},
data: [
24, 20, 17, 14, 12, 10, 9, 9, 9, 8, 7, 6, 5
],
animation: true, // 开启入场动画
animationDuration: 8000, // 动画时长，单位为毫秒（ms）
animationEasing: 'cubicInOut',
},
{
name: '西部地区',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
color: '#a2ffc8',
width: 2
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(107, 221, 155, 0.4)'
}, {
offset: 0.8,
color: 'rgba(107, 221, 155, 0.1)'
}], false),
shadowColor: 'rgba(255,255,255)',
},
itemStyle: {
color: '#6bdd9b',
borderColor: 'rgba(107, 221, 155, .1)',
borderWidth: 5
},
data: [
11, 13, 13, 14, 13, 14, 16, 16, 18, 21, 23, 30, 30
],
animation: true, // 开启入场动画
animationDuration: 8000, // 动画时长，单位为毫秒（ms）
animationEasing: 'cubicInOut',
},
{
name: '南部地区',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
color: '#ffb880',
width: 2
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 184, 128, 0.4)'
}, {
offset: 0.8,
color: 'rgba(255, 184, 128, 0.1)'
}], false),
shadowColor: 'rgba(255,255,255)',
},
itemStyle: {
color: '#ff9f57',
borderColor: 'rgba(255, 184, 128, .1)',
borderWidth: 5
},
data: [
16, 20, 25, 32, 37, 43, 44, 44, 45, 46, 48, 52, 55
],
animation: true, // 开启入场动画
animationDuration: 8000, // 动画时长，单位为毫秒（ms）
animationEasing: 'cubicInOut',
},
{
name: '中部地区',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
color: '#ff0000',
width: 2
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 0, 0, 0.4)'
}, {
offset: 0.8,
color: 'rgba(255, 0, 0, 0.1)'
}], false),
shadowColor: 'rgba(255,255,255)',
},
itemStyle: {
color: '#ff0000',
borderColor: 'rgba(255, 0, 0, .1)',
borderWidth: 5
},
data: [
16, 11, 20, 16, 30, 18, 14, 42, 32, 26, 36, 61, 75
],
animation: true, // 开启入场动画
animationDuration: 8000, // 动画时长，单位为毫秒（ms）
animationEasing: 'cubicInOut',
}
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
let i = 0
setInterval(function () {
console.log(i)
i = i === 13 ? 0 : i + 1
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0, // 显示第几个series
dataIndex: i // 显示第几个数据
});
}, 2000)
/* // 每隔5秒刷新一次图表
setInterval(function () {
myChart.clear(); // 清除图表内容
myChart.setOption(option); // 重新设置图表配置
}, 13000); */
}
