eCharts图中的toolBox以及滚动条、以及其中的点击事件、文字排序localeCompare、给elementUI中的表格添加双击事件

eCharts图中的相关操作

eCharts图中是可以添加工具栏的，需要使用到toolBox属性，还可以在图中添加滑块，用于展示各个部分的内容，需要使用dataZoom属性
我们还可以实现一个点击图表中的内容，实现相关操作的功能，我们给这个元素绑定个事件
以下是定义的实现图表的方法，声明以后，使用一下即可

        initChart(e) {
            let myChart = echarts.init(document.getElementById("chartBox")) // 初始化
            let zoomShow=false;  // 滚动条是否出现
            if (e.data.length > 14) {   // 当数据超过14个时，出现
                zoomShow = true
            } else {
                zoomShow = false
            }
            myChart.setOption({
                title: {
                    text: "自适应图表"
                },
                legend: {
                    show: true,
                    icon: 'circle'
                },
                xAxis: {
                    type: 'category',
                    name: "月份",
                    data: e.xData // 将x轴的数据传入
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: true
                    }
                },
                tooltip: {
                    show: true,
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                        axis: "auto"
                    }
                },
                axisPointer: {
                    show: true
                },
                toolbox: { // 工具盒
                    show: true,
                    feature: { // 工具
                        saveAsImage: { // 保存图片
                            type: "png"
                        },
                        restore: { // 复原
                            show: true
                        },
                        dataView: { // 显示数据
                            show: true
                        }
                    }
                },
                dataZoom: [//滚动条
                    {
                        show: zoomShow, // 是否显示
                        type: 'slider',
                        realtime: true,
                        startValue: 0,
                        endValue: 14,
                        xAxisIndex: [0],
                        bottom: '10',
                        left: '30',
                        height: 10,
                        borderColor: 'rgba(0,0,0,0)',
                        textStyle: {
                            color: '#05D5FF',
                        },
                    },
                ],
                series: [
                    {
                        type: "line",
                        smooth: "true",
                        data: e.data // 将数据传入
                    }
                ]
            })
            window.onresize = function () {  // 当屏幕尺寸发生变化时，图表尺寸同时发生改变
                myChart.resize()
            }
            myChart.on("click", () => { // 定义点击事件，这里是点击跳出一个消息提示，这里是折线图，需要点击到代表数据的那个点才会弹出
                this.$message.success("成功了")
            })
        },

文字排序

实现按照首字母、拼音进行排序

		let textList= ["纸张", "爱情", "小时", "四", "五"],
        textList.sort((a, b) => {
            return a.localeCompare(b)
        })

elementUI中的表格添加双击事件

    <template #default="scope">
          <div @dblclick="edit(scope.row)"> // 给这个div绑定双击事件
				// 表格内容
          </div>
    </template>

总结

这次就分享这么多吧，本来准备再整理一个grid布局的，但是想偷点懒，直接把我找到的博文分享一下吧。
grid布局一
grid布局学习二
这两个资料结合在一起看是比较清晰的