在官网：https://echarts.apache.org/zh/index.html 中点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。
也可以通过npm安装ECharts
npm install echarts --save
引入 ECharts:
<script src="echarts/dist/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="echarts/i18n/langZH.js"></script>
在scharts官网中导航栏的：下载中下载
在scharts官网中导航栏的： 文档》使用手册 中有详细的安装插入方法。
在scharts官网中导航栏的：示例中有各种scharts图的样式效果和代码都可以引用。
在scharts官网中导航栏的：文档》配置项手册中有所有的配置属性的解释和用法。
基础柱状图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts/dist/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="echarts/i18n/langZH.js"></script>
</head>
<body>
<div id="main"></div>
<script>
// 获取到div
var main = document.getElementById("main")
// 初始化图标
// 第一种情况：此种情况是已经提前给图表容器设置好大小
// var myEcharts = echarts.init(main)
// 第二种情况在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示：
var myEcharts = echarts.init(main, "customed", {
width: "auto", //"auto",自适应，撑满屏幕
height: 600
})
// 设置数据及格式（配置）
var option = {
// 此处的color是全局调色板
color: ["green", "red", "yellow", "blue"],
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, {
value: 200,
itemStyle: {
color: "red"
}
}, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
// 第四步
myEcharts.setOption(option)
// 实现响应式容器大小的改变
window.onresize = function() {
myEcharts.resize()
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts/dist/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="echarts/i18n/langZH.js"></script>
<style>
div {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<!-- -->
<div id="main"></div>
<script>
var main = document.getElementById("main") // 初始化图表
// 第一种情况：此种情况是已经提前给图表容器设置好了大小
// var myEcharts = echarts.init(main)
//第二种情况：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示
// customed：<!-- 自定义样式 -->
var myEcharts = echarts.init(main, "customed", {
width: "auto",
height: 600
})
//设置数据及格式（配置）
var option = { // 全局样式
dataset: {
source: [
['产品', '2015', '2016', '2017'],
['拿铁', 50, 80, 30],
['奶茶', 85, 50, 40],
['芝士可可', 20, 30, 60],
['布朗尼', 60, 90, 130],
]
},
xAxis: {
type: 'category',
name: "产品"
},
yAxis: {
type: 'value',
name: "销量",
axisLine: {
show: true,
Symbol: ["none", "arrow"],
lineStyle: {
type: "dashed",
width: 5,
color: "red"
}
},
axisTick: {
show: true,
length: 20,
lineStyle: {
color: "green"
}
}
},
series: [{
type: 'bar'
}, {
type: 'bar'
}, {
type: 'bar'
}]
}; //第四部
myEcharts.setOption(option)
// 实际响应式容器大小的改变
window.onresize = function() {
myEcharts.resize();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts/dist/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="echarts/i18n/langZH.js"></script>
</head>
<body>
<!-- -->
<div id="main"></div>
<script>
var main = document.getElementById("main") // 初始化图表
// 第一种情况：此种情况是已经提前给图表容器设置好了大小
// var myEcharts = echarts.init(main)
//第二种情况：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示
// customed：<!-- 自定义样式 -->
var myEcharts = echarts.init(main, "customed", {
width: "auto",
height: 600
})
//设置数据及格式（配置）
var option = { // 全局样式
dataset: {
dimensions: ['product', '2015', '2016', '2017'],
source: [{
product: '拿铁',
'2015': 43.3,
'2016': 85.8,
'2017': 93.7
}, {
product: '奶茶',
'2015': 83.1,
'2016': 73.4,
'2017': 55.1
}, {
product: '芝士可可',
'2015': 86.4,
'2016': 65.2,
'2017': 82.5
}, {
product: '核桃布朗尼',
'2015': 72.4,
'2016': 53.9,
'2017': 39.1
}]
},
xAxis: {
type: 'category',
name: "产品"
},
yAxis: {
type: 'value',
name: "销量",
axisLine: {
show: true,
Symbol: ["none", "arrow"],
lineStyle: {
type: "dashed",
width: 5,
color: "red"
}
},
axisTick: {
show: true,
length: 20,
lineStyle: {
color: "green"
}
}
},
series: [{
type: 'bar'
}, {
type: 'bar'
}, {
type: 'bar'
}]
}; //第四部
myEcharts.setOption(option)
// 实际响应式容器大小的改变
window.onresize = function() {
myEcharts.resize();
}
</script>
</body>
</html>
线性柱形图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts/dist/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="echarts/i18n/langZH.js"></script>
<style>
/* div {
width: 100%;
height: 600px;
} */
</style>
</head>
<body>
<!-- -->
<div id="main"></div>
<script>
var main = document.getElementById("main") // 初始化图表
// 第一种情况：此种情况是已经提前给图表容器设置好了大小
// var myEcharts = echarts.init(main)
//第二种情况：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示
// customed：<!-- 自定义样式 -->
var myEcharts = echarts.init(main, null, {
width: "auto",
height: 600
})
//设置数据及格式（配置）
var option = { // 全局样式
title: {
show: true,
text: "产品销量图"
},
legend: {
// data: ['降水量', '温度']
// 强制设置图形为圆
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red',
fontSize: 20
},
orient: "Horizontal",
top: 100
},
dataset: {
source: [
['1月', 2.7, -3.7],
['2月', 4.9, -0.7],
['3月', 8.3, 5.8],
['4月', 21.2, 14.2],
['5月', 34.2, 19.9],
['6月', 78.1, 24.4],
['7月', 185.2, 26.2],
['8月', 159.7, 24.8],
['9月', 45.5, 20.0],
['10月', 21.8, 13.1],
['11月', 7.4, 4.6],
['12月', 2.8, -1.5],
]
},
xAxis: {
type: 'category',
name: "月份"
},
yAxis: [{
type: 'value',
name: "降水量"
}, {
type: 'value',
name: "温度"
}],
series: [{
type: 'bar',
yAxisIndex: 0
}, {
type: 'line',
yAxisIndex: 1
}]
}; //第四部
myEcharts.setOption(option)
// 实际响应式容器大小的改变
// window.onresize = function() {
// myEcharts.resize();
// }
</script>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts/dist/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="echarts/i18n/langZH.js"></script>
<style>
/* #main {
width: 100%;
height: 600px;
border: 1px solid red;
} */
</style>
</head>
<body>
<div id="main"></div>
<script>
//获取到div
var main = document.getElementById("main")
//初始化图表
//第一种情况：此种情况是已经提前给图表容器设置好大小
//var myEcharts = echarts.init(main)
//第二种：在未指定图表容器大小时，可以在图表初始化时给容器指定大小，如下所示：
var myECharts = echarts.init(main, "customed", {
width: "auto",
height: 600
})
//设置数据及格式（配置）
var option = {
//此处的color是全局调色板
color: ["green", "red", "yellow", "blue"],
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, {
value: 200,
itemStyle: {
color: "red"
}
}, 150, 80, 70, 110, 130],
type: 'bar'
}],
toolbox: {
show: true,
feature: {
//保存为图片
saveAsImage: {
show: true,
type: 'jpg',
name: '下雨量',
title: '保存为图片',
backgroundColor: 'red'
},
//数据视图
dataView: {
show: true,
title: '销量数据',
lang: ['数据视图', '关闭', '刷新'],
textareaColor: 'lightblue',
textareaBorderColor: 'lightblue',
backgroundColor: 'lightblue'
},
magicType: {
show: true,
type: ['line', 'bar'],
title: {
line: '切换为折线图',
bar: '切换为柱状图'
}
},
dataZoom: {
show: true,
title: {
zoom: '区域缩放',
back: '区域缩放还原'
}
},
restore: {
show: true,
title: '还原'
}
}
},
};
//第四步：
myECharts.setOption(option)
//实现响应式容器大小的改变
window.onresize = function() {
myECharts.resize();
};
</script>
</body>
</html>