<template>
<div style="width:50%;height:100%;float:left;">
<div class="top_title">
<div class="line"></div>
<span class="title">农田土壤养分含量</span>
</div>
<div style="width:100%;height:70%;">
<ul class="titbox">
<li ref="allin" class="active" @click="sxd()" style="cursor:pointer;">速效氮</li>
<li ref="jk" @click="yxl()" style="cursor:pointer;">有效磷</li>
<li ref="production" @click="sxj()" style="cursor:pointer;">速效钾</li>
</ul>
<div class="radar-pie" id="rooms" style="width:100%;height:90%"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
myChartd: null,
m2R2Data: [
{
value: 335,
name: "0-77.08",
itemStyle: { color: "#8d7fec" }
},
{
value: 310,
name: "77.08-79.38",
itemStyle: { color: "#5085f2" }
},
{
value: 123,
name: "79.38-80.66",
itemStyle: { color: "orange" }
},
{
value: 424,
name: "80.66-81.56",
itemStyle: { color: "#4EFEB3" }
},
{
value: 444,
name: "81.56-82.64",
itemStyle: { color: "#e75fc3" }
}
]
};
},
mounted() {
this.myChartd = this.$echarts.init(document.getElementById("rooms"));
this.drawLine();
},
methods: {
sxd() {
this.$refs.allin.style.color = "#009ef4";
this.$refs.jk.style.color = "#fff";
this.$refs.production.style.color = "#fff";
this.m2R2Data = [
{
value: 335,
name: "0-77.08",
itemStyle: { color: "#8d7fec" }
},
{
value: 310,
name: "77.08-79.38",
itemStyle: { color: "#5085f2" }
},
{
value: 123,
name: "79.38-80.66",
itemStyle: { color: "orange" }
},
{
value: 424,
name: "80.66-81.56",
itemStyle: { color: "#4EFEB3" }
},
{
value: 444,
name: "81.56-82.64",
itemStyle: { color: "#e75fc3" }
}
];
},
yxl() {
this.$refs.allin.style.color = "#fff";
this.$refs.jk.style.color = "#009ef4";
this.$refs.production.style.color = "#fff";
this.m2R2Data = [
{
value: 133,
name: "0-77.08",
itemStyle: { color: "#8d7fec" }
},
{
value: 256,
name: "77.08-79.38",
itemStyle: { color: "#5085f2" }
},
{
value: 444,
name: "79.38-80.66",
itemStyle: { color: "orange" }
},
{
value: 21,
name: "80.66-81.56",
itemStyle: { color: "#4EFEB3" }
},
{
value: 86,
name: "81.56-82.64",
itemStyle: { color: "#e75fc3" }
}
];
},
sxj() {
this.$refs.allin.style.color = "#fff";
this.$refs.jk.style.color = "#fff";
this.$refs.production.style.color = "#009ef4";
this.m2R2Data = [
{
value: 86,
name: "0-77.08",
itemStyle: { color: "#8d7fec" }
},
{
value: 72,
name: "77.08-79.38",
itemStyle: { color: "#5085f2" }
},
{
value: 164,
name: "79.38-80.66",
itemStyle: { color: "orange" }
},
{
value: 78,
name: "80.66-81.56",
itemStyle: { color: "#4EFEB3" }
},
{
value: 286,
name: "81.56-82.64",
itemStyle: { color: "#e75fc3" }
}
];
},
drawLine() {
// 基于准备好的dom,初始化echarts实例
let _this = this
_this.myChartd.setOption({
grid: {
top: "20%",
left: "1%",
right: "1%",
bottom: "2%",
containLabel: true
},
tooltip: {
trigger: "item"
},
title: {
text: "单位{毫克/公斤}",
textAlign: "left",
left: "53%",
top: "5%",
textStyle: {
color: "#fff",
fontSize: 12
}
},
legend: {
type: "scroll",
orient: "vertical",
left: "50%",
align: "left",
top: "20%",
textStyle: {
color: "#fff"
}
},
series: [
{
name: "",
type: "pie",
center: ["25%", "50%"],
radius: ["55%", "80%"],
clockwise: false, //饼图的扇区是否是顺时针排布
label: {
show: false
},
avoidLabelOverlap: false,
labelLine: {
show: false
},
data: this.m2R2Data
}
]
});
window.onresize = _this.myChartd.resize;
}
},
watch: {
m2R2Data: function() {
this.drawLine();
}
}
};
</script>
<style lang="less" scoped>
.radar-pie {
height: 100%;
width: 100%;
}
.top_title {
height: 13%;
border-top: 2px solid rgba(52, 183, 112, 0.5);
padding: 10px;
.line {
width: 0.4375rem;
height: 1.0625rem;
background: #34b572;
float: left;
margin-top: 0.125rem;
}
.title {
color: #fff;
float: left;
margin-left: 0.625rem;
font-size: 0.9375rem;
}
}
.titbox {
width: 100%;
height: 10%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
li {
float: left;
width: 20%;
}
}
.active {
color: #009ef4;
}
</style>
vue echarts 点击按钮切换视图(饼图)
猜你喜欢
转载自blog.csdn.net/qq_40295815/article/details/103902933
今日推荐
周排行