JavaScript图表库ECharts使用

发表于 | 分类于

ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，
可交互，可个性化定制的数据可视化图表。

提供大量常用的数据可视化图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，
工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、
力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。

官方网站：http://echarts.baidu.com/index.html

二维折线图

二维折线图是最常见的用法，这里我画的是最基础的二维折线图。

首先引入最新js依赖echarts.min.js

1
2
<script type="text/javascript" src="../../js/jquery-1.12.4.min.js"></script>
<script src="./echarts.min.js"></script>

第二步，页面定义图表div，里面放的隐藏input是首页加载时候从后台传入的_隔开数据:

1
2
3
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main1" style="width: 800px;height:400px;"></div>
<hr/>

注意看js怎么写:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
$(function () {
    // 开始初始化echart数据
    x_data = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"];
    y_data = [[5, 20, 36, 10, 10, 20], [6, 22, 13, 33, 12, 15]];
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    var option1 = {
        title: {
            text: '服装销量表'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['第一季度', '第二季度']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: x_data
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '第一季度',
                type: 'line',
                stack: '总量',
                data: y_data[0]
            },
            {
                name: '第二季度',
                type: 'line',
                stack: '总量',
                data: y_data[1]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
});

我放了两项纪录，分别是第一季度和第二季度销量，下面是效果图: