Echarts基础入门
下载echarts.js 文件
选择 dist/echarts.js。
地址：echarts CDN by jsDelivr - A CDN for npm and GitHub
引入 Apache ECharts
在刚才保存 echarts.js 的目录新建一个 index.html 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入ECharts 文件 -->
<script src="echarts.js"></script>
</head>
</html>绘制一个简单的图表
1.定义了 DOM 容器
准备一个DOM容器，需要给容器设置尺寸。
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>2.通过echarts.init方法初始化一个 echarts 实例。
echarts.init:创建一个 ECharts 实例，返回echartsInstance，不能在单个容器上初始化多个 ECharts 实例。
var myChart = echarts.init(document.getElementById("main"));3.指定图表的配置项和数据
var option = {
color: [...],
title: {
text: "...",
},
tooltip: {},
legend: {
data: ["销量", "进货量", "库存"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
{
name: "进货量",
type: "bar",
data: [15, 30, 50, 40, 20, 30],
},
{
name: "库存",
type: "bar",
data: [10, 10, 14, 30, 10, 10],
},
],
};4.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);