eCharts使用(一) 简单图表

首先下载eCharts源代码,然后可以按照官网的5分钟上手ECharts教程做一个简单的例子,这里为了将前端显示和后端逻辑分开，可以建一个index.html和一个绘制图表的chartTest.js,代码如下:

<html>
<head>
    <meta charset="UTF-8">
    <title>eChart Test</title>
    <script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:400px;float: left"></div>
<script src="chartTest.js"></script>
</body>
</html>

js代码如下：

option = {
    xAxis:{
        data: []
    },
    yAxis:{},
    series: [{
        type: \'bar\',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
var myChart = echarts.init(document.getElementById(\'main\'));
myChart.setOption(option);

通过上面的代码就可以绘制出下面这样的一个简单的图表

其中xAxis和yAxis构成了平面直角坐标系网格中的x轴和y轴,一般情况下一个绘图网格中只能有两个x轴和两个y轴,例如我们可以这样建立一个有两个x,两个y轴的坐标系.代码如下：

option = {
    xAxis: [{
        data: [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\']
    }, {
        data: [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\']
    }],
    yAxis: [
        {
            name: \'Left\', type: \'value\'
        },
        {
            name: \'Right\', type: \'value\', inverse: true,
        }
    ],
    series: [{
        type: \'line\',
        data: [15, 20, 36, 10, 10, 20, 20]
    }, {
        yAxisIndex: 1,
        type: \'bar\',
        data: [115, 210, 326, 320, 120, 220, 20]
    }]
};
var myChart = echarts.init(document.getElementById(\'main\'));
myChart.setOption(option);

其中xAxis.data表示类目,yAxis.inverse表示反向坐标轴.series数组中的每个系列都会绘制出一个图表.上面代码的结果如下：

也可以通过yAxis.offset或者xAxis.offset来设置两个以上x,y轴。接下来我们在简单图表的基础上，加入一些其他属性来丰富我们的图表

option = {
    title://标题组件，包含主标题和副标题。
        {
            text: \'eCharts图表测试\',
            subtext: \'两个x,y轴的测试\',
            left: \'center\',
            textStyle: {
                fontWeight: \'bold\',
            }
        },
    grid: {
        top: 80//网格距离容器上侧的距离
    },
    xAxis: [
        {
            data: [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\']
            //类目数据
        },
        {
            inverse: true,//翻转
            data: [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\']//类目数据
        }],
    yAxis: [
        {
            name: \'销售件数\',//坐标轴名称
            type: \'value\'//坐标轴类型
        },
        {
            name: \'销售额\', type: \'value\', inverse: true
        }
    ],
    series: [
        {
            type: \'line\',//图表类型
            data: [15, 20, 36, 10, 10, 20, 20]
        }, {
            yAxisIndex: 1,
            type: \'bar\',
            data: [115, 210, 326, 320, 120, 220, 20]
        }
    ]
};
var myChart = echarts.init(document.getElementById(\'main\'));//初始化一个 echarts 实例
myChart.setOption(option);// 使用刚指定的配置项和数据显示图表。