（2019年5月最新）！！！Echarts下载使用---初学奶妈加保姆版（老泪纵横）

最新推荐文章于 2024-06-26 11:09:42 发布

sunlu1124

最新推荐文章于 2024-06-26 11:09:42 发布

阅读量4.7k

点赞数 35

分类专栏： Echarts 文章标签： Echarts

本文链接：https://blog.csdn.net/sunlu1124/article/details/89852880

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（2019年5月最新）！！！Echarts下载使用---初学奶妈加保姆版（老泪纵横）

网上关于Echarts下载和使用的文章太多太多了，但是没有一个能用！！！！！！

因为Echarts官网已经不再是原来提供完整版下载的那个页面了！！！！

我们先来看一下网上大部分下载教程，让你去官网找到下面这个页面，然后下载完整版！！！

但是，醒醒吧！！！！时代在变换，最新的Echarts下载页面已经变成了下面这样：

从上面这个页面，你根本找不到什么完整版！！！！！可供下载的全是源码，但是我找了一圈都没有找到源码的使用说明，所以放弃吧，我来教你吧！！！

1.Echarts下载

请到下面这个链接去下载完整版：https://www.7down.com/soft/214165.html 另外，不知道下载按钮是哪个的请看下图：

（我真的太贴心了有没有！！因为怕你们下成下载器之类乱七八糟的东西。）

2.解压Echarts

解压的文件随便你放在哪里，但是你自己一定要记得放在哪里。附一张解压之后的文件图：

（ps：我是放到了我的D盘，自己新建的 “常用软件”文件夹下）

（注意一定要有echarts.min.js这个文件，你去官网下载的源码里面是没有这个文件的）

3.开始Echarts版的“Hello world”

首先你需要一个代码编辑器，随便sublime Text，或是什么Dreamweaver都可以。（我用的是sublime Text）

然后复制这段代码到你的代码编辑器里。（这段代码是官网的一个例子）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为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 = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
                            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

我复制完成后的部分截图：

4.运行

保存你复制好的这段代码文件到你刚才存放echarts.min.js的文件夹里。

比如我的echarts.min.js存放在 D:\常用软件\echartsjs文件夹下，我就把代码文件保存在这里

(example文件就是复制的代码文件）

然后见证奇迹的时刻来了，这时候点击你复制的代码文件（我的是 example.html）

图就出来了！！！！！！！！

仅此记录一下我的经历，作为一个什么都不知道的小白，苦苦探索了一个小时。感谢那些分享的人，如果我的这篇你都看不懂，你懂我意思的！

sunlu1124

关注

35
点赞
踩
65

收藏

觉得还不错? 一键收藏
24
评论
（2019年5月最新）！！！Echarts下载使用---初学奶妈加保姆版（老泪纵横）

（2019年5月最新）！！！Echarts下载使用---初学奶妈加保姆版（老泪纵横）网上关于Echarts下载和使用的文章太多太多了，但是没有一个能用！！！！！！因为Echarts官网已经不再是原来提供完整版下载的那个页面了！！！！我们先来看一下网上大部分下载教程，让你去官网找到下面这个页面，然后下载完整版！！！但是，醒醒吧！！！！时代在变换，最新的Echarts下载页面已经...
复制链接

扫一扫

专栏目录