echarts 标尺相关参数(visualMap属性设置)

简介: echarts 标尺相关参数(visualMap属性设置)

echarts 标尺相关参数(visualMap属性设置)


一、效果图

二、设置代码

visualMap: {
                min: 0,
                max: 350,
                text: ['High', 'Low'],//两端的文本
                realtime: false,
                calculable: true,
                itemWidth: 20, //图形的宽度,即长条的宽度。
                itemHeight: 90, //图形的高度,即长条的高度。
                align: "auto", //指定组件中手柄和文字的摆放位置.可选值为:‘auto’ 自动决定。‘left’ 手柄和label在右。‘right’ 手柄和label在左。‘top’ 手柄和label在下。‘bottom’ 手柄和label在上。
                left: "80%", //组件离容器左侧的距离,‘left’, ‘center’, ‘right’,‘20%’
                top: "40% ", //组件离容器上侧的距离,‘top’, ‘middle’, ‘bottom’,‘20%’
                right: "auto", //组件离容器右侧的距离,‘20%’
                bottom: "auto", //组件离容器下侧的距离,‘20%’
                orient: "vertical", //图例排列方向
                inRange: {
                    color: ['lightskyblue', 'yellow', 'red']
                }
相关文章
echarts设置单位的偏移
echarts设置单位的偏移
|
1月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
58 2
|
2月前
Echarts visualMap属性记录
这篇文章是关于ECharts中visualMap属性的详细记录。文中首先定义了visualMap的作用,即进行数据到视觉元素的映射。接着,通过一系列详细的配置参数,如类型、显示控制、数据范围、样式和格式化工具等,介绍了如何配置连续型和分段型visualMap组件。最后,作者通过具体代码示例,说明了如何将这些配置应用于实际的ECharts图表中,以实现数据的视觉编码效果。
49 0
Echarts visualMap属性记录
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
6月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
133 0
|
6月前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
564 0
|
6月前
|
JavaScript 数据可视化 前端开发
ECharts 的配置语法:配置选项、数据格式、样式设置
ECharts 的配置语法:配置选项、数据格式、样式设置
476 1
echarts设置多条折线不是你想的那样简单
echarts设置多条折线不是你想的那样简单
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts设置暂无数据
echarts设置暂无数据

热门文章

最新文章