做项目的时候有用到,现在做一些笔记来记录,以免长时间没使用便给忘记。本人前端新手,如果其中内容有误,还请多指教,感激不尽!
EChart 在HTML中有两种使用方式,一种是使用<script>标签引入,一种是使用CDN(内容分发网络)方法,还有一种是npm安装方法
一 使用<script>标签引入
使用<script>标签引入前需要下载echarts.min.js 文件,并包含在项目中。如果没有echarts.min.js文件,可以通过以下链接,可以去定制EChart.min.js文件。https://echarts.apache.org/zh/download.html
点击在线定制,跳转到定制界面。
在这里可以选择需要使用到的图表,并拉到网页最小面,有一个下载,点击下载。
下载的时候会跳转到一个生成界面,当界面显示OK,并提示保存文件时,就证明生成成功。保存生成的文件即可。保存的文件就是需要的echarts.min.js文件。
使用例子如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js 文件-->
<!-- 方式一:通过<script>引入 -->
<script src="../EChart/echarts.js"></script>
</head>
<body>
<div id="chart" style="width: 500px;height:500px;"></div>
<script type="text/javascript">
var Chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: 'My Chart Example'
},
legend: {
data: ['销量']
},
xAxis: {
data: ["语文", "数学", "英语", "生物", "地理", "化学"]
},
yAxis: {},
series: [{
name: '科目',
type: 'bar',
data: [90, 80, 100, 70, 88, 93]
}]
};
Chart.setOption(option);
</script>
</body>
</html>
二 使用CDN方法
使用CDN方法。不用定制echart文件,只需要在<script>标签内引入链接即可。
一共有两种CDN方法:
1. <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
2.<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
具体例子如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js 文件-->
<!-- 方式二 -->
<script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<!-- 或者 方式三 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 500px;height:500px;"></div>
<script type="text/javascript">
var Chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: 'My Chart Example'
},
legend: {
data: ['销量']
},
xAxis: {
data: ["语文", "数学", "英语", "生物", "地理", "化学"]
},
yAxis: {},
series: [{
name: '科目',
type: 'bar',
data: [90, 80, 100, 70, 88, 93]
}]
};
Chart.setOption(option);
</script>
</body>
</html>
三 NPM方法
第三种是通过NPM方式实现。
需要注意的是,用NPM安装EChart,NPM的版本必须大于3.0。
1.查看npm版本:npm
2.升级或安装cnpm:npm install cnpm -g
3.升级npm:cnpm install npm -g
4.通过cnpm获取echarts:cnpm install echarts --save
安装完成后 ECharts 和 zrender 会放在 node_modules 目录下。
然后,我们可以直接在项目代码中使用 require('echarts') 来使用。
例子如下:
<script type="text/javascript">
var charts = require('echarts');
var Chart = charts.init(document.getElementById('chart'));
var option = {
title: {
text: 'My Chart Example'
},
legend: {
data: ['销量']
},
xAxis: {
data: ["语文", "数学", "英语", "生物", "地理", "化学"]
},
yAxis: {},
series: [{
name: '科目',
type: 'bar',
data: [90, 80, 100, 70, 88, 93]
}]
};
Chart.setOption(option);
</script>
这里使用NPM方法有一点问题,无法进行显示,暂时未解决,待解决了再更新。
以下是源代码,供参考。
此番学习参考菜鸟教程:https://www.runoob.com/echarts/echarts-install.html