javascript - eCharts 如何获取 xAxis 数据
问题描述
我在 echart.js 中有一些带有点击事件的代码,如下所示
mytempChart2.on('click', function (params)
//params.seriesName return aktif/non aktif
{window.open('' + encodeURIComponent(params.dataType) + '.html', '_self');
});
我在https://www.echartsjs.com/en/tutorial.html#Events%20and%20Actions%20in%20ECharts上阅读了文档 echart
但我没有找到获取 xAxis 数据的参数,我图表上的 xAxis 数据是日期。
我的完整代码
// ==============================================================
// Line chart
// ==============================================================
var dom2 = document.getElementById("grafik2");
var mytempChart2 = echarts.init(dom2);
var app = {};
option2 = null;
option2 = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['Non-Aktif', 'Aktif Kembali']
},
toolbox: {
show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
color: ["#EF5350", "#2FBF2F"],
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : [01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,],
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value}'
}
}
],
series : [
{
name:'Non-Aktif',
type:'line',
data:[0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],
markPoint : {
data : [
{name: 'tanggal', value: 100},
{type : 'max', name: 'Tertinggi'},
{type : 'min', name: 'Terendah'}
]
},
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.3)',
shadowBlur: 10,
shadowOffsetX: 8,
shadowOffsetY: 8
}
}
},
markLine : {
data : [
{type : 'average', name : 'Rata-rata'}
]
}
},
{
name:'Aktif Kembali',
type:'line',
data:[0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],
markPoint : {
data : [
{type : 'max', name: 'Tertinggi'},
{type : 'min', name: 'Terendah'}
]
},
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.3)',
shadowBlur: 10,
shadowOffsetX: 8,
shadowOffsetY: 8
}
}
},
markLine : {
data : [
{type : 'average', name : 'Rata-rata'}
]
}
}
]
};
if (option2 && typeof option2 === "object") {
mytempChart2.setOption(option2, true), $(function() {
function resize() {
setTimeout(function() {
mytempChart2.resize()
}, 100)
}
$(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
});
}
mytempChart2.setOption(option2);
mytempChart2.on('click', function (params)
//params.seriesName return aktif/non aktif
{window.open('' + encodeURIComponent(params.name) + '.html', '_self');
});
解决方案
您可以使用您object
指定的参数。您需要访问name
在 x 轴上保存值的属性。
请在下面找到工作代码:
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: [{
type: 'category',
boundaryGap: false,
data: [01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ],
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value}'
}
}],
series: [{
name: 'Non-Aktif',
type: 'line',
data: [0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
markPoint: {
data: [{
name: 'tanggal',
value: 100
},
{
type: 'max',
name: 'Tertinggi'
},
{
type: 'min',
name: 'Terendah'
}
]
},
itemStyle: {
normal: {
lineStyle: {
shadowColor: 'rgba(0,0,0,0.3)',
shadowBlur: 10,
shadowOffsetX: 8,
shadowOffsetY: 8
}
}
},
markLine: {
data: [{
type: 'average',
name: 'Rata-rata'
}]
}
},
{
name: 'Aktif Kembali',
type: 'line',
data: [0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
markPoint: {
data: [{
type: 'max',
name: 'Tertinggi'
},
{
type: 'min',
name: 'Terendah'
}
]
},
itemStyle: {
normal: {
lineStyle: {
shadowColor: 'rgba(0,0,0,0.3)',
shadowBlur: 10,
shadowOffsetX: 8,
shadowOffsetY: 8
}
}
},
markLine: {
data: [{
type: 'average',
name: 'Rata-rata'
}]
}
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.on('click', function(params) {
console.log(params.name);
});
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
推荐阅读
- python - 如何修复由于 0 维矩阵导致的 NumPy 点差错误?
- c# - 查看看似忽略可见性转换器的输出
- c++ - 将列和行中的素数打印到文件中
- asp.net-mvc - 具有不同端口号的 IIS 托管站点中的注销问题
- php - php7 中的 GET 和 POST
- vue.js - vue.js 动态添加到组件列表
- c# - 获取给定对话 ID 的令牌
- javascript - 如何将 CKEditor textarea 与字符限制集成?
- angular - 添加新元素时,角度更新现有 FormArray 元素的有效性
- python - sklearn KNeighborsClassifier 评分方法如何工作?