Echart的使用legend遇到的问题小记
2024-09-10 22:52:02
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);
}
最新文章
- Centos7更新firefox
- Xcode常用技巧(1)-使用Xcode进行代码分析及GDB调试
- Mysql数据库优化
- java之内部类(InnerClass)----非静态内部类、静态内部类、局部内部类、匿名内部类
- hibernate criteria中Restrictions的用法
- MVC文件夹
- 【PHP设计模式 09_ZhuangShiQi.php】装饰器模式 (decorator)
- 转：浅析基于微软SQL Server 2012 Parallel Data Warehouse的大数据解决方案
- SpringMVC(三) —— 参数绑定和数据回显
- html5权威指南：标记文字
- (转)SQLServer_十步优化SQL Server中的数据访问一
- Ruby on Rails 开发笔记
- 转发： windows如何管理内存
- Node+GitLab实现小程序CI系统
- charles License
- 剑指Offer 42. 和为S的两个数字 （其他）
- python 之模块之 xml.dom.minidom解析xml
- SQL2008数据库导出到SQL2000全部步骤过程
- NYOJ--703
- 3DMAX 处理反面