快速生成echarts基础配置 ——（包含拖拽）

---

前言

提示：关于echarts问题

最近项目中，遇到一些echarts图表的问题，简单的柱状图、折线图不在多说，直接进入官网粘贴代码就直接ok

今天总结一下近期echarts中，拖拽图表，近期写项目迫不得已看了看echarts的配置文档，也就自己封装了下方法，可以快速的生成一个图表（当然，只是一个简单的配置），如果你有能力，可以在我的基础上进行改造

---

提示：快速生成echarts配置项

以下代码中的 dataZoom 是echarts中拖拽的配置，不需要可以直接delete

一、封装一个生成echarts基础配置的方法

initViewConfig(dataInfo) {
    let {
        xAxis: {
            name: xname,
        },
        yAxis: {
            name: yname,
            yAxisInfo
        },
        series: {
            data,
            type,
            seriesInfo
        },
        dataZoom: {
            filterMode,
            // maxSpan
            endValue,
            minValueSpan,
            maxValueSpan
        },
        visualMap
    } = dataInfo


    let a = {
        "legend": {
            "top": 0,
            "textStyle": {
                "fontSize": uni.getSystemInfoSync().platform == 'ios' ? 12 : 10
            }
        },
        "xAxis": {
            "type": "category",
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#333",
                    "fontSize": uni.getSystemInfoSync().platform == 'ios' ? 12 : 10
                }
            },
            "axisTick": {
                "alignWithLabel": true
            },
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#E1E1E1"
                }
            },
            "name": xname, // 
            "nameTextStyle": {
                "color": "#676266",
                "padding": [0, 0, 0, -10]
            },
            // "splitNumber": 6
        },
        "yAxis": {
            "type": "value",
            "name": yname, // 
            "nameTextStyle": {
                "color": "#676266",
                "padding": [0, 0, 0, 32]
            },
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#E1E1E1"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#333"
                }
            },
            ...yAxisInfo
        },
        "tooltip": {
            "trigger": "axis"
        },
        "grid": {
            "right": "56",
            "top": 32
        },
        "series": [{
            "data": data, // 
            "type": type, // 
            "bottom": 25,
            "showSymbol": false,
            ...seriesInfo
        }],
        "dataZoom": [{
            "height": 14,
            "type": "slider",
            "xAxisIndex": [0],
            "left": "0%",
            "right": "0%",
            "bottom": 34,
            "handleSize": 16,
            "fillerColor": "#478BFF",
            "backgroundColor": "#DCDEE3",
            "showDataShadow": false,
            "showDetail": false,
            "rangeMode": ["value", "value"],
            "filterMode": filterMode || "filter", //
            "moveHandleStyle": {
                "color": "#fff"
            },
            "zoomLock": true,
            "start": 0,
            // "minSpan": 75,
            // "maxSpan": maxSpan || 75,
            "startValue": 0, // 从头开始。
            'endValue': endValue || 5, // 一次性展示6个。
            'minValueSpan': minValueSpan || 5, // 放大到最少几个
            'maxValueSpan': maxValueSpan || 5, //  缩小到最多几个
            // "minSpan": minSpan || 50,
            // "maxSpan": maxSpan || 50,
            "handleStyle": {
                "color": "#478BFF",
                "borderColor": "#478BFF"
            },
            // 是否开启刷选功能。在下图的 brush 区域你可以按住鼠标左键后框选出选中部分。
            "brushSelect": false,
            "zoomOnMouseWheel": false, //鼠标移动能触发数据窗口平移
            "moveOnMouseMove": false, //鼠标移动能触发数据窗口缩放
            "realtime": false,
        }],
        "visualMap": visualMap,
        // 'animation': false,
    }

    return a
}

二、使用步骤

let lineEcharts = this.initViewConfig({
    xAxis: {
        name: "如厕时间",
    },
    yAxis: {
        name: "如厕时间(分钟)"
    },
    series: {
        data: data.toiletFootMark.dataArray,
        type: "bar",
    },
    dataZoom: {
       
    }
})

总结

简单封装了下，利用结构赋值、拓展运算符等，不需要的配置项直接delete就可以，暂时就这么多~~后续补充！