vue实现油色谱大卫三角

---

效果图

 直接上源码 

<template>

<div>

<el-row>

<el-col :span="17">

<canvas

ref="canvas"

style="margin-top: -8px"

:width="height"

:height="height"

></canvas>

<div

style="margin-top: -56px; height: 80px; text-align: center"

:style="{ width: height + 'px' }"

v-if="triangleData"

>

<h4 style="text-decoration: underline">

{{

"C₂H₂：" +

triangleData.ratio_c2h2 +

"%&nbsp; " +

"CH₄：" +

triangleData.ratio_ch4 +

"%&nbsp;" +

"C₂H₄：" +

triangleData.ratio_c2h4 +

"%"

}}

</h4>

<h3 style="margin-top: 10px">

诊断结果：

<span style="text-decoration: underline"

>&nbsp;&nbsp;{{ triangleData.condition }}&nbsp;&nbsp;</span

>

</h3>

</div>

</el-col>

<el-col :span="7">

<div style="margin-top: 10px">

<div class="trouble-type">故障类型</div>

<el-row>

<el-col :span="1">

<div

class="line-one"

:style="{ height: pointAll.length * 40 - 5 + 'px' }"

></div>

</el-col>

<el-col :span="23">

<div

v-for="(item, ind) in pointAll"

@click="btnClick(item)"

:key="ind"

>

<div

@click="btnClick(item)"

class="item-cell"

:style="{ background: item.color }"

>

{{ item.name }}

</div>

</div>

</el-col>

</el-row>

</div>

</el-col>

</el-row>

</div>

</template>

<script>

export default {

props: {

triangleData: {

type: Object,

default: () => {

return null;

}

}

},

data() {

return {

height: 380, //宽高

scaleW: 10,

radius: 170,

pointAll: [],

canvas: null

};

},

mounted() {

this.setPoint();

this.btnClick();

},

methods: {

init() {

if (this.triangleData.condition == "局部放电") {

this.btnClick(this.pointAll[0]);

} else if (this.triangleData.condition == "低能放电") {

this.btnClick(this.pointAll[1]);

} else if (this.triangleData.condition == "高能放电") {

this.btnClick(this.pointAll[2]);

} else if (this.triangleData.condition == "热故障（t<300摄氏度