echarts2添加点击事件+条形图单条背景

最新推荐文章于 2025-05-23 14:27:11 发布

原创最新推荐文章于 2025-05-23 14:27:11 发布 · 4.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #click

echarts 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Echarts2中添加点击事件并设置条形图单条背景。通过示例代码展示了如何配置图表，包括条形图的宽度、颜色以及背景的透明度，并提供了一个点击事件监听函数，展示如何获取当前点击的条形图索引。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址（可参考）：https://github.com/ybx13579/echarts2-demo

1、body内写元素

<div id="abcd" style="width:1300px;height:360px; "></div>

2、写JS

//首先引进echarts模块化文件
//然后require进模块
require.config({
paths: {
echarts: 'js/echarts/'
}
});
require(
[
'echarts',
'echarts/chart/gauge', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/pie',
],
function (ec) {

//获取ID
var myChartHideBar6= ec.init(document.getElementById('abcd'));
hideBarOption6 = {
tooltip: {
show: false,
},
toolbox: {
show: false,
},
calculable: false,
grid: {
y: 30,
x: 100,
x2: 400,
borderWidth: 0,
},
xAxis: [
{
type: 'value',
axisLabel: {
show: false,
interval: 'auto', // {number}
textStyle: {
color: '#fff',
fontFamily: 'sans-serif',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
}
],
yAxis: [
{
type: 'category',
axisLabel: {
show: true,
interval: 'auto', // {number}
textStyle: {
color: '#fff',
fontFamily: 'sans-serif',
fontSize: 15,
}
},
axisLine: { // 轴线
show: false,
},
splitLine: {//中间分隔线
show: false,
},
data: [8,7,6,5,4,3,2,1]
},
//辅助x轴条形图背景关键1
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: [8,7,6,5,4,3,2,1]
}
],
series: [
{
name: '',
type: 'bar',
barGap: 10,
barWidth: 20,
itemStyle: {
normal: {
color: '#0e7ea5',
label: {
show: false,
position: 'insideRight',
formatter: '{c} 个'
}
}
},
data: ["42", "33", "88", "58", "42", "33", "15", "33", ]
},
{
name: '',
type: 'bar',
barWidth: 20,
yAxisIndex: 1, 条形图背景关键2
itemStyle: {
normal:
{
color: 'rgba(120,203,253,0.2)',
label: {
show: true,
position: 'right',
formatter: function (params) {
for (var i = 0, l = hideBarOption6.yAxis[0].data.length; i < l; i++) {
if (hideBarOption6.yAxis[0].data[i] == params.name) {
return hideBarOption6.series[0].data[i] ;
}
}
},
textStyle: {
color: '#d5d5d5'
}
}
},
emphasis: {
color: 'rgba(120,203,253,0.1)',
},
},
data: [100, 100, 100, 100, 100, 100, 100, 100, 100]
},
]
};
var ecConfig = require('echarts/config');
function eConsole(param) {
console.log(param.dataIndex);//打印当前点击的index值
}
myChartHideBar6.on(ecConfig.EVENT.CLICK, eConsole);
myChartHideBar6.setOption(hideBarOption6);
}
)

3、预览：条形图背景效果图