Vue+ECharts 实现散点图

素旧丶

已于 2022-03-01 14:16:03 修改

阅读量1.6k

点赞数 1

文章标签： echarts vue.js javascript

于 2022-03-01 14:03:52 首次发布

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

版权

本文将指导你如何使用Vue.js框架结合ECharts库，详细步骤解析创建散点图的过程，包括安装ECharts，引入图表组件，配置散点图选项，以及在Vue实例中动态更新数据。

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



<template>

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

<div id="main01" 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:[],//显示数据

}

},

methods:{

drawPie(id){

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

this.charts.setOption({

xAxis: {

name:"风向(°)",

max:100,//x轴最大值

interval:10,//x轴刻度大小

splitLine: { //坐标轴内竖线

lineStyle: {

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

}

},

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

show:true,

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

color:"black",

}

}

},

yAxis: {

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

max:18,//y轴最大值

interval:2,//y轴刻度大小

splitLine: { //坐标轴内横线

lineStyle: {

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

}

},

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

show:true,

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

color:"black",

}

}

},

title: {

text: '风速函数图',

left: 'center',

tap:2,

top: 20

},

/* tooltip: { //触发提示框

trigger: 'item', //触发器

// formatter: '{a}: ({c})', //触发器触发时显示的内容，'({c})'为坐标

formatter: function (obj) {

var value = obj.value;

return schema[0].text + '：' + value[2] + '<br>'

+schema[1].text + '：' + value[3] + '<br>'

+schema[2].text + '：' + value[4] + '<br>'

}

},*/

series: [{

symbol:'', // 点的图形：长方形，若不写默认为圆

symbolSize: 4, //点的大小

color:'red', //点的颜色

itemStyle: {

normal: {

// opacity: 0.001, //图元以及其附属物（如文字标签）的透明度

}

},

/* data: [ //点的位置（坐标轴范围最大与最小根据数据本身的范围自动定）

[0,0],

[5,80],

[4,20],

[2,40],

[8,4],

[10,60],

[8,60],

[10,18],

],*/

data:this.sdata,

type: 'scatter' //鼠标放到点上时鼠标的样式(此处为小手)。同 css 的鼠标样式，默认 'default'。

}]

})

},

getList(){

// listFshst().then(res=>{

// this.list = res.data;

console.log(this.list);

if(this.list){

this.list.forEach(rv=>{

this.tdata = [];

// 最大值

this.tdata.push(rv.fx);

this.tdata.push(rv.fs);

this.sdata.push(this.tdata);

if(this.xMax<rv.fs){

this.xMax=rv.fs;

}

if(this.yMax<rv.qy){

this.yMax=rv.qy;

}

this.xInterval=this.xMax/10;

this.yInterval = this.yMax/10;

})

}

this.$nextTick(function() {

console.log("main====01")

this.drawPie('main01')

})

// })

}

},

//调用

mounted(){

this.getList()

}

}

</script>

<style scoped>

* {

margin: 0;

padding: 0;

list-style: none;

}

</style>