【统计图】Echarts实现多条折线图渐变堆叠效果

简介: 【统计图】Echarts实现多条折线图渐变堆叠效果



initSgLineChart() {
    // 基于DOM,初始化echarts实例(注意!Vue的DOM日怪的很,一般要腾个1秒才加载完)
    this.lineChart = this.$echarts.init(
        document.getElementById("sg-line-chart")
    );
    onresize=()=>{
        this.lineChart.resize();//当页面大小变化→图标对应变化
    }
    // 绘制折线图(曲线图)
    this.lineChart.setOption({
        grid: {
            left: 23,
            top: 30,
            right: 22,
            bottom: 10,
            containLabel: true//false是依据坐标轴来对齐的,true是依据坐标轴上面的文字边界来对齐
        },
        legend: {
            top: -2,
            right: 20,
            itemGap: 5,//图例每项之间的间隔
            height: 10,
            itemWidth: 15,//图例标记的图形宽度
            itemHeight: 10,
            padding: [5, 0, 0, 0],
            textStyle: {
                padding: [1, 0, 0, -5]
            },
            data: [
                { name: "实到", textStyle: { color: "#18c196" } },
                { name: "迟到", textStyle: { color: "#ff976a" } },
                { name: "旷课", textStyle: { color: "#f15441" } },
                { name: "请假", textStyle: { color: "#0089ff" } }
            ]
        },
        xAxis: {
            type: "category",
            boundaryGap: false, //防止统计图左侧和纵轴有间隙
            axisLabel: { textStyle: { color: "gray" } },
            axisTick: { show: false }, //隐藏横坐标刻度小线条
            splitLine: {
                show: true,
                lineStyle: { color: ["#f0f0f0"] } //纵向分割线
            },
            axisLine: { lineStyle: { color: "lightgray", width: 1 } },
            data: ["7/6", "7/7", "7/8", "7/9", "7/10"]//横坐标的标签文字
        },
        yAxis: {
            type: "value",
            name: "人数/日期",
            min: 0,
            minInterval: 1,
            nameLocation: "end",
            nameTextStyle: { color: "gray", fontSize: "12" },
            axisLabel: { textStyle: { color: "gray" } },
            axisTick: { show: false }, //隐藏纵坐标刻度小线条
            splitLine: {
                show: true,
                lineStyle: { color: ["#f0f0f0"] } //横向分割线
            },
            axisLine: { lineStyle: { color: "lightgray", width: 1 } }
        },
        series: [
            {
                name: "实到",
                smooth: false, //平滑
                type: "line",
                symbolSize: 10, //折线拐点大小
                data: [41, 51, 55, 58, 49],//纵坐标值
                itemStyle: {
                    normal: {
                        color: "#18c196", //图例颜色
                        borderWidth: 4,
                        borderColor: "#18c196",
                        lineStyle: { color: "#18c196", width: 2 }
                    }
                },
                areaStyle: {
                    normal: {
                        // 渐变填充色(线条下半部分)
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#18c196" },
                            { offset: 1, color: "#18c19600" }
                        ])
                    }
                }
            },
            {
                name: "迟到",
                smooth: false, //平滑
                type: "line",
                symbolSize: 0, //折线拐点大小
                data: [3, 6, 3, 1, 1],//纵坐标值
                itemStyle: {
                    normal: {
                        color: "#ff976a", //图例颜色
                        borderWidth: 2,
                        borderColor: "#ff976a",
                        lineStyle: { color: "#ff976a", width: 1 }
                    }
                },
                areaStyle: {
                    normal: {
                        // 渐变填充色(线条下半部分)
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#ff976a" },
                            { offset: 1, color: "#ff976a00" }
                        ])
                    }
                }
            },
            {
                name: "旷课",
                smooth: false, //平滑
                type: "line",
                symbolSize: 0, //折线拐点大小
                data: [1, 3, 1, 0, 4],//纵坐标值
                itemStyle: {
                    normal: {
                        color: "#f15441", //图例颜色
                        borderWidth: 2,
                        borderColor: "#f15441",
                        lineStyle: { color: "#f15441", width: 1 }
                    }
                },
                areaStyle: {
                    normal: {
                        // 渐变填充色(线条下半部分)
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#f15441" },
                            { offset: 1, color: "#f1544100" }
                        ])
                    }
                }
            },
            {
                name: "请假",
                smooth: false, //平滑
                type: "line",
                symbolSize: 0, //折线拐点大小
                data: [5, 0, 1, 1, 6],//纵坐标值
                itemStyle: {
                    normal: {
                        color: "#0089ff", //图例颜色
                        borderWidth: 2,
                        borderColor: "#0089ff",
                        lineStyle: { color: "#0089ff", width: 1 }
                    }
                },
                areaStyle: {
                    normal: {
                        // 渐变填充色(线条下半部分)
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#0089ff" },
                            { offset: 1, color: "#0089ff00" }
                        ])
                    }
                }
            }
        ]
    });
    // 点击折线图拐点
    this.lineChart.off("click"); //先移除,再点击(这行代码是为了防止重复绑定触发点击事件)
    this.lineChart.on("click", "series.line", params => {
        this.$parent.tempData.attendanceTeacher.form = this.form;
        this.$parent.tempData.attendanceTeacher.query = {
            KC: this.KC,
            BJ: this.BJ,
            RQ: params.name,
            KCRQFW: this.KCRQFW
        };
        this.$router.push({
            path: "/attendanceTeacherHistoryDetail",
            query: this.$parent.tempData.attendanceTeacher.query
        }); //折线点点击后,可具体查看本次课程的具体签到情况。
    });
},


相关文章
|
3天前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
18 0
|
3天前
|
JavaScript 应用服务中间件 nginx
【报错】nginx部署项目后Echarts折线图无法展示
在Vue3+TS+Arco项目中,打包后使用Nginx部署的Echarts折线图显示异常,报`Cannot read properties of undefined(reading 'setOption')`错误。问题源于在定义div时使用了Vue2的`$refs`语法,导致DOM元素无法正确初始化Echarts。解决方法有两种:1) 不推荐使用`document.getElementById`获取DOM并初始化Echarts;2) 推荐在Vue3中通过`ref`获取DOM,在`onMounted`中使用`echarts.init`并借助`nextTick`异步绘制数据。
|
3天前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
25 0
|
3天前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
6月前
|
JSON 数据格式
Echarts统计图x轴实现拉伸滑动
Echarts统计图x轴实现拉伸滑动
59 1
|
6月前
|
JSON 数据格式
ECharts折线图渲染json格式数据(格式为对象)
ECharts折线图渲染json格式数据(格式为对象)
57 0
|
6月前
|
JSON 数据格式
ECharts折线图渲染json格式数据(格式为数组)
ECharts折线图渲染json格式数据(格式为数组)
51 0
|
6月前
|
JSON 数据格式
Echarts折线图的折线实线设置成虚线
Echarts折线图的折线实线设置成虚线
97 0
|
6月前
|
JSON 数据格式
Echarts+ajax实现一个简单折线图
Echarts+ajax实现一个简单折线图
36 0
|
3天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
32 0