快速生成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,
            ;zoomOnMouse+Wheel;: 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: {
       
    }
})