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

来源：互联网发布：淘宝助理发布宝贝教程编辑：程序博客网时间：2024/05/29 16:57

首先引进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);

此图是条形图背景效果图

}
)

0 0