本文主要是介绍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 +
"% " +
"CH₄：" +
triangleData.ratio_ch4 +
"% " +
"C₂H₄：" +
triangleData.ratio_c2h4 +
"%"
}}
</h4>
<h3 style="margin-top: 10px">
诊断结果：
<span style="text-decoration: underline"
> {{ triangleData.condition }} </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摄氏度
这篇关于vue实现油色谱大卫三角的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
