ECharts的使用

使用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>

ECharts的使用

推荐阅读更多精彩内容