echarts-多柱子柱状图

来源:互联网 发布:软件功能需求说明书 编辑:程序博客网 时间:2024/03/29 15:26

1、问题背景

     利用ECharts制作一个多柱子柱状图,其中数据源模拟动态获取


2、实现源码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>echarts-多柱子柱状图</title><link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png"><script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script><script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script><style>body,html{width:99%;height: 99%;font-family: "arial, helvetica, sans-serif";font-size: x-large;font-kerning: inherit;font-stretch: expanded;}#manyColumn{width: 100%;height: 100%;font-size: 14px;font-family: "微软雅黑";backface-visibility: visible;background-blend-mode: inherit;background-origin: border-box;background: content-box;background-color: #5BC0DE;}</style><script>$(function(){buildData();});//生成数据function buildData(){var columLabel = ['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'];var columName = ['周一','周二','周三','周四','周五','周六','周日'];var columnValue = new Array();var arrData = new Array();for(var i=0;i<columLabel.length;i++) {for(var j=0;j<columName.length;j++) {arrData.push(Math.floor(Math.random()*1000+1000*j-1000*i));}console.info(arrData);columnValue.push(eval('(' + ("{'name':'"+columLabel[i]+"','type':'bar','data':["+arrData+"]}") + ')'));}buildChart(columLabel,columName,columnValue);}//生成图形function buildChart(columLabel,columName,columnValue){var chart = document.getElementById('manyColumn');                  var echart = echarts.init(chart);                  var option = {    tooltip : {        trigger: 'axis',        axisPointer : {                        type : 'shadow'                }    },     toolbox: {            show : true,            feature : {                saveAsImage : {show: true}            }        },    legend: {        data:columLabel    },    grid: {        left: '3%',        right: '4%',        bottom: '3%',        containLabel: true    },    xAxis : [        {        min:0,            type : 'category',            data : columName        }    ],    yAxis : [        {        min:0,            type : 'value'        }    ],    series : columnValue};echart.setOption(option);}</script></head><body><div id="manyColumn"></div></body></html>

3、实现结果


1 0