Vue+ECharts 实现多数据散点图

​

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