Echarts 添加滾動條並且x軸雙標簽跟隨移動

用Echarts開發公司大屏項目不知不覺一年已經做了兩三個了

一些甲方的需求有時候真的需要硬着頭皮去努力實現。用到現在，還是覺得吧Echarts配置項手冊的屬性一個一個過一遍腦海里有印象，老板問你能不能實現這樣的功能時就直接能給出一個准確的說法。

說白了，應用型開發就是這樣，文檔必須看。一些奇怪的功能總能找到，提出並且自己親手開發過腦子有印象，沒有的話就自己多翻一翻文檔手冊。

主要代碼：

xAxis: [
                    {
                        type: 'category',
                        color: '#fff',
                        axisLabel: {
                            show: true,
                            color: '#C4C4C4',
                            margin: 80,
                            fontSize: 12,
                            padding: [6, 10, 4, 10],
                            backgroundColor: 'rgba(255,255,255,0.12)',
                        },
                        data: this.X_Data,
                    },
                    {
                        type: 'category',
                        position: 'bottom',
                        axisLabel: {
                            show: true,
                            color: '#fff',
                            margin: 20,
                            fontSize: 15,
                            // formatter: function(value, index) {
                            //     // debugger;
                            //     if (index % 2 != 0) {
                            //         return '\n\n' + value;
                            //     } else {
                            //         return value;
                            //     }
                            // },

                            formatter: function(value) {
                                debugger;
                                var ret = ''; //拼接加\n返回的類目項
                                var maxLength = 4; //每項顯示文字個數
                                var valLength = value.length; //X軸類目項的文字個數
                                var rowN = Math.ceil(valLength / maxLength); //類目項需要換行的行數
                                if (rowN > 1) {
                                    //如果類目項的文字大於3,
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = ''; //每次截取的字符串
                                        var start = i * maxLength; //開始截取的位置
                                        var end = start + maxLength; //結束截取的位置
                                        //這里也可以加一個是否是最后一行的判斷，但是不加也沒有影響，那就不加吧
                                        temp = value.substring(start, end) + '\n';
                                        ret += temp; //憑借最終的字符串
                                    }
                                    return ret;
                                } else {
                                    return value;
                                }
                            },
                        },
                        data: this.X_Data2,
                    },
                ],

dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 45,
                        height: 8, //組件高度
                        left: 0, //左邊的距離
                        right: 0, //右邊的距離
                        bottom: 0, //右邊的距離
                        handleColor: '#ddd', //h滑動圖標的顏色
                        handleStyle: {
                            borderColor: '#cacaca',
                            borderWidth: '1',
                            shadowBlur: 2,
                            background: '#ddd',
                            shadowColor: '#ddd',
                        },
                        fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                            {
                                //給顏色設置漸變色 前面4個參數，給第一個設置1，第四個設置0 ，就是水平漸變
                                //給第一個設置0，第四個設置1，就是垂直漸變
                                offset: 0,
                                color: '#1eb5e5',
                            },
                            {
                                offset: 1,
                                color: '#5ccbb1',
                            },
                        ]),
                        backgroundColor: '#ddd', //兩邊未選中的滑動條區域的顏色
                        showDataShadow: false, //是否顯示數據陰影 默認auto
                        showDetail: false, //即拖拽時候是否顯示詳細數值信息 默認true
                        xAxisIndex: [0, 1]
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 0,
                        end: 45,
                    },
                ],

xAxisIndex: [0, 1] 就是主要實現代碼。

 

 關於Echats后面我會努力整合好分類。