(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)
图就出来了!!!!!!!!
仅此记录一下我的经历,作为一个什么都不知道的小白,苦苦探索了一个小时。感谢那些分享的人,如果我的这篇你都看不懂,你懂我意思的!