<code class="prism language-javascript"><!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>

一般情况下，您可以直接从CDN获取创建的echarts，也可以从GitHub的echarts/dist文件夹中获取创建的echarts。这些都可以在浏览器端项目中使用。一般来说，定制有以下三种类型：

我们也可以自己创建echarts，它只能包含我们需要的图表和组件。

echarts实例：一个网页可以创建多个echarts实例。每个echarts实例可以创建多个图表、坐标系等（用选项描述）。准备一个DOM节点（作为echarts的渲染容器），并在其中创建一个echarts实例。每个echarts实例都有一个专属的DOM节点。

系列：一组值及其映射到的图表。系列至少包含一组值、一个图表类型 (series.js) 以及有关如何将这些数据映射到图表中的其他参数。 series.type中可以设置图表类型，如饼图、折线图、条形图等；在series.data中，可以设置每个系列所需的数据。

组件：在系列之上，echarts中的各种内容都体现为“组件”。例如echarts至少有这个分量：（直角坐标系X轴）、（直角坐标系Y轴）、（直角坐标系底部）、（极坐标系角度轴）、（直径轴）极坐标系）、（极坐标系底板）、（地理坐标系）、（数据区缩放组件）、（可视化绘图组件）、（提示框组件）、（工具栏组件）、（系列）、..我们注意到，其实series()也是一种组件，可以理解为：series是专门勾画“图片”的组件。

使用选项来描述图表：选项描述数据、数据如何映射到图形以及交互行为。

：个性化图表样式、echarts风格介绍、使用数据集管理数据、为图表添加交互组件、移动端适配、数据的可视化映射、echarts中的干扰和行为、富文本标签、使用echarts GL实现基础3D可视化。

两个演示

首先考虑您需要使用什么演示。因为它将是一个轻轨系统。一定要做到：显然条形图和折线图是必要的，饼图是补充。在这最初的三个demo的基础上echarts 源代码，需要添加富文本标签。那么您应该能够处理大多数图表。

然后选择演示。

最后在GitHub上下载echarts.min.js。使用脚本标签引入。

条形图（模拟日均客流量总计）

好像：

思路：有三组数据：工作日、周末、节假日；横坐标为2010年至2019年，纵坐标为0至600万人。

参考：官网反例。修改选项；

var option = {
	title: {text: '仿日均客运总量柱状图'},
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '工作日', '周末', '节假日'],
            ['2010', 53.5, 57.3, 56.8],
            ['2011', 174.2, 158.2, 79.2],
            ['2012', 183.4, 172.5, 174.4],
            ['2013', 279.3, 266.3, 211.2]
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ],
};