jQuery插件echarts實現的多柱子柱狀圖效果示例【附demo源碼下載】

2019-11-19 17:19:26

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery插件echarts實現的多柱子柱狀圖效果。分享給大家供大家參考，具體如下：

1、問題背景：

利用ECharts制作一個多柱子柱狀圖，其中數據源模擬動態獲取

2、實現源碼：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>echarts-多柱子柱狀圖</title>    <script type="text/javascript" src="jquery-1.4.2.min.js" ></script>    <script type="text/javascript" src="echarts.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、實現效果圖：