echarts趋势图其中X有很多数据只显示其中几个大节点,其中Y轴也有很多数据显示所有节点只突出和X对应的几个大节点,其中的Y轴是数据,X轴是时间
时间: 2024-04-15 21:27:18 浏览: 105
Echarts饼图之数据展示
5星 · 资源好评率100%
要在 ECharts 中创建一个趋势图,并只显示 X 轴的几个大节点,同时突出显示与 X 轴对应的 Y 轴的几个大节点,可以使用以下配置:
```javascript
// 假设有以下数据
const data = [
{ x: '2023-01-01', y: 100 },
{ x: '2023-02-01', y: 150 },
{ x: '2023-03-01', y: 200 },
// ...更多数据
];
// 提取 X 轴和 Y 轴的数据
const xAxisData = data.map(item => item.x);
const yAxisData = data.map(item => item.y);
// 创建 ECharts 实例
const chart = echarts.init(document.getElementById('chart'));
// 配置项
const option = {
xAxis: {
type: 'category',
data: xAxisData,
axisLabel: {
interval: 'auto', // 自动计算间隔显示
formatter: function(value) {
// 只显示大节点
if (value === '2023-01-01' || value === '2023-03-01') {
return value;
} else {
return ''; // 其他节点不显示
}
}
}
},
yAxis: {
type: 'value',
data: yAxisData,
axisLabel: {
formatter: function(value) {
// 只突出显示与大节点对应的数据
if (value === 100 || value === 200) {
return '{value}'; // 加上花括号 {} 可以突出显示
} else {
return value;
}
}
}
},
series: [
{
type: 'line',
data: yAxisData
}
]
};
// 渲染图表
chart.setOption(option);
```
上述代码中,我们使用 `xAxis` 的 `axisLabel.formatter` 属性和 `yAxis` 的 `axisLabel.formatter` 属性来控制 X 轴和 Y 轴的显示方式。只需要在适当的条件下返回要显示的节点值,其他节点值则返回空字符串或原始值即可。
请根据你的实际数据和需求进行修改。记得将 `chart` 替换为你的图表容器的 ID。
阅读全文