前端vue基于echart实现散点图
前端vue基于echart实现散点图, 阅读全文下载完整代码请关注微信公众号: 前端组件开发
效果图如下:

参考代码如下:
#
#### 使用方法
```使用方法
import echarts from '../../static/h5/echarts.min.js'
<!-- 散点图 -->
<div id="chartSdtV" style="width: 96vw; height: 96vw; margin-top: 20px; margin-left: 0vw;">
</div>
```
#### HTML代码部分
```html
<template>
<view class="content">
<!-- 散点图 -->
<div id="chartSdtV" style="width: 96vw; height: 96vw; margin-top: 20px; margin-left: 0vw;">
</div>
</view>
</template>
```
#### JS代码 (引入组件 填充数据)
```javascript
<script>
import echarts from '../../static/h5/echarts.min.js'
export default {
data() {
return {
}
},
mounted() {
// 模拟散点图数据
let dataDict = {
"otherComs": [
["0.166", "0.948"],
["0.366", "0.248"],
["0.766", "0.248"],
["0.566", "0.248"],
["0.166", "0.248"],
["0.6686", "0.8948"],
["0.5686", "0.848"],
["0.686", "0.448"],
["0.386", "0.4448"],
["0.8686", "0.8448"],
["0.9686", "0.3448"],
["0.7686", "0.48"],
["0.786", "0.268"],
["0.36", "0.753"],
["0.756", "0.8434"]
],
"localComs": [
["0.3386", "0.8648"]
]
};
let curSeries = [{
name: "其他同事",
type: 'scatter',
symbolSize: 4,
data: dataDict.otherComs
},
{
name: "我的位置",
type: 'scatter',
symbolSize: 6,
data: dataDict.localComs
}
]
var option = {
// 设置间距
grid: {
left: '0%',
right: '12%',
bottom: '7%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'none' // 'shadow' as default; can also be 'line' or 'shadow'
},
textStyle: {
fontSize: 10,
},
padding: [8, 8],
position: [6, 6],
show: true,
},
xAxis: {
name: '业绩',
splitLine: {
show: false
},
min: 0,
max: 1,
},
yAxis: {
name: '成长',
splitLine: {
show: false
},
min: 0,
max: 1
},
legend: {
//
data: ['我的位置', '其他同事']
},
series: curSeries
};
// 专利含金量图
var dom = document.getElementById("chartSdtV");
var myChart = echarts.init(dom);
if (option && typeof option === 'object') {
myChart.setOption(option);
}
},
methods: {
}
}
</script>
```
#### CSS
```css
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
```
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库