echarts4.X安装教程

最新推荐文章于 2025-03-25 23:17:10 发布

那记忆微凉

最新推荐文章于 2025-03-25 23:17:10 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/BigData_Mining/article/details/103593573

echarts 专栏收录该内容

3 篇文章

订阅专栏

网上关于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.html）