最近公司有需求開發一個用於生產車間的資料視覺化平臺的專案，基於公司目前的WEB平臺。

於是採用了之前就使用過幾次的Echart來開發，使用起來也比較熟悉，作為展示也比較方便，故在此記錄一下。

由於本人對於前臺網頁佈局設計也不是很精通，所有開發出來的頁面在美觀方面表現不佳。

正文

1.頁面佈局方面，先上圖

以上就是資料視覺化平臺的其中幾個，對於頁面的佈局，大多采用Bootstrap 的佈局規則進行。

2.使用Echart進行資料視覺化渲染。

使用ajax請求後臺資料。獲取到資料後，再使用echart進行畫圖。這裡省略了echart使用的介紹，詳細的可以參考官網的API文件及Demo。

function GetForeLatterCapacityChart() {
    $.getJSON(ApiUrl + '/api/DataVApi/GetWipChart',
       function (data) {
           $.each(data.charts, function (index, chart) {
               var SeriesLineMachine = [];
               //再畫echart圖
               var option = {
                   title: {
                       text: chart.title + "-前後段WIP",
                       x: 'left',
                       textStyle: {
                           color: '#ccc',
                           fontSize: 12
                       }
                   },
                   tooltip: {
                       show: false
                   },
                   legend: {
                       data: chart.legend,
                       itemHeight: 12,
                       textStyle: {
                           color: '#ccc',
                           fontSize: 10
                       },
                       left: '30%'
                   },
                   xAxis: [{
                       type: 'category',
                       data: chart.xAxis,
                       axisLine: {
                           lineStyle: {
                               color: '#ccc'
                           }
                       },
                       axisLabel: {
                           interval: 0,//橫軸資訊全部顯示
                           fontSize: 10
                       },
                   }],
                   yAxis: [{
                       type: 'value',
                       splitLine: { show: false },//去除網格線
                       min: function (value) {
                           return value.min;
                       },
                       max: function (value) {
                           return value.max;
                       },
                       axisLine: {
                           lineStyle: {
                               color: '#ccc'
                           }
                       },
                       axisLabel: {
                           show: true,
                           fontSize: 10,
                           formatter: '{value}'
                       },
                       //刻度朝內
                       axisTick: {
                           inside: true
                       }
                   }],
                   series: [
                       {
                           name: '前段',
                           type: 'bar',
                           color: '#0083D3',
                           stack: 'WIP',
                           itemStyle: {
                               normal: {
                                   color: '#0083D3'
                               }
                           },
                           label: {
                               normal: {
                                   show: true,
                                   position: 'inside',
                                   align: 'center',
                                   verticalAlign: 'middle',
                                   color: 'white',
                                   borderColor: '#9ACD32',
                                   formatter: function (params) {
                                       if (params.value == '0') {
                                           return '';
                                       } else {
                                           return params.value;
                                       }
                                   }
                               }
                           },
                           data: chart.CapacityForePart
                       },
                            {
                                name: '後段',
                                type: 'bar',
                                color: '#18FFF9',
                                stack: 'WIP',
                                itemStyle: {
                                    normal: {
                                        color: '#18FFF9'
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'inside',
                                        align: 'center',
                                        verticalAlign: 'middle',
                                        color: 'white',
                                        borderColor: '#E0FFFF',
                                        formatter: function (params) {
                                            if (params.value == '0') {
                                                return '';
                                            } else {
                                                return params.value;
                                            }
                                        }
                                    }
                                },
                                data: chart.CapacityLatterPart
                            }
                   ],
                   label: {
                       show: true,
                       position: 'top',
                       textStyle: {
                           color: 'black'
                       }
                   },
                   grid: {
                       left: 24,
                       top: 30,
                       right: 24,
                       bottom: 20
                   }
               };

               if (option && typeof option === "object") {
                   var dom = document.getElementById('WipCa' + index.toString());
                   var WIPCapacityChar = echarts.init(dom);
                   WIPCapacityChar.setOption(option);
               }

               window.addEventListener("resize", function () {
                   WIPCapacityChar.resize();
               });
           });
       });
    
}

　　有時候需求輪播的圖形，可以參考使用Swiper，但是Swiper5對Echart的支援還有點問題。Echart圖形的點選事件會失效。

所有我使用的是Swiper3來對圖形進行定時輪播。Swiper的使用介紹可以參考官網API。API挺詳細的。

var mySwiper0 = new Swiper('.visual_swiper0', {
            loop: true,
            observer: true,
            observeParents: true
        })
setInterval(function () {
            mySwiper0.slidePrev();
        }, 60000);