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 '

' + value;
                            //     } else {
                            //         return value;
                            //     }
                            // },

                            formatter: function(value) {
                                debugger;
                                var ret = ''; //拼接加
返回的类目项
                                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) + '
';
                                        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后面我会努力整合好分类。