Echarts 小需求实现

接上次的Echarts需求实现,本次再总结几个配置实现的方案。

修改图例组件

本次针对图例组件的修改主要涉及:

  • 修改图例大小
  • 去掉图例上的小圆圈

图例的相关配置都在 option.legend 属性中。

修改图例大小

比如图例宽度太小,想要让它显示的大一些。

javascript 复制代码
/** @format */

option = {
    legend: {
        itemWidth: 60
    }
};

效果如下:

去掉图例上的小圆圈

有些时候,我们不想让图例上显示小圆圈,可以这样配置:

javascript 复制代码
/** @format */

option = {
    legend: {
        itemHeight: 0
    }
};

效果如下:

双坐标轴注意事项

一般常用的双(或多)Y 坐标轴,常见场景是两种类型的值相差较大,使用一个坐标轴会影响视觉体验,这时候就可以考虑使用多坐标轴。

比如下面这个图的观看体验就很不好:

我们来将 'Step Start' 和 'Step Middle' 分别对应一个Y轴以优化体验,配置如下:

javascript 复制代码
/** @format */

option = {
    xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: [
        {
            name: "Step Start",
            type: "value"
        },
        {
            name: "Step Middle",
            type: "value",
            position: "right",
            alignTicks: true,
            offset: 80,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "green"
                }
            },
            axisLabel: {
                formatter: "{value} ml"
            }
        },
        {
            name: "Step End",
            type: "value",
            position: "right",
            alignTicks: true,
            // offset: 80,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "green"
                }
            }
        }
    ],
    series: [
        {
            name: "Step Start",
            type: "line",
            step: "start",
            yAxisIndex: 0,
            data: [1200, 1320, 1010, 1340, 900, 2300, 2100]
        },
        {
            name: "Step Middle",
            type: "line",
            step: "middle",
            yAxisIndex: 1,
            offset: 200,
            data: [22, 28, 20, 23, 29, 43, 41]
        },
        {
            name: "Step End",
            type: "line",
            step: "end",
            yAxisIndex: 2,
            data: [45000, 43200, 40100, 45400, 59000, 53000, 51000]
        }
    ]
};

重点:

  • option.yAxis 是数组形式,规定了三个 Y 坐标轴;
  • option.series 中的每组数据,使用了 yAxisIndex 属性来表示对应的是哪个坐标轴,其值为 option.yAxis 中对应坐标轴的下标。

总结

这些配置本身没什么难度,查查文档都能找到对应的配置项,之所以记录下来主要是自己的工作习惯就是如此,

相关推荐
brzhang44 分钟前
为什么 OpenAI 不让 LLM 生成 UI?深度解析 OpenAI Apps SDK 背后的新一代交互范式
前端·后端·架构
brzhang1 小时前
OpenAI Apps SDK ,一个好的 App,不是让用户知道它该怎么用,而是让用户自然地知道自己在做什么。
前端·后端·架构
井柏然2 小时前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
IT_陈寒3 小时前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
井柏然3 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊3 小时前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang3 小时前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..4 小时前
通过git拉取前端项目
java·前端·git·vscode·拉取代码
智能化咨询4 小时前
玩转ClaudeCode:通过Chrome DevTools MCP实现高级调试与反反爬策略
前端·chrome·chrome devtools
Roadinforest4 小时前
水墨风鼠标效果实现
前端·javascript·vue.js