Echarts实现正弦曲线和散点图

在做项目中需要在同一幅图中展示正弦曲线和散点图,而且正弦曲线的周期必须为一个周期且需跟着散点的数据进行联动,在网上找了好多资料,无果,只好自己硬着头皮干,下面是这部分的代码

已封装成一个Vue组件

<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      id: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '200px'
      },
      height: {
        type: String,
        default: '200px'
      },
      dotData: {
        type: Array,
        default () {
          return []
        }
      },
      limitData: {
        type: Array,
        default () {
          return []
        }
      },
      maxData:{
        type:Number,
        default(){
          return 0
        }
      }
    },
    watch: {
      dotData(newVal) {
        this.dataDot = newVal
      },
      limitData(val) {
        this.dataLimit = val
      },
      maxData(value){
        this.dataMax = value
        this.initChart(this.dataDot, this.dataLimit,this.dataMax)
      }
    },
    data() {
      return {
        chart: null,
        dataDot: [],
        dataLimit: [],
        dataMax:0
      }
    },
    mounted() {
      this.initChart(this.dataDot, this.dataLimit,this.dataMax)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart(Dot, Limit,Max) {
        this.chart = echarts.init(document.getElementById(this.id))

        const xAxisData = []
        const data = []
        // 当页面初始化需要展示正弦的时候就使用 ω 不需要展示则直接使用 Max
        // Max这里表示最大值
        const ω = Max + 2
        for (let i = 0; i < ω; i+=0.01) {
          xAxisData.push(i)
          // y=Asin(ωx+φ) + k
          data.push((Math.sin(i/(ω/6.25))))
        }

        this.chart.setOption({
          title: {
            text: 'PRPS谱图',
            textStyle: {
              fontStyle: 'normal',
              fontWeight: '400'
            },
            left: 20,
            top: 10
          },
          grid: {
            left: '10%',
            top: '15%'
          },
          tooltip: {
            trigger: 'item',
            formatter: '[{c}]'
          },
          xAxis: [{
            type: 'value',
            name: 'X',
            scale: true
          }, {
            show: false,
            data: xAxisData
          }],
          yAxis: {
            type: 'value',
            name: 'Y',
            scale: true
          },
          series: [{
            type: 'effectScatter',
            symbolSize: 20,
            rippleEffect: {
              color: '#f5d69f'
            },
            itemStyle: {
              color: '#f5d69f'
            },
            data: Limit
          }, {
            type: 'scatter',
            itemStyle: {
              color: '#ef5055'
            },
            data: Dot
          }, {
            name: 'front',
            type: 'line',
            data,
            xAxisIndex: 1,
            z: 3,
            symbol:'none'
          }]
        })
      }
    }
  }
</script>

关键点就在于

const ω = Max + 2
        for (let i = 0; i < ω; i+=0.01) {
          xAxisData.push(i)
          // y=Asin(ωx+φ) + k
          data.push((Math.sin(i/(ω/6.25))))
        }

这串代码中 6.25 这个参数非常的关键,别问我这个参数怎么来的,我也不知道哈哈哈,我是自己一次次尝试出来的,最后发现如果只想要完成一个周期这个 6.25 就必须的,如果有幸遇上大佬知道这个参数的具体含义,烦请跟我解释下呢。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
ECharts是一个流行的开源可视化库,主要用于数据可视化,而FastAPI是一个用于构建RESTful API的高性能Python框架。如果你想结合ECharts在FastAPI中创建一个动态散点图,你可以按照以下步骤进行: 1. **安装依赖**: - 安装ECharts前端:在HTML或TypeScript文件中引入ECharts库。 - 如果要在后端使用ECharts,可以通过npm安装`@antv/echarts`,这是AntV官方维护的ECharts for Web的封装。 2. **前端渲染**: - 使用JavaScript在前端渲染ECharts,通常在`<script>`标签或组件创建图表实例,并发送请求获取数据。 - 可以用axios等HTTP库从FastAPI端口获取数据,数据格式如JSON。 3. **后端FastAPI处理**: - 在FastAPI中创建一个路由来提供数据,例如一个GET请求,返回包含散点图数据的JSON对象(包含x和y坐标数组)。 4. **传递数据到前端**: - 将前端需要的数据作为响应返回给前端请求。 5. **前端展示数据**: - 前端接收到数据后,设置ECharts实例的配置,如数据、图形类型(scatter,散点图),并更新图表。 6. **相关问题--:** 1. 如何在FastAPI中定义一个返回JSON数据的路由? 2. 如何使用ECharts API创建一个新的散点图实例? 3. ECharts如何处理异步数据加载? **示例代码片段**(简化版,未包含完整的前后端接口和模板): ```python # FastAPI后端 from fastapi import FastAPI, Response from pydantic import BaseModel app = FastAPI() @app.get("/scatter_data") async def get_scatter_data(): data = [{'x': 10, 'y': 20}, {'x': 30, 'y': 40}, ...] # 假设这是你的数据 return {"data": data} # 前端HTML/TypeScript import axios from 'axios' const chart = echarts.init(document.getElementById('chart')); axios.get('/scatter_data') .then(response => { const data = response.data.data; chart.setOption({ series: [ { name: 'Scatter', type: 'scatter', data: data } ] }); }); ``` 记得在实际项目中,你需要处理好数据格式转换,错误处理,以及可能的服务器渲染或静态文件部署问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值