使用echarts实现四象限散点图_echarts四象限,echarts四象限图资源-CSDN文库资源-CSDN文库

共2个文件

js：1个

html：1个

需积分: 3 101 浏览量 2022-09-02 11:13:31 上传评论 3 收藏 573KB RAR 举报

**使用ECharts实现四象限散点图** 在数据分析和可视化中，散点图是一种非常常见且有效的工具，尤其在需要展示两个变量间关系时。四象限散点图则是散点图的一种特殊形式，它将坐标轴分为四个象限，每个象限具有不同的含义，可以帮助我们更好地理解数据分布。本教程将详细介绍如何使用ECharts，一个流行的JavaScript库，来实现四象限散点图。 ECharts是百度开发的一款开源的数据可视化库，它提供了丰富的图表类型和高度交互的功能，适合用于网页和移动设备上的数据可视化。ECharts支持多种图表，包括柱状图、折线图、饼图以及我们的目标——散点图。在实现四象限散点图之前，确保已经正确地在项目中引入ECharts库。可以通过CDN链接或者下载压缩包后本地引入。例如，在HTML文件中添加以下代码引入ECharts： ```html <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.x.x/echarts.min.js"></script> ``` 接下来，我们需要准备一个div元素作为ECharts的容器，并为其指定id： ```html <div id="main" style="width: 800px;height:600px;"></div> ``` 然后编写JavaScript代码来初始化ECharts实例并设置图表配置。四象限散点图的关键在于设置`xAxis`和`yAxis`的`splitLine`和`axisLine`属性，以便划分出四个象限： ```javascript // 初始化ECharts实例 var myChart = echarts.init(document.getElementById('main')); // 定义图表配置 var option = { tooltip: { trigger: 'item' }, xAxis: { type: 'value', splitLine: { lineStyle: { color: '#ccc' } }, axisLine: { onZero: false, lineStyle: { color: '#999' } } }, yAxis: { type: 'value', splitLine: { lineStyle: { color: '#ccc' } }, axisLine: { onZero: false, lineStyle: { color: '#999' } }, axisLabel: { formatter: function (value) { return value > 0 ? '+' + value : value; } } }, series: [{ name: 'Scatter', type: 'scatter', data: [ // 数据数组，每个元素为 [x值, y值] 的形式 ] }] }; // 使用配置项和数据显示图表 myChart.setOption(option); ``` 在`series`部分，你需要定义数据数组，每个元素都是一个对象，包含`x`和`y`属性，分别代表横纵坐标的值。例如： ```javascript data: [ {value: [10, 20], itemStyle: {color: 'red'}}, {value: [-15, 30], itemStyle: {color: 'blue'}}, // 更多数据... ] ``` 这里你可以根据实际需求调整颜色和其他样式。记得在ECharts实例中调用`setOption`方法，传入你配置好的`option`对象，这样就能生成四象限散点图了。本示例代码可以直接在HTML文件中运行查看效果，也可以作为一个插件独立使用。如果你在使用过程中遇到任何问题，欢迎留言，我会尽力提供帮助。这个实现不仅稳定，而且灵活，可以根据项目的具体需求进行定制和扩展。通过这种方式，我们可以轻松地利用ECharts的强大功能来展示和分析四象限散点图中的数据分布。

资源详情

资源评论

资源推荐

收起资源包目录

四象限散点图.rar （2个子文件）

四象限散点图

echarts.js 3.16MB

index.html 8KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts</title>  <script src="echarts.js"></script> </head> <body>  <div id="main" style="width: 800px;height:600px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); let marksData = [ { name: '点1', value: [10, 20], }, { name: '点2', value: [15, 22], }, { name: '点3', value: [34, 51], }, { name: '点4', value: [25, 64], }, { name: '点5', value: [42, 20], }, { name: '点6', value: [32, 15], }, { name: '点7', value: [68, 34], }, { name: '点8', value: [25, 65], }, { name: '点9', value: [45, 56], }, { name: '点10', value: [35, 47], } ] // 中心线 let centerLine = [ { name: 'y', xAxis: 40 }, { name: 'x', yAxis: 40 } ] // 中心点 let centerMark = [ { value: '中心点', coord: [40, 40] } ] let option = { tooltip: { axisPointer: { show: true, type: 'cross', lineStyle: { type: 'dashed', width: 1 }, label: { backgroundColor: '#555' } } }, grid: { left: 50, right: 50, bottom: '4%', top: '6%', containLabel: true }, xAxis: { name:"X轴标题：单位", nameLocation:"center", nameGap:20, scale: true, axisLine: { lineStyle: { color: '#666' } }, axisLabel: { color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } }, yAxis: { name:"Y轴标题：单位", nameLocation:"center", nameGap:25, scale: true, axisLine: { lineStyle: { color: '#666' } }, axisLabel: { color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } }, series: [{ type: 'scatter', data: marksData, label: { show: true, position: 'bottom', formatter: '{b}' }, itemStyle: { shadowBlur: 2, shadowColor: 'rgba(120, 36, 50, 0.5)', shadowOffsetY: 1, color: function (e) { let randomColor = 'rgba(' + Math.floor(Math.random() * 240) + ',' + Math.floor(Math.random() * 240) + ',' + Math.floor(Math.random() * 240) + ',' + '.8' + ')' return randomColor.substring() } }, // 各象限区域 markArea: { silent: true, data: [ // 第一象限 [{ name: '第一象限', xAxis: 40, // x 轴开始位置 yAxis: 70, // y 轴结束位置(直接取最大值) itemStyle: { color: 'rgba(56, 180, 139, .1)' }, label: { position: 'inside', color: 'rgba(0, 0, 0, .1)', fontSize: 22 } }, { yAxis: 40 // y轴开始位置 }], // 第二象限 [{ name: '第二象限', yAxis: 70, // y 轴结束位置(直接取最大值) itemStyle: { color: 'rgba(68, 97, 123, .1)' }, label: { position: 'inside', color: 'rgba(0, 0, 0, .1)', fontSize: 22 } }, { xAxis: 40, // x 轴结束位置 yAxis: 40 // y轴开始位置 }], // 第三象限 [{ name: '第三象限', yAxis: 40, // y 轴结束位置 itemStyle: { color: 'rgba(191, 120, 58, .1)' }, label: { position: 'inside', color: 'rgba(0, 0, 0, .1)', fontSize: 22 } }, { xAxis: 40, // x 轴结束位置 yAxis: 10 // y轴开始位置 }], // 第四象限 [{ name: '第四象限', xAxis: 40, // x 轴开始位置 yAxis: 40, // y 轴结束位置 itemStyle: { color: 'rgba(116, 83, 153, .1)' }, label: { position: 'inside', color: 'rgba(0, 0, 0, .1)', fontSize: 22 } }, { yAxis: 10 // y轴开始位置 }] ] }, // 中心点交集象限轴 markLine: { silent: true, // 是否不响应鼠标事件 precision: 2, // 精度 lineStyle: { type: 'solid', color: '#00aca6' }, label: { color: '#00aca6', position: 'end', formatter: '{b}' }, data: centerLine }, // 中心点 markPoint: { symbol: 'roundRect', symbolSize: 15, itemStyle: { color: 'rgba(234, 85, 6, .8)' }, label: { position: 'top' }, data: centerMark } }] } myChart.setOption(option); </script> </body> </html>