点击事件
气泡图点击需要在渲染数据后直接点击气泡,进行操作获取该气泡数据等
渲染图表
<div id="container" style="height: 100%"></div>
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var option; // 后续定义一下option
myChart.off('click');
if (option && typeof option === 'object') {
myChart.setOption(option);
}
在渲染完成之后,直接添加点击事件
myChart.on('click',function(params){
console.log('params',params)
})
在有接口触发的情况下,点击某一个气泡,会触发与气泡数量相同的点击数量,导致重复点击,所以需要添加
myChart.off('click');
添加的位置是在渲染图表之前添加。
不均匀坐标 y轴
这个是看了 @带甜味的盐@ 的 Echarts绘制不均匀数据轴(y)绘制完成的
直接可以查看该博主博文,但是自己也记录下
如图:
在这个位置我y轴三个气泡得到数据分别是 20000、90和7,在使用自动分配刻度的情况下,数据差异过大,会导致90和7的展示位置均处于0刻度附近,但是约20000的数据又不多,还得展示的时候要均匀,这就需要不均匀刻度了。
如上图,为y轴固定刻度,然后给其分档计算,具体挡位计算什么的看 这个
先看一组数据:
var data = [
[[20, 20000, 'Australia', 1990]],
[[30, 90, 'Canada', 2015]],
[[1400, 7, 'Canada', 2015]],
];
散点图数据格式如上,y轴自动获取数组内第二个数据
var data = [
[[20, 20000, 'Australia', 1990]],
[[30, 90, 'Canada', 2015]],
[[1400, 7, 'Canada', 2015]],
];
const dataInterval = [ 1, 10, 100, 1000, 10000];
const investAmount = data.map(item => {
const amount = item[0][1];
// 寻找在数据间隔里小于amount的最大值
const min_v = Math.max(...dataInterval.filter(v => v <= amount));
// 寻找在数据间隔里大于amount的最小值
const max_v = Math.min(...dataInterval.filter(v => v > amount));
// 寻找 min_v 所在的下标
const index = dataInterval.findIndex(v => v === min_v);
// 计算该amount在y轴上应该展示的位置
const y_value = parseFloat((((amount - min_v) / (max_v - min_v))+ index).toFixed(1));
item[0].splice(1,0,y_value)
return item
})
console.log('investAmount',investAmount.toString());
data = investAmount;
举个例子:
数据内的 90 ,在10 到100之间,然后计算一下它在这个之间的比例
(90-10) / (100-10) 这个可以计算出90在那个之间所占的比例,保留一位小数,为0.9,靠近100,在整个y轴上的位置是1.9 这个1是10在y轴上的位置
这个可以计算出它的位置,当然y轴的设置也非常重要(直接下方完整代码)
全部代码
test.html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
// var app = {};
var option;
var data = [
[[20, 20000, 'Australia', 1990]],
[[30, 90, 'Canada', 2015]],
[[1400, 7, 'Canada', 2015]],
];
const dataInterval = [ 1, 10, 100, 1000, 10000];
const investAmount = data.map(item => {
const amount = item[0][1];
// 寻找在数据间隔里小于amount的最大值
const min_v = Math.max(...dataInterval.filter(v => v <= amount));
// 寻找在数据间隔里大于amount的最小值
const max_v = Math.min(...dataInterval.filter(v => v > amount));
// 寻找 min_v 所在的下标
const index = dataInterval.findIndex(v => v === min_v);
// 计算该amount在y轴上应该展示的位置
const y_value = parseFloat((((amount - min_v) / (max_v - min_v))+ index).toFixed(1));
item[0].splice(1,0,y_value)
return item
})
console.log('investAmount',investAmount.toString());
data = investAmount;
option = {
legend: {
right: '10%',
top: '3%',
data: ['1990', '2015','2021']
},
grid: {
left: '10%',
top: '10%'
},
xAxis: {
type: 'category',
name: '数量',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
// 这种设置方法,散点位置不准确,同一等级在一条线上,严重不符
// type:'category',
// data: [ '1元', '10元', '100元', '1000元', '10000元'],
type: 'value',
min: 0,
max: 4,
splitNumber : 4,
name: '金额',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true,
axisTick: {
show: true
},
axisLine: {
show: true
},
axisLabel: {
formatter: function(value, index){
let arr = []
if(value == 0){
arr.push('1元')
}else if(value ==1){
arr.push('10元')
}else if(value ==2){
arr.push('100元')
}else if(value ==3){
arr.push('1000元')
}else if(value ==4){
arr.push('10000元')
}
return arr
}
}
},
tooltip:{
formatter:function(params){
var res = `<div>数量${params.data[0]}个</div>` + '\n'+
`<div>金额${params.data[1]}元</div>`
return res
}
},
series: [
{
name: '1990',
data: data[0],
type: 'scatter',
symbolSize: 30,
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0,
color: 'rgb(251, 118, 123)'
},
{
offset: 1,
color: 'rgb(204, 46, 72)'
}
])
}
},
{
name: '2015',
data: data[1],
type: 'scatter',
symbolSize: 30,
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0,
color: 'rgb(129, 227, 238)'
},
{
offset: 1,
color: 'rgb(25, 183, 207)'
}
])
}
},
{
name: '2021',
data: data[2],
type: 'scatter',
symbolSize: 30,
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0,
color: 'rgb(229, 127, 238)'
},
{
offset: 1,
color: 'rgb(225, 182, 207)'
}
])
}
}
]
};
myChart.off('click');
if (option && typeof option === 'object') {
myChart.setOption(option);
}
myChart.on('click',function(params){
console.log('params',params)
// alert(`数量为${params.data[0]}个 金额为${params.data[2]}元`)
})
</script>
</body>
</html>
实现的效果就是上方图片
完啦,就这么多!