{site_name}

{site_name}

🌜 搜索

ECharts singleAxis 组件是一个用于展示单维数据的组件,常用于时间轴、数值轴等场景中

前端 𝄐 0
echarts echarts-gl的3d饼图设置饼图大小,echarts echarts-gl的3d饼图的曲面角度,echarts echarts
ECharts singleAxis 组件是一个用于展示单维数据的组件,常用于时间轴、数值轴等场景中。其基本使用步骤为:

1. 在 ECharts 初始化时引入 singleAxis 组件。
2. 在 option 中配置 singleAxis 组件相关属性,包括坐标轴类型、轴线样式、刻度线样式等。
3. 在 series 中使用 singleAxis 组件指定要展示的数据,并配置相应的图表类型和样式。

以下是一个展示某城市一周内温度变化的例子:

javascript
// 引入 ECharts 和 singleAxis 组件
import echarts from 'echarts';
import 'echarts/singleAxis';

// 初始化 ECharts 实例
const myChart = echarts.init(document.getElementById('myChart'));

// 配置 singleAxis 组件属性
const singleAxis = {
type: 'time',
axisLine: {
lineStyle: {
color: '#999'
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
};

// 配置图表 option
const option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [{
type: 'line',
symbolSize: 8,
label: {
show: true,
position: 'top'
},
data: [22, 25, 23, 28, 26, 24, 21],
singleAxisIndex: 0 // 指定使用第一个 singleAxis 组件
}],
singleAxis: [singleAxis] // 配置使用的 singleAxis 组件
};

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


在这个例子中,我们首先引入了 ECharts 和 singleAxis 组件,然后初始化了一个 ECharts 实例。接着我们配置了一个 type 为 'time' 的 singleAxis 组件,并在 option 中指定要展示的数据和使用的单个轴组件。最后,在 series 中指定要展示的数据、图表类型和样式,并通过 singleAxisIndex 属性将数据与指定的 singleAxis 组件关联起来。最终我们使用 setOption 方法将配置项和数据应用到图表中进行展示。