网站访问统计 曲线图seo网络推广案例
1.首先要创建一个组件warning，用来装图表（我排除绿色那段代码为我的需求，不是必要代码）
<template>
<div class="task_container">
<div class="pop_body">
<div class="footer">
<warningchild ref="childRef" class="jiuming" id="chartwaring" width="100%" height="100%"
:option="option13">
</warningchild>
</div>
</div>
</div>
</template>
<script>
import warningchild from '@/components/echarts/warningchild'
import {
mapGetters
} from 'vuex';
export default {
components: {
warningchild
},
data() {
return {
activeButton: 0,
option13: {},
option131: {},
option132: {},
option133: {},
namearray: [],
valuearray: [],
buttons: ['今日', '昨日', '7天', '30天'],
reslist: [],
reslist1: [],
reslist2: [],
reslist3: [],
datalist: [],
datalist1: [],
datalist2: [],
datalist3: [],
data: [{
value: 20,
// legendname: "种类01",
name: "处理中",
// itemStyle: { color: "#8d7fec" }
itemStyle: {
borderColor: 'rgba(255, 255, 255, 0.1)',
// shadowBlur: 10,
borderRadius: 80,
color: "#4A75FF",
shadowColor: 'rgba(255, 255, 255, 1)'
}
},
{
value: 19,
legendname: "种类03",
name: "待处理",
itemStyle: {
color: "#01B4FF",
borderColor: 'rgba(255, 255, 255, 0.1)',
// shadowBlur: 10,
borderRadius: 80,
shadowColor: 'rgba(142, 152, 241, 1)'
},
},
{
value: 24,
legendname: "",
name: "审核中",
itemStyle: {
color: "#23EABD",
borderColor: 'rgba(255, 255, 255, 0.1)',
// shadowBlur: 10,
borderRadius: 80,
shadowColor: 'rgba(142, 152, 241, 1)'
},
},
{
value: 32,
legendname: "",
name: "已处理",
itemStyle: {
color: "#FF7482",
borderColor: 'rgba(255, 255, 255, 0.1)',
// shadowBlur: 10,
borderRadius: 80,
shadowColor: 'rgba(142, 152, 241, 1)'
},
},
]
}
},
methods: {
getcount() {
console.log('sisisisiis')
this.$http.get(`///`
// {
// params: {
// eventStatus: buttonIndex
// }
// },
).then(res => {
this.reslist = res.data.result
console.log("warning", res.data.result)
this.modifiedCountList()
this.option13 = {
title: [
],
series: [{
// name: "标题",
type: "pie",
center: ["50%", "50%"],
// zuoyou/shangxia
radius: ["60%", "65%"],
width: 'auto',
height: 150,
clockwise: false, //饼图的扇区是否是顺时针排布
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: "outter",
// formatter: function(parms) {
// return parms.datalist.name;
// },
},
},
labelLine: {
normal: {
length: 5,
length2: 3,
smooth: true,
},
},
itemStyle: { // 此配置
normal: {
borderWidth: 3,
borderColor: 'rgba(0, 0, 0, 0.5)',
},
},
data: this.datalist
}, ],
}
this.$refs.childRef.changeonlys(this.option13);
})
},
handleButtonClick(buttonIndex) {
this.activeButton = buttonIndex;
if (this.activeButton == 0) {
this.getcount()
} else if (
this.activeButton == 1
) {
this.getcount1()
} else if (this.activeButton == 2) {
this.getcount2()
} else if (this.activeButton == 3) {
this.getcount3()
}
// this.getcount()
// this.getcount1()
// this.getcount2()
// this.getcount3()
},
modifiedCountList() {
// 定义不同警报级别的 itemStyle 设置
const alertStyles = {
'橙色': {
borderColor: 'rgba(255, 255, 255, 0.1)',
borderRadius: 80,
color: "#FE7B41",
shadowColor: 'rgba(255, 255, 255