出现的问题echarts的柱状图图例颜色和下面的矩形颜色不对应，截图如下：
问题原因：系统默认就是legend的颜色和条形的颜色一样的,不过前提条件是你的series 数据的name 属性和legend的 data数组一一对应
修改前的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 在IE运行最新的渲染模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 初始化移动浏览显示 -->
<meta name="Author" content="Dreamer-1.">
<script src="js/jquery.min.js"></script>
<script src="js/echarts-all.js"></script>
<!-- <script src="js/echarts.min.js"></script> -->
<title>柱状图示例</title>
</head>
<body>
<!-- 显示Echarts图表 -->
<div style="height:410px;min-height:100px;margin:0 auto;" id="main"></div>
<script type="text/javascript">
var data = {
key1: "value1",
key2: "value2",
count: 3,
person: [ //数组结构JSON对象，可以嵌套使用
{
id: 1,
name: "张三",
money:9
},
{
id: 2,
name: "李四",
money:19
},
{
id: 3,
name: "王五",
money:29
},
{
id: 4,
name: "赵柳",
money:39
},
{
id: 5,
name: "赵柳",
money:49
},
{
id: 6,
name: "赵柳",
money:59
}
],
object: { //对象结构JSON对象
id: 1,
msg: "对象里的对象"
},
currentDateStr:new Date()
};
/*
*下面注释两行是前面出问题的代码
*/
//obj = $.parseJSON(data);
//var person = obj.person;
var person = data.person;
var money = new Array(); //钱数
var date = data.currentDateStr; //时间
var year = date.getFullYear();
var month = date.getMonth()+1;//js中是从0开始所以要加1
var day = date.getDate();
for (var i = 0; i < person.length; i++) {
money[i] = person[i].money;
}
var barText = "初始化完毕";
var barSubtext = year+ '年' + month + '月' + day +'日';
var xData = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
var legendValue = ['销量','销量2'];
var seriesName = '销量';
var worldMapContainer = document.getElementById('main')
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth+'px';
worldMapContainer.style.height = window.innerHeight+'px';
};
//设置容器高宽
resizeWorldMapContainer();
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(worldMapContainer);
var option = {
//color: ['#ddffee', '#00ffff'],
title : {
text : barText,
subtext: barSubtext
},
tooltip : {},
legend : {
data : legendValue
},
xAxis : {
data : xData,
type : 'category'
},
yAxis : {},
series : [ {
name : seriesName,
type : 'bar',
data : money , //该位置放的是一个数组
barWidth: 30,
itemStyle:{
normal:{
color:'#ddffee'
}
},
label:{
normal:{
show:true,
position:'top'
}
},
} ,
{
name : seriesName,
type : 'bar',
data : money , //该位置放的是一个数组
barWidth: 30,
itemStyle:{
normal:{
color:'#00ffff'
}
},
label:{
normal:{
show:true,
position:'top'
}
},
}]
};
myChart.setOption(option); //载入图表
//用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
resizeWorldMapContainer();
myChart.resize();
};
</script>
</body>
</html>修改后的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 在IE运行最新的渲染模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 初始化移动浏览显示 -->
<meta name="Author" content="Dreamer-1.">
<script src="js/jquery.min.js"></script>
<script src="js/echarts-all.js"></script>
<!-- <script src="js/echarts.min.js"></script> -->
<title>柱状图示例</title>
</head>
<body>
<!-- 显示Echarts图表 -->
<div style="height:410px;min-height:100px;margin:0 auto;" id="main"></div>
<script type="text/javascript">
var data = {
key1: "value1",
key2: "value2",
count: 3,
person: [ //数组结构JSON对象，可以嵌套使用
{
id: 1,
name: "张三",
money:9
},
{
id: 2,
name: "李四",
money:19
},
{
id: 3,
name: "王五",
money:29
},
{
id: 4,
name: "赵柳",
money:39
},
{
id: 5,
name: "赵柳",
money:49
},
{
id: 6,
name: "赵柳",
money:59
}
],
object: { //对象结构JSON对象
id: 1,
msg: "对象里的对象"
},
currentDateStr:new Date()
};
/*
*下面注释两行是前面出问题的代码
*/
//obj = $.parseJSON(data);
//var person = obj.person;
var person = data.person;
var money = new Array(); //钱数
var date = data.currentDateStr; //时间
var year = date.getFullYear();
var month = date.getMonth()+1;//js中是从0开始所以要加1
var day = date.getDate();
for (var i = 0; i < person.length; i++) {
money[i] = person[i].money;
}
var barText = "初始化完毕";
var barSubtext = year+ '年' + month + '月' + day +'日';
var xData = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
var legendValue = ['销量','销量2'];
var seriesName1 = '销量';
var seriesName2 = '销量2';
var worldMapContainer = document.getElementById('main')
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth+'px';
worldMapContainer.style.height = window.innerHeight+'px';
};
//设置容器高宽
resizeWorldMapContainer();
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(worldMapContainer);
var option = {
//color: ['#ddffee', '#00ffff'],
title : {
text : barText,
subtext: barSubtext
},
tooltip : {},
legend : {
data : legendValue
},
xAxis : {
data : xData,
type : 'category'
},
yAxis : {},
series : [ {
name : seriesName1,
type : 'bar',
data : money , //该位置放的是一个数组
barWidth: 30,
itemStyle:{
normal:{
color:'#ddffee'
}
},
label:{
normal:{
show:true,
position:'top'
}
},
} ,
{
name : seriesName2,
type : 'bar',
data : money , //该位置放的是一个数组
barWidth: 30,
itemStyle:{
normal:{
color:'#00ffff'
}
},
label:{
normal:{
show:true,
position:'top'
}
},
}]
};
myChart.setOption(option); //载入图表
//用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
resizeWorldMapContainer();
myChart.resize();
};
</script>
</body>
</html>修改前后的差别：
修改后的效果图如下：
