首先下载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);// 使用刚指定的配置项和数据显示图表。
