echarts的区间图例实现方法

最新推荐文章于 2024-06-25 15:34:07 发布

肆爪

最新推荐文章于 2024-06-25 15:34:07 发布

阅读量3.6k

点赞数 2

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/du_5pet/article/details/88419970

版权

本文介绍了如何在echarts中实现数字区间的图例，通过设置visualMap组件的pieces属性，设定每个区间的最大值、最小值及对应颜色，最终达到预期的图表效果。

摘要由CSDN通过智能技术生成

在项目过程中要实现数字区间的图例，例如 0-30 30-40……>75这种的图例，可以用以下方法：


    var option = {
        legend: {
            data: [point_name],//图例是站点名称,数据格式是数组
            right: 'center'
        },
        tooltip: {
            trigger: 'axis',
            formatter: "站点 : {a} <br/>时间 : {b} <br/>Leq : {c} dB(A) ",
            axisPointer:{
                type:'shadow'
            }
        },
        toolbox: {
            feature: {
                restore:{},
                saveAsImage: {
                    name:"历史数据查询"
                },
                dataZoom: {
                    yAxisIndex: 'none'
                }
            }
        },
        xAxis: {
            data: timeArr,
            type:'category',
            axisTick:{
                alignWidthLabel:true
            },
            splitLine: {
                show:true,