{site_name}

{site_name}

🌜 搜索

ECharts是一个用于可视化数据的JavaScript库,singleAxis

前端 𝄐 0
echarts echarts-gl的3d饼图设置饼图大小,echarts echarts-gl的3d饼图的曲面角度,echarts echarts
ECharts是一个用于可视化数据的JavaScript库,singleAxis配置是指在ECharts中单个轴的配置选项,可以实现拖拽手柄来交互式地选择轴的范围。

具体来说,singleAxis配置允许您指定轴类型、轴标签、轴线样式等,并为轴添加拖拽手柄。拖拽手柄可以通过鼠标拖动来调整轴的范围,以便更好地查看数据。

下面是一个简单的示例,其中使用了ECharts中的singleAxis配置和拖拽手柄:

javascript
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false,
axisLine: {
onZero: false
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
},
axisPointer: {
snap: true
}
},
singleAxis: {
top: 50,
bottom: 50,
axisTick: {},
axisLabel: {},
type: 'time',
axisPointer: {
animation: true,
label: {
show: true
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
opacity: 0.2
}
}
},
series: [
{
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);


在上述示例中,singleAxis配置用于指定x轴的类型为时间轴,并添加了拖拽手柄。通过对手柄的拖动,可以交互式地选择要显示的时间范围。