做项目的时候有用到，现在做一些笔记来记录，以免长时间没使用便给忘记。本人前端新手，如果其中内容有误，还请多指教，感激不尽！
EChart 在HTML中有两种使用方式，一种是使用<script>标签引入,一种是使用CDN（内容分发网络）方法，还有一种是npm安装方法
一 使用<script>标签引入
使用<script>标签引入前需要下载echarts.min.js 文件，并包含在项目中。如果没有echarts.min.js文件，可以通过以下链接，可以去定制EChart.min.js文件。https://echarts.apache/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/echarts/4.3.0/echarts.min.js"></script>
2.<script src="https://cdnjs.cloudflare/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/echarts/4.3.0/echarts.min.js"></script>
<!-- 或者 方式三 -->
<script src="https://cdnjs.cloudflare/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/echarts/echarts-install.html
更多推荐
EChart 学习笔记一：EChart在html中的使用方式。
发布评论