<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:"\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],
[50,80],
[50,20],
[20,40],
[80,140],
[2,6],
[8,6],
[100,100],
],*/
data:this.sdata3,
type: 'scatter' //鼠标放到点上时鼠标的样式(此处为小手)。同 css 的鼠标样式，默认 'default'。
},
//最大值
{
symbol:'', // 点的图形：长方形，若不写默认为圆
symbolSize: 4, //点的大小
color:'blue', //点的颜色
itemStyle: {
normal: {
// opacity: 0.001, //图元以及其附属物（如文字标签）的透明度
}
},
/* data: [ //点的位置（坐标轴范围最大与最小根据数据本身的范围自动定）
[0,0],
[50,80],
[50,20],
[20,40],
[80,40],
[20,60],
[80,60],
[100,100],
],
*/
data:this.sdata,
type: 'scatter' //鼠标放到点上时鼠标的样式(此处为小手)。同 css 的鼠标样式，默认 'default'。
},
//最小值
{
symbol:'', // 点的图形：长方形，若不写默认为圆
symbolSize: 4, //点的大小
color:'green', //点的颜色
itemStyle: {
normal: {
// opacity: 0.001, //图元以及其附属物（如文字标签）的透明度
}
},
/* data: [ //点的位置（坐标轴范围最大与最小根据数据本身的范围自动定）
[0,0],
[50,80],
[50,20],
[20,40],
[80,140],
[2,6],
[8,6],
[100,100],
],*/
data:this.sdata2,
type: 'scatter' //鼠标放到点上时鼠标的样式(此处为小手)。同 css 的鼠标样式，默认 'default'。
},
//标准差
{
symbol:'', // 点的图形：长方形，若不写默认为圆
symbolSize: 4, //点的大小
color:'', //点的颜色026527
itemStyle: {
normal: {
// opacity: 0.001, //图元以及其附属物（如文字标签）的透明度
}
},
/* data: [ //点的位置（坐标轴范围最大与最小根据数据本身的范围自动定）
[0,0],
[50,80],
[50,20],
[20,40],
[80,140],
[2,6],
[8,6],
[100,100],
],*/
data: this.sdata4,
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.fs);
this.tdata.push(rv.zdz);
this.sdata.push(this.tdata);
//最小值
this.tdata2=[];
this.tdata2.push(rv.fs);
this.tdata2.push(rv.zxz);
this.sdata2.push(this.tdata2);
//平均值
this.tdata3=[];
this.tdata3.push(rv.fs);
this.tdata3.push(rv.pjz);
this.sdata3.push(this.tdata3);
//标准差
this.tdata4=[];
this.tdata4.push(rv.fs);
this.tdata4.push(rv.bac);
this.sdata4.push(this.tdata4);
if(this.xMax<rv.fs){
this.xMax=rv.fs;
}
if(this.yMax<rv.zdz){
this.yMax=rv.zdz;
}
this.xInterval=this.xMax/10;
this.yInterval = this.yMax/10;
})
}
//生成图标
this.$nextTick(function() {
console.log("main====4")
this.drawPie('main07')
})
// })
}
},
//调用
mounted(){
this.getList()
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
