echarts柱状图X轴数据拼接table关联实现效果

六月初六月初 Echarts 2019-09-21 16:51:07

echarts柱状图关联table表格实现隐藏X轴数据使用table表头来代替X轴的数据

最终效果图：


效果图完整代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.         <!-- <script src="https://cdn.staticfile.org/echarts/4.2.0-rc.2/echarts.min.js"></script> -->
  8.         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  9.         <script src="echarts.min.js"></script>
  10.         <style>
  11.             *{
  12.                 padding: 0;
  13.                 margin: 0;
  14.             }
  15.             table{
  16.                 border-spacing: 0;
  17.                 border-collapse: collapse;
  18.                 table-layout:fixed
  19.             }
  20.         </style>
  21.         <script>
  22.             $(function(){
  23.                 $("th").eq(0).css('width','98px')
  24.                 $("th").not(":first").width(parseInt(($("#test").width()-98)/12))
  25.             })
  26.         </script>
  27.     </head>
  28.     <body>
  29.         <div id="test" style="height: 500px;width: 100%;"></div>
  30.         <table width="100%" border="1" bordercolor="#999" cellspacing="0" cellpadding="0">
  31.             <tr>
  32.                 <th>Header</th>
  33.                 <th>1月</th>
  34.                 <th>2月</th>
  35.                 <th>3月</th>
  36.                 <th>4月</th>
  37.                 <th>5月</th>
  38.                 <th>6月</th>
  39.                 <th>7月</th>
  40.                 <th>8月</th>
  41.                 <th>9月</th>
  42.                 <th>10月</th>
  43.                 <th>11月</th>
  44.                 <th>12月</th>
  45.             </tr>
  46.             <tr>
  47.                 <td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
  48.             </tr>
  49.         </table>
  50.         <script>
  51.             var dom = document.getElementById('test');
  52.             var myChart = echarts.init(dom);
  53.             var app = {};
  54.             option = null;
  55.             option = {
  56.                 grid: {
  57.                     left: 100,
  58.                     right: 0,
  59.                     bottom: 0
  60.                 },
  61.                 tooltip: {
  62.                     trigger: 'axis'
  63.                 },
  64.                 // legend: {
  65.                 //     data: lengthData
  66.                 // },
  67.                 calculable: true,
  68.                 xAxis: [{
  69.                     type: 'category',
  70.                     "show": false,
  71.                     data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  72.                 }],
  73.                 yAxis: [{
  74.                     type: 'value'
  75.                 }],
  76.                 series: [{
  77.                         name: '蒸发量2',
  78.                         type: 'bar',
  79.                         data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
  80.  
  81.                     },
  82.                     {
  83.                         name: '降水量2',
  84.                         type: 'bar',
  85.                         data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
  86.  
  87.                     }
  88.                 ]
  89.             };
  90.             if (option && typeof option === "object") {
  91.                 myChart.setOption(option, true);
  92.             }
  93.         </script>
  94.     </body>
  95. </html>
Collapse Code

关键点解析：

1、设置table-layout属性，避免table设置的宽度不能正常生效

  1. table-layout:fixed
Collapse Code

2、设置tabel第一列为固定宽度，后面12个月所占的列等比宽度

3、 设置echarts距离左边为固定宽度，底部距离为零

  1. grid: {
  2.     left: 100,
  3.     right: 0,
  4.     bottom: 0
  5. },
Collapse Code

结语：简单的说就是设置了echarts距离左边的宽度等于表格中第一列的宽度，剩余12个月的宽度通过计算来等比设置。

铁子们，抗不住了。点点广告可好，感谢您的支持。
六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！