前端Vue基于echart ucharts实现散点图分H5端及全
前端Vue基于echart ucharts实现散点图分H5端及全端通用, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id=12866
效果图如下:
#### 使用方法
```使用方法
import echarts from '../../static/h5/echarts.min.js'
<view class="content">
<view>H5版本散点图 </view>
<!-- H5版本散点图 -->
<div id="chartSdtV" class="charts-box">
</div>
<view>全端跨平台散点图 </view>
<!-- 全端散点图 -->
<view class="charts-box">
<qiun-data-charts type="scatter" :chartData="chartData" />
</view>
</view>
```
#### HTML实现代码部分
```html
<template>
<view class="content">
<view>H5版本散点图 </view>
<!-- H5版本散点图 -->
<div id="chartSdtV" class="charts-box">
</div>
<view>全端跨平台散点图 </view>
<!-- 全端散点图 -->
<view class="charts-box">
<qiun-data-charts type="scatter" :chartData="chartData" />
</view>
</view>
</template>
<script>
import echarts from '../../static/h5/echarts.min.js'
export default {
data() {
return {
chartData: {}
}
},
mounted() {
this.chartData = {
"series": [{
"name": "我的位置",
"data": [
[10.0, 8.04],
]
}, {
"name": "其他同学",
"data": [
[9.15, 7.20],
[11.5, 7.20],
[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],
[10.02, 10.68]
]
}]
}
// 模拟散点图数据
let curSeries = [{
name: "其他同事",
type: 'scatter',
symbolSize: 4,
data: [
[9.15, 7.20],
[11.5, 7.20],
[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],
[10.02, 10.68]
]
},
{
name: "我的位置",
type: 'scatter',
symbolSize: 6,
data: [
[10.0, 8.04]
]
}
]
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,
},
yAxis: {
name: '成长',
splitLine: {
show: false
},
min: 0,
},
legend: {
//
data: ['我的位置', '其他同事']
},
series: curSeries
};
// 专利含金量图
var dom = document.getElementById("chartSdtV");
var myChart = echarts.init(dom);
if (option && typeof option === 'object') {
myChart.setOption(option);
}
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
margin-left: 2%;
width: 96%;
}
.charts-box {
width: 100%;
height: 300px;
margin-top: 20px;
}
</style>
```
