最近又开始折腾LimeSurvey了。之前收录了很多量表，基本上都卡在最后的结果呈现上。今天重新开始琢磨如何使用echarts生成各类图表。
前两年用echarts生成过雷达图之类的，代码之复杂，也不知道是因为版本的问题呢，还是因为我自己给搞复杂了。
但是这次的话题是另一个，就是怎样在同一个页面中生成两个图表。先看看要实现的效果：
刚开始的时候天真地以为做两个div容器，然后放两段独立的代码就可以了，结果只能显示最后一个，前面的都显示为空白（注：其实用两个div容器是完全可行的，之所以有问题是因为复制代码时某些变量重名了）。
从网上的结果来看，echarts是允许同时生成两个图表的。上图中的效果就是根据网上思路来的，代码如下（数据是瞎编的）：
option = {
title: [
{
text: '我的大五人格极性图',
left: 'center'
},
{
text: '中国大五人格维度得分与人群平均分比较',
left: 'center',
top: '51%'
}
],
grid: { x: '32%', y: '57%', width: '38%', height: '38%' },
radar: {
indicator: [
{ name: '神经质', max: 48 },
{ name: '严谨性', max: 48 },
{ name: '宜人性', max: 48 },
{ name: '开放性', max: 48 },
{ name: '外向性', max: 48 }
],
center: ['50%', '30%'],
radius: 180
},
xAxis: [
{
type: 'category',
data: ['神经质', '严谨性', '宜人性', '开放性', '外向性'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
max: 50,
interval: 5
}
],
series: [
{
name: '常模分值 vs 我的分值',
type: 'radar',
data: [
{
value: [31.09, 32.9, 32.6, 36.29, 24.97],
name: '常模分值'
},
{
value: [20, 25, 26, 36, 29],
name: '我的分值'
}
]
},
{
name: '常模分值',
type: 'bar',
data: [31.09, 32.9, 32.6, 36.29, 24.97]
},
{
name: '我的分值',
type: 'line',
data: [20, 25, 26, 36, 29]
}
]
};
不过当我把上述代码放入LimeSurvey后，显示为一片空白。更新echarts代码之后再尝试就可以了。
上述代码能够基本满足我的要求，但是该方法还是有一个小缺陷，就是没有办法使用tooltip组件（注：直接用tooltip: {},，不要指定任何内容是可以的）。
所以用一个或两个DIV容器都是可行的，可能要考虑的还是容器的大小和排版，这个已经超出我的能力范围了。另外，如果使用一个容器的话，图表的颜色是会发生变化的，这一点可能要通过在echarts中为图形指定颜色才能解决。而分成两个DIV容器的话，只要数据呈现的顺序正确，则不会出现这样的问题。
