在前面的例子中，我们使用了grid-直角坐标系网格,在 ECharts 3 中可以存在任意个 grid 组件。如下例我们构建两个网格的图表
option = {
title://标题组件，包含主标题和副标题。
{
text: ‘eCharts图表测试‘,
subtext: ‘两个绘图网格的测试‘,
left: ‘center‘,
textStyle: {
fontWeight: ‘bold‘,
}
},
grid: [
{
x: ‘7%‘, //左上角横宽度
y: ‘20%‘,//左上角竖宽度
width: ‘38%‘,
},
{
x2: ‘7%‘,//右下角
y: ‘20%‘,//
width: ‘38%‘,
}],
xAxis: [
{
gridIndex: 0,//所在的 grid 的索引
data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘]
},
{
gridIndex: 1,//所在的 grid 的索引
data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘]//类目数据
}],
yAxis: [
{
name: ‘销售件数‘,//坐标轴名称
gridIndex: 0, //所在的 grid 的索引
type: ‘value‘//坐标轴类型
},
{
name: ‘销售额‘,
gridIndex: 1,
type: ‘value‘,
}
],
series: [
{
xAxisIndex: 0,
yAxisIndex: 0,
type: ‘line‘,//图表类型
data: [15, 20, 36, 10, 10, 20, 20]
}, {
xAxisIndex: 1,
yAxisIndex: 1,
type: ‘bar‘,
data: [115, 210, 326, 320, 120, 220, 20]
}
]
};
var myChart = echarts.init(document.getElementById(‘main‘));//初始化一个 echarts 实例
myChart.setOption(option);// 使用刚指定的配置项和数据显示图表。
其中grid的x,y和x2,y2定义请参照上右图. 本例中为防止图表覆盖标题，所以调整了grid的宽度和高度,line和bar可以这么做，但是如果是pie(饼图)的话,就不能用grid来调整位置了，只能用pie自己的属性来调整，例如我们将上面的折线图改成饼图后,我们的代码需要这样写
option = {
title://标题组件，包含主标题和副标题。
{
text: ‘eCharts图表测试‘,
subtext: ‘两个绘图网格的测试‘,
left: ‘center‘,
textStyle: {
fontWeight: ‘bold‘,
}
},
grid: [
{
x: ‘7%‘,
y: ‘20%‘,
width: ‘38%‘,
},
{
x2: ‘7%‘,
y: ‘20%‘,
width: ‘38%‘,
}],
xAxis: [
{
gridIndex: 0,//所在的 grid 的索引
show: false,//不显示x轴
data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘]
},
{
gridIndex: 1,//所在的 grid 的索引
data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘]//类目数据
}],
yAxis: [
{
name: ‘销售件数‘,//坐标轴名称
show: false,//不显示y轴
gridIndex: 0, //所在的 grid 的索引
type: ‘value‘//坐标轴类型
},
{
name: ‘销售额‘,
gridIndex: 1,
type: ‘value‘,
}
],
series: [
{
type: ‘pie‘,//图表类型
center: [‘20%‘, ‘50%‘],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
radius: [0, ‘55%‘],//饼图的半径，数组的第一项是内半径，第二项是外半径
data: [
{value: 335, name: ‘直接访问‘},
{value: 310, name: ‘邮件营销‘},
{value: 234, name: ‘联盟广告‘},
{value: 135, name: ‘视频广告‘},
{value: 1548, name: ‘搜索引擎‘}
]
},
{
xAxisIndex: 1,
yAxisIndex: 1,
type: ‘bar‘,
data: [115, 210, 326, 320, 120, 220, 20]
}
]
};
var myChart = echarts.init(document.getElementById(‘main‘));//初始化一个 echarts 实例
myChart.setOption(option);// 使用刚指定的配置项和数据显示图表。
坐标系除了直角坐标系以外,还有极坐标系,雷达图坐标系和地理坐标系,下面是极坐标系,雷达图坐标系的例子
option = {
title://标题组件，包含主标题和副标题。
{
text: ‘eCharts图表测试‘,
subtext: ‘两种坐标系的测试‘,
left: ‘center‘,
textStyle: {
fontWeight: ‘bold‘,
}
},
polar: {
center: [‘30%‘, ‘50%‘],//极坐标系的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
radius:‘70%‘
},
radiusAxis: {},
angleAxis: {
type: ‘category‘,
polarIndex: 0,
data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘],
},
radar: {
center: [‘75%‘, ‘50%‘],
radius: ‘75%‘,
indicator: [
{name: ‘销售‘, max: 6500},
{name: ‘管理‘, max: 16000},
{name: ‘信息‘, max: 30000},
{name: ‘客服‘, max: 38000},
{name: ‘研发‘, max: 52000},
{name: ‘市场‘, max: 25000}
]
},
series: [
{
type: ‘scatter‘,
coordinateSystem: ‘polar‘,
data: [115, 210, 326, 320, 120, 220, 20]
},
{
type: ‘radar‘,
radarIndex: 0,
data: [{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: ‘预算分配（Allocated Budget）‘
}]
}
]
};
var myChart = echarts.init(document.getElementById(‘main‘));//初始化一个 echarts 实例
myChart.setOption(option);// 使用刚指定的配置项和数据显示图表。
