echarts的柱状图为什么变黑了?

<%@ page language="java" import="dbtaobao.connDb,java.util.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
ArrayList<String[]> list = connDb.index_3();
%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>宏观数据可视化分析</title>
<link href="./css/style.css" type='text/css' rel="stylesheet"/>
<script src="./js/echarts.min.js"></script>
</head>
<body>
	<div class='header'>
        <p>宏观数据可视化分析</p>
    </div>
    <div class="content">
        <div class="nav">
            <ul>
                <li><a href="./index.jsp">所有买家各消费行为对比</a></li>
                <li><a href="./index1.jsp">男女买家交易对比</a></li>
                <li class="current"><a href="#">商品类别交易额对比</a></li>
                <li><a href="./index4.jsp">各省份的总成交量对比</a></li>
            </ul>
        </div>
        <div class="container">
            <div class="title">商品类别交易额对比</div>
            <div class="show">
                <div class='chart-type'>柱状图</div>
                <div id="main"></div>
            </div>
        </div>
    </div>
<script>
//基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var x = []
var y = [] 
<%
	for(String[] a:list){
		%>
		x.push('<%=a[0]%>');
		y.push('<%=a[1]%>');
		<%
	}
%>
option = {
		color:'#d87c7c',
		title: {
	        text: '商品类别交易额对比',
	        
	    },
   		tooltip : {
        trigger: 'axis',
        axisPointer : {           
            type : 'shadow'        
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : x,
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
        	
            name:'Value',
            type:'bar',
            barWidth: '60%',
            data:y
        }
    ]
};

myChart.setOption(option);
</script>
</body>
</html>

 

你的color属性换个颜色呗,似乎并没啥问题,在线试了一下

option = {
        color:'#d87c7c',
        title: {
            text: '商品类别交易额对比',
            
        },
           tooltip : {
        trigger: 'axis',
        axisPointer : {           
            type : 'shadow'       
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : [1,23,4],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'Value',
            type:'bar',
            barWidth: '60%',
            data:[1,2,3,4]
        }
    ]
};

 

颜色没配对。。