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 图形的简单配置方法,希望对大家有所帮助,大家如果有更好的实现方案,欢迎在评论区留言交流!

相关推荐
栈老师不回家12 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙17 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠21 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds42 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm