ECharts分段型视觉映射组件的属性修改

简介: ECharts分段型视觉映射组件的属性修改

图表格式如下所示:

现在要修改的是右侧的部分的内容,每段数字改成要具体表达的内容:

在等级区分里面,每段数字之间,需要标注标题说明,代码如下在每一段后面加上 label:'标题'

 visualMap: {
            top: 10,
            right: 10,
            pieces: [{
                gt: 0,
                lte: 50,
                label:'深睡',
                color: '#096'
            }, {
                gt: 50,
                lte: 100,
                label:'熟睡',
                color: '#ffde33'
            }, {
                gt: 100,
                lte: 150,
                label:'浅睡',
                color: '#ff9933'
            },  ],
            outOfRange: {
                color: '#999'
            }
        },

修改之后,可以看到

相关文章
|
3月前
|
资源调度 JavaScript API
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
这篇文章介绍了如何在vue-element-admin项目中引入并封装ECharts组件,以及如何实现折线图、柱状图和饼图的展示。
189 4
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
|
3月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
103 1
|
4月前
Echarts visualMap属性记录
这篇文章是关于ECharts中visualMap属性的详细记录。文中首先定义了visualMap的作用,即进行数据到视觉元素的映射。接着,通过一系列详细的配置参数,如类型、显示控制、数据范围、样式和格式化工具等,介绍了如何配置连续型和分段型visualMap组件。最后,作者通过具体代码示例,说明了如何将这些配置应用于实际的ECharts图表中,以实现数据的视觉编码效果。
194 0
Echarts visualMap属性记录
|
8月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
166 0
|
8月前
|
前端开发 JavaScript
React中封装echarts图表组件以及自适应窗口变化
React中封装echarts图表组件以及自适应窗口变化
237 1
|
JSON 数据格式
Echarts分段折线图图例样式visualMap颜色修改
Echarts分段折线图图例样式visualMap颜色修改
233 1
Echarts tooltip配置项的属性 图表悬浮框
Echarts tooltip配置项的属性 图表悬浮框
|
JSON 数据格式
Echarts折线图分段用不同颜色显示
Echarts折线图分段用不同颜色显示
152 0
|
JSON 小程序 前端开发
小程序Echarts图表组件使用
小程序Echarts图表组件使用
86 0
|
3月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
682 0

热门文章

最新文章