Echart初认识(一)：如何实现第一个echarts图

士416

已于 2023-05-14 17:23:27 修改

阅读量939

点赞数

分类专栏：笔记文章标签： echarts

于 2019-04-23 17:21:31 首次发布

本文链接：https://blog.csdn.net/weixin_39441762/article/details/89476786

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Echart有python的代码版本，也有自己写html的版本，这里介绍自己写html的简单使用过程。

echarts官方给出了不同方式绘制图例，其中下载源代码，引入文件（标签式单模块引入）和模块化单文件引入是较为常用的方式，其区别在于：引入文件，在写好的图例中，别人使用时，同样需要源文件和配置路径；模块化文件引入，再写好的图例中，别人使用时，不需要其他文件，传送html源文件即可得到需要的效果。推荐模块化文件引入写echarts图例，这里引入的是一个网址链接，设置好路径之后，不需要额外的其他操作。下面，分别介绍两种方法的简单引入（此博客主要适用于没有html基础的小白，可以快速入手echarts绘制图例）。

1 标签式单模块引入

此类方法是指，需要下载源代码的，在绘制的echarts图例中，引入源文件中的文件；写好的html文件，再传递给其他人时，需要使用者同样有源代码，并且修改路径，方可使用。

源代码下载

Echart官方网址：https://echarts.baidu.com/

在官网下载源代码：https://www.echartsjs.com/download.html

一个简单的例子

官方教程：https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

红色框内传入下载的源代码包中的文件

之后按照教程走尽可以啦。这里给一个可实现的代码案例：绘制丁格蓝图

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="incubator-echarts-4.2.1\dist\echarts.min.js"></script>
</head>
<body>
    <h1>广告饼图</h1>
    <!--<p>下面绘制条形图展现不同种类衣服的销售情况，并进行分析</p>-->
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            backgroundColor:'#2c343c',
            visualMap:{
                show:false,
                min:80,
                max:600,
                inRange:{
                    colorLightness:[0,1]
                }
            },
            series:[
                {
                    name:'访问来源',
                    type: 'pie',
                    radius: '55%',
                    data:[
                        {value:235, name:'视频广告'},
                        {value:274, name:'联盟广告'},
                        {value:310, name:'邮件营销'},
                        {value:335, name:'直接访问'},
                        {value:400, name:'搜索引擎'}
                    ],
                    roseType:'angle',
                    label:{
                        normal:{
                            textStyle:{
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine:{
                        normal:{
                            lineStyle:{
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    itemStyle:{
                        normal:{
                            color:'#c23531',
                            shadowBlur:200,
                            shadowColor:'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
       };
    myChart.setOption(option);
    </script>

</body>
</html>

注意：在写html代码中特别要注意格式和字符的正确，否则在网页上面无法正确打开。

2 模块化单文件引入

这里介绍的就是直接在html文件中写入echarts的url，然后写入路径，就可以很方便地传输使用。其官方链接：模块化单文件引入。下面直接给一个折线图动态延迟的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts</title>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        //路径配置
        require.config({
            paths:{
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        //入口使用
        require(
            [
                'echarts',
                'echarts/chart/bar',
                 // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/line'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.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'],
                        align: 'left'
                    },
                    toolbox: {
                        // y: 'bottom',
                        feature: {
                            magicType: {
                                type: ['stack', 'tiled']
                            },
                            dataView: {},
                            saveAsImage: {
                                pixelRatio: 2
                            }
                        }
                    },
                    tooltip: {},
                    xAxis: {
                        data: xAxisData,
                        silent: false,
                        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;}
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
    </script>
</body>
</html>

在这一个代码中，如果需要修改，可根据需求将“入口使用”下的require修改为你所需要的即可。

士416

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Echart初认识(一)：如何实现第一个echarts图

Echart有python的代码版本，也有自己写html的版本，这里介绍自己写html的简单使用过程。echarts官方给出了不同方式绘制图例，其中下载源代码，引入文件（标签式单模块引入）和模块化单文件引入是较为常用的方式，其区别在于：引入文件，在写好的图例中，别人使用时，同样需要源文件和配置路径；模块化文件引入，再写好的图例中，别人使用时，不需要其他文件，传送html源文件即可得到需要的效果...
复制链接

扫一扫

专栏目录