Vue+ECharts 实现多数据散点图

素旧丶

已于 2022-03-01 14:17:45 修改

阅读量1.3k

点赞数

文章标签： echarts vue.js javascript

于 2022-03-01 14:05:53 首次发布

本文链接：https://blog.youkuaiyun.com/m0_58743687/article/details/123204590

版权

本文详细介绍了如何使用Vue.js框架结合ECharts库，实现动态多数据的散点图绘制。通过实例代码，展示了如何加载ECharts模块，配置图表参数，以及动态更新数据来达到数据可视化的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



<template> 

<!--为echarts准备一个具备大小的容器dom-->

<div id="main07" style="width: 700px;height: 400px;"></div>

</template>

<script>

import * as echarts from 'echarts'

export default {

name: 'chartFirst',

props:{

//上级传入

list:{

type:Array,

default:[]

}

},

data () {

return {

// list:null,//数据

xMax:0,//X轴最大值

xInterval:10,//X轴刻度间隔

yMax:0,//y轴最大值

yInterval:10,//y轴刻度间隔

sdata:[],//显示数据

tdata:[],//临时数据

sdata2:[],

sdata3:[],

sdata4:[],

}

},

methods:{

drawPie(id){

this.charts = echarts.init(document.getElementById(id))

this.charts.setOption({

xAxis: {

name:"风速(m/s)",

splitLine: { //坐标轴内竖线

lineStyle: {

color:"\tGainsboro", //没有颜色即不显示

}

},

axisLine: { //直角坐标系x轴

show:true,

lineStyle: { //为了不让轴上的数字显现

color:"black",

}

}

},

yAxis: {

name:"功率（KW）",

splitLine: { //坐标轴内横线

lineStyle: {

color:&