javascript - Echart:如何设置标记区域以填充 xAxis 中的部分
问题描述
我在标记区域时遇到问题:我需要能够基于 xAxis 选择一个条形区域,例如从 0 到 1、从 1 到 2 等。但是当我尝试为条形提供选项时
[{xAxis: 0, itemStyle: {color: red}},{xAxis: 1}]
它标记一个区域,从索引为 0 的 xAxis 区域的中间到索引为 1 的 xAxis 区域的中间。有没有办法让它从一个区域的开始标记到结束。目前我设法只使用像素中的 x 选项这样做: https ://codesandbox.io/s/react-echart-markarea-ksj31?file=/src/index.js:714-726
有更好的方法吗?
解决方案
我无法想象有一种方法可以满足您的要求。似乎没有这样的,但没有什么可以阻止我们自己做,见下文。
当调用带有join = true
标记区域的函数时,将计算从第一个到最后一个的范围。
calcMarkAreaByBarIndex(myChart, join = true, [4, 9])
当调用带有标记区域的函数时,join = false
将为每个柱计算。
calcMarkAreaByBarIndex(myChart, join = true, [4, 5, 6, 9])
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
xAxis: {
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
},
yAxis: {},
series: [
{
id: 'myBar',
name: 'Series',
type: 'bar',
data: [11, 11, 11, 11, 12, 13, 110, 123, 113, 134, 93, 109],
markArea: {
data: [
[{x: 184},{x: 216}],
[{x: 224},{x: 256}],
]
},
},
]
};
myChart.setOption(option);
function calcMarkAreaByBarIndex(chartInstance, join = false, barIdx){
var series = chartInstance.getModel().getSeriesByType('bar');
var seriesData = series.map((s, idx) => s.getData())[0];
var barNum = seriesData.count();
var barCoors = [];
var layout = idx => seriesData.getItemLayout(idx);
for(var i = 0; i < barNum; i++){
if(!barIdx.includes(i)) continue;
barCoors.push([
{ x: layout(i).x },
{ x: layout(i).x + layout(i).width },
])
}
if(join){
return [
[
{ x: barCoors[0][0].x },
{ x: barCoors[barCoors.length - 1][1].x }
]
]
} else {
return barCoors
}
}
var markedAreas = {
series: {
id: 'myBar',
markArea: {
data: calcMarkAreaByBarIndex(myChart, join = true, [4,9])
}
}
};
myChart.setOption(markedAreas);
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
推荐阅读
- c# - 如何在不使用 ado.net 插入的情况下添加新行
- php - 我创建了 laravel 包并在其他项目中需要我的包。我在项目模型中使用包特征。但我收到此错误 => 未找到特征
- vue.js - 为什么在我的 nuxt-link 中没有重新加载具有相同 url 的页面?
- python - 在 DRF 中获取序列化程序列表时出现 TypeError
- docker - Vidyo 问题:在 mediabrige 容器中,当所有参与者离开时,“呼叫”过程并未结束
- javascript - 无法在节点 js 中使用 facebook-nodejs-business-sdk 模块创建 AdCreative
- php - 如何使用 Laravel 获取选择值文本?
- python - 我正在尝试在终端中运行二进制搜索算法(Python),但没有打印到终端
- java - Spring boot 中的条件 JSON 请求映射
- sql - 添加行而不插入