Echarts 的几个小需求实现

前端在图表展示的时候,使用较多的是Echart库,正好这几天在做相关的项目,简单记录一下涉及到的几个简单需求实现。

标题前面加图形

效果类似于这样:

我的实现方案是使用 rich 来生成对应的图形,具体配置如下:

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

option = {
    title: {
        text: "{rectangle|} 示例图",
        textStyle: {
            fontSize: 18,
            rich: {
                // 这个地方的key要和上面text后大括号中的名称保持一致!!!
                rectangle: {
                    width: 40,
                    height: 18,
                    backgroundColor: "#7C260B"
                }
            }
        }
    }
};

上面配置需要注意的是 text 中的类似于模板字符串的写法,里面的竖线(|)不能少,如果少了它,那 rectangle 就被解析成一个字符串了。

配置显示的最大个数

假如我们的数据比较多,一次性全部展示出来的话会密密麻麻,用户体验不好,那我们就需要根据需要展示的总条数,计算出需要给用户展示出来的视图百分比范围。

需求:X 轴最多展示的数据不能超过 50 个。

方案:Echarts 的滚动是通过 dataZoom 属性来控制的,每次拿到数据后进行计算,以 50 为判断依据,看是否需要分部展示。

JavaScript 复制代码
// total:总条数
// batch 允许最大显示的条数
function getDataZoomEndValue(total, batch) {
    return IControl.x.length > batch ? Math.ceil(batch * 100 / IControl.x.length) : 100;
}

/** @format */

option = {
    dataZoom: {
        type: "inside",
        start: 0,
        end: getDataZoomEndValue(totalData.length, 50),
        zoomLock: true
    }
};

end 属性确定的就是视图最大百分比。

设置异常点

需求效果如下:

要将一些超出范围的点用不同的颜色标志出来。

方案:使用markPoint属性实现,即在需要标志出来的点上再加一层特殊颜色的点,展示出来的是特殊颜色。

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

markPointData = [
    {
        name: "order_6",
        xAxis: "6",
        yAxis: 1.812
    },
    {
        name: "order_9",
        xAxis: "9",
        yAxis: 1.2
    }
];

option = {
    series: [
        {
            name: "test",
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            data: data,
            z: 4,
            itemStyle: {
                borderWidth: 2,
                borderColor: "#014D64",
                color: "#014D64"
            },
            lineStyle: {
                width: 2
            },
            markPoint: {
                symbol: "circle",
                label: {
                    show: false
                },

                itemStyle: {
                    color: "#7C260B",
                    borderColor: "#7C260B",
                    borderWidth: 2
                },
                symbolSize: 8,
                data: markPointData
            }
        }
    ]
};

需要注意的是,markPoint.itemStyle.borderWidth 和 markPoint.symbolSize 相加必须要大于 symbolSize 与 itemStyle.

borderWidth 之和,否则标出的特殊颜色覆盖不全正常的颜色。

总结

以上就是几个关于 Echart 图形的简单配置方法,希望对大家有所帮助,大家如果有更好的实现方案,欢迎在评论区留言交流!

相关推荐
小池先生9 分钟前
记录让cursor帮我给ruoyi-vue后台管理项目整合mybatis-plus
前端·vue.js·mybatis
Gipsyz12 分钟前
批量修改图片资源的属性。
前端·unity
我头发乱了伢14 分钟前
jQuery小游戏
前端·javascript·jquery
呦呦鹿鸣Rzh1 小时前
Web前端开发
前端
会说法语的猪2 小时前
uniapp使用uni.navigateBack返回页面时携带参数到上个页面
前端·uni-app
古蓬莱掌管玉米的神10 小时前
vue3语法watch与watchEffect
前端·javascript
林涧泣11 小时前
【Uniapp-Vue3】uni-icons的安装和使用
前端·vue.js·uni-app
雾恋11 小时前
AI导航工具我开源了利用node爬取了几百条数据
前端·开源·github
拉一次撑死狗11 小时前
Vue基础(2)
前端·javascript·vue.js
祯民11 小时前
两年工作之余,我在清华大学出版社出版了一本 AI 应用书籍
前端·aigc