前端Vue基于echart ucharts实现散点图分H5端及全端通用

0100

前端Vue基于echart(H5端) ucharts(全端通用)实现散点图, 下载完整代码请访问uni-app插件市场地址: ext.dcloud.net.cn/plugin?id=1…

效果图如下:

1.png

参考代码如下:

使用方法

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

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

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END

# 前端# Vue.js# 前端框架
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYzSJc1U' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
文章目录
文章目录
热门推荐