折线图上放面积并隐藏XY轴的线-白红宇的个人博客

折线图上放面积并隐藏XY轴的线

发布日期：2021-05-18 11:33:59 浏览次数：10 分类：精选文章

本文共 2137 字，大约阅读时间需要 7 分钟。

项目效果与配置说明

本项目采用ECharts进行数据可视化展示，主要实现了以下功能：

图表交互：通过鼠标悬停 tooltips 准备功能，用户可以便捷地查看数据信息。

横纵轴配置：对图表的横纵轴进行了详细的格式化设置，包括字体颜色、刻度表现等，确保图表外观符合设计要求。

调色盘风格：采用了柔和的配色方案，使整个图表界面更加美观且易读。

数据系列优化：对数据系列进行了独立处理，便于用户对不同数据系列进行单独分析。

以下是具体技术实现代码示例：

option = {    tooltip: {        trigger: 'axis',        boundaryGap: false,        axisPointer: {            type: 'cross',            label: {                backgroundColor: '#6a7985'            }        }    },    grid: {        left: '3%',        right: '4%',        bottom: '3%',        containLabel: true    },    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],        axisLine: {            show: true,            lineStyle: {                color: "#ccc",                width: 0,                type: "solid"            }        },        axisTick: {            show: false        },        axisLabel: {            show: false,            textStyle: {                color: "black"            }        },        splitLine: {            show: false,            lineStyle: {                color: "#ccc"            }        }    },    yAxis: {        type: 'value',        nameTextStyle: {            color: 'blue'        },        axisLabel: {            show: false,            textStyle: {                color: "black",                margin: 15            }        },        axisTick: {            show: false        },        axisLine: {            show: false,            lineStyle: {                color: "#ccc",                width: 1,                type: "solid"            }        },        splitLine: {            show: false,            lineStyle: {                color: "#ccc"            }        }    },    series: [{        data: [120, 200, 150, 80, 70, 110, 130],        type: 'line',        barWidth: 30,        itemStyle: {            normal: {                color: '#4ad2ff'            }        },        showSymbol: false    }]};

本配置文件主要体现了以下技术细节：

** tooltips 维护**：通过设置 axis 作为触发点，实现了当用户在图表悬停时，自动显示数据信息。

索引轴格式：通过 category 数据类型提升坐标轴的呈现效果，使其更符合数据表达需求。

轴线和刻度设置：对坐标轴的外观和底线进行了细致的优化，确保图表视觉效果与设计目标一致。

色彩和样式管理：采用延迟样式加载技术，提升用户体验。

截图展示：

效果图

上一篇：ng-zorro版本问题

下一篇：导出到excel,angular

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

项目效果与配置说明

发表评论

最新留言

关于作者

推荐文章