218 lines
8.5 KiB
JavaScript
218 lines
8.5 KiB
JavaScript
/**
|
||
* 顶部header
|
||
*/
|
||
Vue.component("cz-warning-survey", {
|
||
template: `
|
||
<div :style="{height: height+'px'}" id="warningSurvey">
|
||
|
||
</div>
|
||
`,
|
||
props: {
|
||
title:{
|
||
type: String,
|
||
},
|
||
height:{
|
||
type: Number,
|
||
},
|
||
distribute:{
|
||
type: Array,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
active:0
|
||
}
|
||
},
|
||
mounted(){
|
||
this.init()
|
||
},
|
||
methods: {
|
||
init(){
|
||
this.warningChart(this.distribute,'warningSurvey','次')
|
||
},
|
||
//预警概况 Echart
|
||
warningChart(datas,id,unit){
|
||
let newPromise = new Promise((resolve) => {
|
||
resolve()
|
||
})
|
||
//然后异步执行echarts的初始化函数
|
||
newPromise.then(() => {
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
|
||
var charPie3currentIndex = 0
|
||
var startCharts;
|
||
let legendData = []
|
||
for (var j = 0; j < datas.length; j++) {
|
||
var data = {
|
||
name: datas[j].name,
|
||
//icon: 'circle',
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: '#c1d1f3',
|
||
}
|
||
}
|
||
legendData.push(data)
|
||
}
|
||
let objData = array2obj(datas, 'name')
|
||
var colorList = ['#00fff1', '#04c8fa', '#aa01fe', '#4e84fe', '#ff7b79','#edae5e', '#fe4101','#14d18f']
|
||
var chChart1 = echarts.init(document.getElementById(id));
|
||
option1 = {
|
||
tooltip: {
|
||
show:true,
|
||
trigger: 'item',
|
||
formatter: function(params,tichet,callback){
|
||
var name = params.name;
|
||
var value = params.value;
|
||
var percent=params.percent
|
||
res = '<div style="text-align: center;font-size: 16px;color: #c1d1f3;font-weight: bold;" id="toolTipBox1">' +
|
||
'<p style="padding-bottom:10px;">' +
|
||
'<span style="color: #01fff0;font-size: 20px;padding-right: 5px">'+value+'</span> '+
|
||
'<span style="color: #01fff0;font-size: 20px">'+percent+'%</span>' +
|
||
'</p>'+
|
||
'<p>'+name+'</p>'+
|
||
'</div>'
|
||
//res =''+params.name+'\n\n'+params.value+'（'+params.percent+'%）'
|
||
return res;
|
||
},
|
||
position: function(point,params ,dom,rect, size){
|
||
var marginW = Math.ceil(size.contentSize[0]/2);
|
||
var marginH = Math.ceil(size.contentSize[1]/2);
|
||
dom.style.marginLeft = "-" + marginW + "px";
|
||
dom.style.marginTop = "-" + marginH + "px";
|
||
return ['50%', '30%']
|
||
},
|
||
alwaysShowcontent:true,
|
||
backgroundColor:'none',
|
||
textStyle:{
|
||
color:'#fff'
|
||
}
|
||
//formatter: '{b}\n\n{c} ({d}%)'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
itemWidth: 15,
|
||
itemHeight: 10,
|
||
itemGap: 10,
|
||
|
||
top: '55%',
|
||
left: 'center',
|
||
data: legendData,
|
||
formatter: function (name) {
|
||
return `${name} ${objData[name].value} ${unit} ${objData[name].percent}% `
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['28%', '45%'],
|
||
center: ['50%', '30%'],
|
||
avoidLabelOverlap: false,
|
||
//selectedMode: 'single',
|
||
data:datas,
|
||
itemStyle: {
|
||
|
||
normal: {
|
||
borderWidth: 7,
|
||
borderColor: "#040e27",
|
||
color: function(params) {
|
||
return colorList[params.dataIndex]
|
||
}
|
||
}
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center',
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
},
|
||
label : {
|
||
show: false,
|
||
fontSize: '20',
|
||
color: "#fff",
|
||
fontWeight: 'bold',
|
||
formatter: "{b}\n\n{c} ({d}%)"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
chChart1.setOption(option1);
|
||
window.onresize = chChart1.resize;
|
||
|
||
function array2obj (array, key) {
|
||
var resObj = {}
|
||
for (var i = 0; i < array.length; i++) {
|
||
resObj[array[i][key]] = array[i]
|
||
}
|
||
return resObj
|
||
}
|
||
chChart1.on('mouseover', function (param) {
|
||
isSet = false
|
||
clearInterval(startCharts)
|
||
// 取消之前高亮的图形
|
||
chChart1.dispatchAction({
|
||
type: 'downplay',
|
||
seriesIndex: 0,
|
||
dataIndex: charPie3currentIndex
|
||
})
|
||
// 高亮当前图形
|
||
chChart1.dispatchAction({
|
||
type: 'highlight',
|
||
seriesIndex: 0,
|
||
dataIndex: param.dataIndex
|
||
})
|
||
// 显示 tooltip
|
||
chChart1.dispatchAction({
|
||
type: 'showTip',
|
||
seriesIndex: 0,
|
||
dataIndex: param.dataIndex
|
||
})
|
||
$("#toolTipBox1").fadeOut(3000)
|
||
})
|
||
var chartHover = function () {
|
||
var dataLen = option1.series[0].data.length
|
||
// 取消之前高亮的图形
|
||
chChart1.dispatchAction({
|
||
type: 'downplay',
|
||
seriesIndex: 0,
|
||
dataIndex: charPie3currentIndex
|
||
})
|
||
charPie3currentIndex = (charPie3currentIndex + 1) % dataLen
|
||
// 高亮当前图形
|
||
chChart1.dispatchAction({
|
||
type: 'highlight',
|
||
seriesIndex: 0,
|
||
dataIndex: charPie3currentIndex
|
||
})
|
||
// 显示 tooltip
|
||
chChart1.dispatchAction({
|
||
type: 'showTip',
|
||
seriesIndex: 0,
|
||
dataIndex: charPie3currentIndex,
|
||
})
|
||
$("#toolTipBox1").fadeOut(3000)
|
||
}
|
||
startCharts = setInterval(chartHover, 3000)
|
||
// 4、鼠标移出之后，恢复自动高亮
|
||
chChart1.on('mouseout', function (param) {
|
||
if (!isSet) {
|
||
startCharts = setInterval(chartHover, 3000)
|
||
isSet = true
|
||
}
|
||
})
|
||
|
||
})
|
||
},
|
||
},
|
||
watch:{
|
||
distribute: function (n,o) {
|
||
this.warningChart(this.distribute,'warningSurvey','次')
|
||
}
|
||
},
|
||
})
|