<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/echarts.js"></script>
html:
<div id="main3"></div>
css:
#main3 {
width: 400px;
height: 250px;
}
js:
function chart3(data,data1) {
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: [ ''],
left:'10%',
textStyle:{
color:'#ffffff',
fontSize:18
}
},
xAxis: [
{
type: 'category',
data: data,
axisPointer: {
type: 'shadow'
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#ffffff',
}
},
axisLabel:{
color:'#ffffff',
}
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 1000,
interval: 100,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#ffffff',
}
},
axisLabel: {
formatter: '{value}',
color:'#ffffff'
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: '#0a204d'
}
}
}
],
series: [
{
name: '',
type: 'line',
smooth: true,
symbol:'emptyCircle',
label:{
show:true,
color:'#ffffff'
},
symbolSize: 8,
itemStyle:{
color:'#407fff',
},
data: data1
}
],
animationDuration: 3000
};
return option
}
var myChart3 = echarts.init(document.getElementById('main3'));
var option3 = chart3(['2016', '2017', '2018', '2019', '2020'],[185, 115, 410, 926, 62]);
myChart3.setOption(option3);
/*折线图动态效果*/
setInterval("myInterval()",5000);//2000为2秒钟
function myInterval(){
myChart3.clear();
myChart3.setOption(option3);
}