使用echarts一般需要以下几个步骤：
一、ECharts包的引用。
1.在官网把ECharts下载下来，放到与所开发的文件同一目录下。并在文件中引入：
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
2、通过npm下载，并进行引用。
npm install echarts --save
3、直接通过cdn来进行引入，这个方法这能在联网的时候才可以。
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
二、为echarts准备一个dom容器。
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
三、 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
四、设置参数(即option函数)，这一步如果使用官方示例直接复制过来即可。（其中有很多参数，可以在官方示例中修改看效果来学习）例如：
var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
xAxisData.push('类目' + i);
data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
}
option = {
title: {
text: '柱状图动画延迟'
},
legend: {
data: ['bar', 'bar2']
},
toolbox: {
// y: 'bottom',
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {},
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {},
xAxis: {
data: xAxisData,
splitLine: {
show: false
}
},
yAxis: {
},
series: [{
name: 'bar',
type: 'bar',
data: data1,
animationDelay: function (idx) {
return idx * 10;
}
}, {
name: 'bar2',
type: 'bar',
data: data2,
animationDelay: function (idx) {
return idx * 10 + 100;
}
}],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};
四、调用option。
myChart.setOption(option);
这样就成功了
效果展示图.png
最后附上完成代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<title>动画延迟</title>
</head>
<body>
<div id="main" style="width: 1000px;height: 1000px;"></div>
<script>
var myChart=echarts.init(document.getElementById('main'))
var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
xAxisData.push('类目' + i);
data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
}
option = {
title: {
text: '柱状图动画延迟'
},
legend: {
data: ['bar', 'bar2']
},
toolbox: {
// y: 'bottom',
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {},
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {},
xAxis: {
data: xAxisData,
splitLine: {
show: false
}
},
yAxis: {
},
series: [{
name: 'bar',
type: 'bar',
data: data1,
animationDelay: function (idx) {
return idx * 10;
}
}, {
name: 'bar2',
type: 'bar',
data: data2,
animationDelay: function (idx) {
return idx * 10 + 100;
}
}],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};
myChart.setOption(option)
</script>
</body>
</html>
网友评论