27304098 2021-05-10 10:33 采纳率: 53.3%
浏览 355
已结题

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>

 

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2021-05-10 10:41
    关注

    你的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]
            }
        ]
    };
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月4日
  • 已采纳回答 4月26日

悬赏问题

  • ¥15 evo评估时曲线出现问题
  • ¥15 eNSP拓扑图配置实验
  • ¥20 有没有兄弟会替换fmod studio的.bank文件内的音效?
  • ¥20 如何解决访问网址被屏蔽的情况
  • ¥15 本地运行的vue2项目,使用内网穿透,前端界面一直转圈圈
  • ¥20 powerbuilder datawindow控件导出Excel数据,可不可以不自动覆盖原数据,而是在后面新插入入数据。
  • ¥100 无轴承永磁同步电机控制
  • ¥15 eps里添加本地倾斜模型
  • ¥15 telegram 问题
  • ¥15 nrf52810-c三个a 程序