<template>
<div id="chart" style="width: 100%;height: 600px;"></div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
var myChart = this.$echarts.init(document.getElementById('chart'));
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
data: [150, 230, 224, 218, 135, 147, 260],
},
{
type: 'effectScatter',
name: '涟漪特效散点',
xAxisIndex: 0,//由于我这里只有一个x轴和y轴,所以不指定axisindex也可以
yAxisIndex: 0,//如果有多个x轴和y轴,那么一定要指明使用的是哪个索引轴
data: [
[1, 230],//本图表中的x轴是category,y轴是value,所以这里的1表示x轴index为1,230表示y轴value为230的散点
[3, 218]
],
rippleEffect: {
color: 'red',
scale: 5,
brushType: 'fill'
}
}
]
};
myChart.setOption(option);
setTimeout(function() {
window.onresize = function() {
myChart.resize();
}
myChart.resize();
}, 200)
}
}
}
</script>
<style>
</style>
效果图:
经过试验,如果x轴和y轴都是category,散点的data中x轴既可以用index也可以直接用x轴的字符串值,但是y轴依旧只能用值,而不能用index。
<template>
<div id="chart" style="width: 100%;height: 600px;"></div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
var myChart = this.$echarts.init(document.getElementById('chart'));
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'category'
},
series: [{
type: 'line',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
},
{
type: 'effectScatter',
name: '涟漪特效散点',
// xAxisIndex: 0,//由于我这里只有一个x轴和y轴,所以不指定axisindex也可以
// yAxisIndex: 0,//如果有多个x轴和y轴,那么一定要指明使用的是哪个索引轴
data: [
[0, 'A'],//x轴可以用inde或者值,但是y轴只能用值,否则散点就落不到折线上
['Tue','B'],
[2, 2],//这个点不在折线上
],
rippleEffect: {
color: 'red',
scale: 5,
brushType: 'fill'
}
}
]
};
myChart.setOption(option);
setTimeout(function() {
window.onresize = function() {
myChart.resize();
}
myChart.resize();
}, 200)
}
}
}
</script>
<style>
</style>
效果图: