直接上代码
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Basic Scatter Chart - Apache ECharts Demo</title> </head> <body> <div id="chart-container"></div> <script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> </body> </html>
CSS
* {
margin: 0;
padding: 0;
}
#chart-container {
position: relative;
height: 100vh;
overflow: hidden;
}
JS
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
xAxis: {},
yAxis: {},
//配置选框方式按钮
brush:{
toolbox:['rect', 'polygon', 'keep', 'clear','keep']
},
series: [
{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
type: 'scatter'
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
//设置默认进页面就可以多个矩形框选
myChart.dispatchAction({
type: 'takeGlobalCursor',
key: 'brush',
brushOption: {
brushType: 'rect', //选框类型
brushMode: 'multiple' //单选还是多选
}
});
}
window.addEventListener('resize', myChart.resize);
标签：option,myChart,散点图,按钮,var,echarts,选框 From： https://www.cnblogs.com/LTQ151/p/17861664.html