Echart的图标真的很漂亮，使用也相对简单。但是官网的配置项的例子感觉有所保留。
在作柱状图的时候，我是通过Ajax动态获取的数据，但是图例legend就是不显示出来，其实到现在我也还没弄明白，为啥不显示。
下面贴一下我百度的可能的方案（这些都没有解决我的问题）：
- echart.js下的精简版，不支持图例 --可以自定义下载对应的组件；
- legend的data数据需要是对象数组，自行检查是否符合；
下面贴一下我动态数据的实例：
Ajax获取值：
$(document).ready(function(){
var xData = [],yData=[];
$.ajax({
type: 'post',
url: '',
data:{},
dataType: 'json',
success: function(data){
if(data){
$.each(data,function(index,item){
xData.push(item.subject);
yData.push(item.count);
});
bindData(xData,yData);
}
},
error: function(){
alert('Error');
}
});
});
数据传值给data:
function bindData(xData,yData){
var chart = document.getElementById('bar');
var myBarChart = echarts.init(chart);
var option = {
title : {
text: '培训主题统计信息',
x: 'center',
},
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
legend: {
show: true,
data: (function(){
var res = [];
var len = xData.length;
for(var i=0,size=len;i<size;i++) {
res.push({
name: xData[i],
textStyle:{
fontSize: 12,
color: '#ccc'
}
});
}
return res;
})()
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data: xData,
axisLabel: {
interval : 0,
rotate: -15
},
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name: '培训主题选择人数',
type:'bar',
data: yData,
barWidth: '50%',
markLine : {
data : [
{
type : 'max',
name: '最大值',
lineStyle: {
color: '#f00'
}
}
],
label : {
position: 'end',
formatter: '{b}:{c}'
}
},
itemStyle : {
normal: {
label: {
show: true,
textStyle: {
fontWeight: 'bolder',
fontSize: '12',
fontFamily: '微软雅黑'
},
position: 'top'
},
color: function (params) {
var colorList = [
'#FFB273', '#1D7373', '#BF7130', '#FF7400',
'#FF7373', '#006363'
];
return colorList[params.dataIndex]
}
}
}
}
]
};
myBarChart.setOption(option);
}