前端Vue基于echart(H5端) ucharts(全端通用)实现散点图, 

效果图如下:

参考代码如下:

使用方法

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实现代码部分

<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>

阅读全文下载完整组件代码请关注微信公众号： 前端组件开发