<template>
|
<div>
|
|
<div class="kb_body">
|
<div class="kb_background" />
|
<div class="kb_background2" />
|
<div class="kb_head">智能订单看板</div>
|
<!-- <div class="kb_headerPic" />-->
|
<div class="kb_headerPic kb_flex_space_between">
|
<div id="zhkbTop01" style="width: 800px;height:36px;" />
|
<div id="zhkbTop02" style="width: 800px;height:36px;transform: rotate(180deg);margin-top: -12px" />
|
</div>
|
<div class="kb_content">
|
<!-- 左边-->
|
<div class="kb_content_left kb_flex_column">
|
<div class="kb_content_left_top">
|
<div class="middle_title">
|
<div class="icon">
|
<svg-icon icon-class="scjh02" class="svg_class" />
|
</div>
|
<div class="title">生产计划</div>
|
</div>
|
<div class="scjh kb_block horn kb_flex_column">
|
<div class="kb_flex_space_between" style="height: 20px;">
|
<div>在制计划数量（自产） 75000吨</div>
|
<div>计划完成进度（外购） 30000吨</div>
|
</div>
|
<div class="kb_flex_space_between" style="padding: 0 15px;height: 20px;">
|
<div style="color:#fff">生产类型</div>
|
<div style="color:#fff">生产数量</div>
|
<div style="color:#fff">完成进度</div>
|
</div>
|
<div>
|
<div class="kb_flex_space_between">
|
<div style="height: 60px;display: flex;flex-direction: column;justify-content: center">
|
<div style="margin: 5px 0;color: #3dffef">计划完成进度(自产)</div>
|
<div style="margin: 5px 0;color: #3dffef">计划完成进度(外购)</div>
|
</div>
|
<div id="zhkb01" style="width:380px;height: 60px;" />
|
</div>
|
</div>
|
<div style="height: 180px;" class="kb_flex_column">
|
<!-- <div class="small_title">-->
|
<!-- <div class="small_bar" />-->
|
<!-- <div class="small_content">预期计划原因分析</div>-->
|
<!-- </div>-->
|
<div style="height: 180px;" class="kb_flex_space_between">
|
<div id="zhkb02" style="height: 180px;width: 520px;" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="kb_content_left_bottom">
|
<div class="middle_title">
|
<div class="icon">
|
<svg-icon icon-class="ckgl02" class="svg_class" />
|
</div>
|
<div class="title">仓库管理</div>
|
</div>
|
<div class="ckgl kb_block horn kb_flex_column">
|
<div style="height: 60px" class="kb_flex_space_between">
|
<div style="width: 188px">
|
<div class="middle_title">
|
<div class="icon">
|
<svg-icon icon-class="zncc" class="svg_class" />
|
</div>
|
<div style="margin-left: 30px;">
|
<div>8000吨</div>
|
<div style="color:#fff;">昨日入库数量</div>
|
</div>
|
</div>
|
</div>
|
<div style="width: 324px">
|
<div class="middle_title">
|
<div class="icon">
|
<svg-icon icon-class="zncc" class="svg_class" />
|
</div>
|
<div style="margin-left: 30px;">
|
<div>10000吨</div>
|
<div style="color:#fff;">昨日出库数量</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
<div style="height: 190px;position: relative" class="kb_flex_space_between">
|
<div id="zhkb12" style="width: 190px;padding: 0;" class="kb_block" />
|
<div style="position: absolute;bottom: 40px;left: 55px;width: 100px;height: 30px;color: #fff">入库及时率
|
</div>
|
|
<div
|
style="width: 320px;margin-left: 10px;align-items: center;padding: 10px 20px"
|
class="kb_block kb_flex_space_between"
|
>
|
<div class="kb_flex_column" style="position: relative;margin-top: -5px;">
|
<div style="position: absolute;left: 42px;top: 20px">0.01%</div>
|
<div class="box03" />
|
<div style="text-align: center;margin-top: 5px;">退货率</div>
|
</div>
|
<div class="kb_flex_column" style="position: relative;margin-top: -5px;">
|
<div style="position: absolute;left: 42px;top: 20px">0.02%</div>
|
<div class="box03" />
|
<div style="text-align: center;margin-top: 5px;">损坏率</div>
|
</div>
|
</div>
|
</div>
|
<div style="height: 280px;position: relative" class="kb_flex_column">
|
<div style="height: 20px;font-size: 18px;position: absolute;left: 220px;top: 24px">成品库存结构</div>
|
<div id="zhkb13" style="height: 260px;width: 100%;" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 中间-->
|
<div class="kb_content_center kb_flex_column">
|
<div class="kb_content_center_top">
|
<div class="middle_title" style="align-items: center">
|
<div class="icon">
|
<svg-icon icon-class="xsdd02" class="svg_class" style="font-size:50px" />
|
</div>
|
<div class="title" style="margin-top:10px">销售订单</div>
|
</div>
|
<div class="xsdd kb_block horn">
|
<div style="" class="kb_flex_space_between">
|
<div class="kb_flex_column">
|
<div id="zhkb03" style="width:120px;height: 120px;" />
|
<div id="zhkb03_2" style="width:120px;height: 120px;" />
|
</div>
|
<div>
|
<div id="zhkb04" style="width: 600px; height: 240px" />
|
</div>
|
</div>
|
<div id="zhkb05" style="height: 170px;" />
|
</div>
|
</div>
|
<div class="kb_content_center_bottom">
|
<div class="middle_title">
|
<div class="icon">
|
<svg-icon icon-class="cjhn02" class="svg_class" />
|
</div>
|
<div class="title">车间耗能</div>
|
</div>
|
<div class="cjhn kb_block horn kb_flex_column">
|
<div id="zhkb08" style="height: 200px;width:100%" />
|
<div id="zhkb09" style="height: 200px;width:100%" />
|
</div>
|
</div>
|
</div>
|
<!-- 右边-->
|
<div class="kb_content_right kb_flex_column">
|
<div class="kb_content_right_top">
|
<div class="middle_title">
|
<div class="icon">
|
<svg-icon icon-class="zlfx02" class="svg_class" />
|
</div>
|
<div class="title">质量分析</div>
|
</div>
|
<div class="zlfx kb_block horn kb_flex_space_between">
|
<div class="kb_flex_column">
|
<div id="zhkb06" style="height: 50%;width: 140px;" />
|
<div id="zhkb06_2" style="height: 50%;width: 140px;" />
|
</div>
|
<div class="kb_flex_column">
|
<div style="height: 50%;width: 390px;" class="kb_flex_space_between">
|
<div id="zhkb07_1" style="height: 109px; width: 130px;" />
|
<div id="zhkb07_2" style="height: 109px; width: 130px;" />
|
<div id="zhkb07_3" style="height: 109px; width: 130px;" />
|
</div>
|
<div style="height: 50%;width: 390px;" class="kb_flex_space_between">
|
<div id="zhkb07_4" style="height: 109px; width: 130px;" />
|
<div id="zhkb07_5" style="height: 109px; width: 130px;" />
|
<div id="zhkb07_6" style="height: 109px; width: 130px;" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="kb_content_right_center">
|
<div class="middle_title">
|
<div class="icon">
|
<svg-icon icon-class="ryfx02" class="svg_class" />
|
</div>
|
<div class="title">人员分析</div>
|
</div>
|
<div id="zhkb10" class="ryfx kb_block horn" />
|
</div>
|
<div class="kb_content_right_bottom">
|
<div class="middle_title">
|
<div class="icon">
|
<svg-icon icon-class="sbfx02" class="svg_class" />
|
</div>
|
<div class="title">设备分析</div>
|
</div>
|
<div id="zhkb11" class="sbfx kb_block horn" />
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
import '@/utils/world'
|
import {
|
loadEcharts,
|
zhkb01,
|
zhkb03,
|
zhkb04,
|
zhkb05,
|
zhkb06,
|
zhkb07,
|
zhkb08,
|
zhkb09,
|
zhkb10, zhkb11
|
} from '@/utils/myEcharts'
|
|
import '@/utils/echarts-liquidfill.min.js'
|
|
export default {
|
name: 'Index',
|
data() {
|
return {
|
colorX: '#c7e7ff',
|
colorY: '#7696c5'
|
}
|
},
|
mounted() {
|
this.getEchartsHead('zhkbTop01')
|
this.getEchartsHead('zhkbTop02')
|
// setInterval(() => {
|
// this.getEchartsHead('zhkbTop01')
|
// this.getEchartsHead('zhkbTop02')
|
// }, 1000 * 20)
|
|
this.getAllEcharts()
|
|
this.getzhkb02()
|
setInterval(() => {
|
this.getzhkb02()
|
}, 1000 * 18)
|
|
this.getzhkb12()
|
setInterval(() => {
|
this.getzhkb12()
|
}, 1000 * 11)
|
|
this.getzhkb13()
|
setInterval(() => {
|
this.getzhkb13()
|
}, 1000 * 50)
|
},
|
methods: {
|
getAllEcharts() {
|
loadEcharts('zhkb01', zhkb01())
|
loadEcharts('zhkb03', zhkb03())
|
loadEcharts('zhkb03_2', zhkb03())
|
loadEcharts('zhkb04', zhkb04())
|
loadEcharts('zhkb05', zhkb05())
|
loadEcharts('zhkb06', zhkb06())
|
loadEcharts('zhkb06_2', zhkb06())
|
loadEcharts('zhkb07_1', zhkb07())
|
loadEcharts('zhkb07_2', zhkb07())
|
loadEcharts('zhkb07_3', zhkb07())
|
loadEcharts('zhkb07_4', zhkb07())
|
loadEcharts('zhkb07_5', zhkb07())
|
loadEcharts('zhkb07_6', zhkb07())
|
loadEcharts('zhkb08', zhkb08())
|
loadEcharts('zhkb09', zhkb09())
|
loadEcharts('zhkb10', zhkb10())
|
loadEcharts('zhkb11', zhkb11())
|
|
setInterval(() => {
|
loadEcharts('zhkb01', zhkb01())
|
}, 1000 * 13)
|
setInterval(() => {
|
loadEcharts('zhkb03', zhkb03())
|
loadEcharts('zhkb03_2', zhkb03())
|
}, 1000 * 14)
|
setInterval(() => {
|
loadEcharts('zhkb04', zhkb04())
|
}, 1000 * 15)
|
setInterval(() => {
|
loadEcharts('zhkb05', zhkb05())
|
}, 1000 * 9)
|
setInterval(() => {
|
loadEcharts('zhkb06', zhkb06())
|
loadEcharts('zhkb06_2', zhkb06())
|
}, 1000 * 8)
|
setInterval(() => {
|
loadEcharts('zhkb07_1', zhkb07())
|
loadEcharts('zhkb07_2', zhkb07())
|
loadEcharts('zhkb07_3', zhkb07())
|
loadEcharts('zhkb07_4', zhkb07())
|
loadEcharts('zhkb07_5', zhkb07())
|
loadEcharts('zhkb07_6', zhkb07())
|
}, 1000 * 5)
|
setInterval(() => {
|
loadEcharts('zhkb08', zhkb08())
|
}, 1000 * 6.5)
|
setInterval(() => {
|
loadEcharts('zhkb09', zhkb09())
|
}, 1000 * 10.5)
|
setInterval(() => {
|
loadEcharts('zhkb10', zhkb10())
|
}, 1000 * 7.5)
|
setInterval(() => {
|
loadEcharts('zhkb11', zhkb11())
|
}, 1000 * 11.5)
|
},
|
getzhkb13() {
|
const colorList = ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247', '#00FFFF', '#ff00ff', '#00ff00', '#ffff00', '#ff0000', '#0000ff']
|
const data = [
|
{ name: '产品1', value: 100 },
|
{ name: '产品2', value: 200 },
|
{ name: '产品3', value: 300 },
|
{ name: '产品4', value: 400 },
|
{ name: '产品5', value: 500 },
|
{ name: '产品6', value: 550 },
|
{ name: '产品7', value: 570 },
|
{ name: '产品8', value: 570 },
|
{ name: '产品9', value: 570 },
|
{ name: '产品10', value: 570 },
|
{ name: '产品11', value: 570 },
|
{ name: '产品12', value: 570 }
|
]
|
const option = {
|
backgroundColor: 'transparent',
|
grid: {
|
left: '0%',
|
right: '0%',
|
bottom: '0%',
|
top: '20%',
|
containLabel: true
|
},
|
title: {
|
text: '38%',
|
// subtext: '3',
|
textStyle: {
|
fontSize: 26,
|
color: '#09d8f2',
|
lineHeight: 20
|
},
|
// subtextStyle: {
|
// fontSize: 28,
|
// color: '#333'
|
// },
|
textAlign: 'center',
|
left: '74%',
|
top: '55%'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
// type: 'scroll',
|
orient: 'vertical',
|
left: '4%',
|
top: '20%',
|
itemGap: 20,
|
// selectedMode: false,
|
// icon: 'pin',
|
icon: 'roundRect',
|
data: data.map(r => r.name),
|
textStyle: {
|
color: colorList.map(r => r),
|
fontSize: 16,
|
rich: {
|
uname: {
|
width: 100
|
},
|
unum: {
|
// color: '#4ed139',
|
color: function(value, index) {
|
console.log(value, index)
|
},
|
width: 20,
|
align: 'right'
|
}
|
}
|
}
|
// formatter(name) {
|
// return `{uname|${name}}{unum|5000吨}`
|
// }
|
},
|
color: colorList,
|
series: [
|
{
|
// name: 'title',
|
type: 'pie',
|
radius: [60, 90],
|
center: ['75%', '60%'],
|
label: {
|
show: false
|
},
|
labelLine: {
|
show: false
|
},
|
// itemStyle: {
|
// borderWidth: 3,
|
// borderColor: '#fff'
|
// },
|
data: data
|
}
|
]
|
}
|
const myChart = echarts.init(document.getElementById('zhkb13'))
|
|
if (option.textStyle == null) {
|
option.textStyle = {
|
fontFamily: 'Microsoft YaHei',
|
color: '#ffffff'
|
}
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.clear()
|
myChart.setOption(option, true)
|
|
window.addEventListener('resize', function() {
|
myChart.resize()
|
})
|
|
var index = 0 // 播放所在下标
|
var mTime = setInterval(function() {
|
myChart.dispatchAction({
|
type: 'showTip',
|
seriesIndex: 0,
|
dataIndex: index
|
})
|
index++
|
if (index > data.length - 1) {
|
index = 0
|
}
|
}, 2000)
|
|
var currentIndex = -1 // 当前高亮图形在饼图数据中的下标
|
var changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器
|
|
function highlightPie() { // 取消所有高亮并高亮当前图形
|
// 遍历饼图数据，取消所有图形的高亮效果
|
option.series[0].data.forEach((item, index) => {
|
myChart.dispatchAction({
|
type: 'downplay',
|
// type: 'showTip',
|
seriesIndex: 0,
|
dataIndex: index
|
})
|
})
|
|
// // 高亮当前图形
|
myChart.dispatchAction({
|
type: 'highlight',
|
seriesIndex: 0,
|
dataIndex: currentIndex
|
})
|
}
|
|
myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
|
clearInterval(changePieInterval)
|
currentIndex = params.dataIndex
|
highlightPie()
|
})
|
|
myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
|
if (changePieInterval) {
|
clearInterval(changePieInterval)
|
}
|
changePieInterval = setInterval(selectPie, 1000)
|
})
|
|
function selectPie() { // 高亮效果切换到下一个图形
|
var dataLen = option.series[0].data.length
|
currentIndex = (currentIndex + 1) % dataLen
|
highlightPie()
|
}
|
},
|
getzhkb12() {
|
const option = {
|
backgroundColor: 'transparent',
|
grid: {
|
left: '0%',
|
right: '0%',
|
bottom: '0%',
|
top: '0%',
|
containLabel: true
|
},
|
title: {
|
text: '85%',
|
x: '36%',
|
y: '40%',
|
textStyle: {
|
color: '#fff',
|
fontSize: 26
|
}
|
},
|
series: [
|
{
|
type: 'liquidFill',
|
radius: '80%',
|
// data: [0.6],
|
data: [0.6, 0.4, 0.2],
|
backgroundStyle: {
|
color: {
|
type: 'radial',
|
x: 0.5,
|
y: 0.5,
|
r: 0.5,
|
colorStops: [
|
{
|
offset: 0,
|
color: 'rgba(0,24,55, 0)'
|
},
|
{
|
offset: 0.75,
|
color: 'rgba(0,24,55, 0)'
|
},
|
{
|
offset: 1,
|
color: 'rgba(37,237,259, 1)'
|
}],
|
globalCoord: false
|
}
|
},
|
outline: {
|
borderDistance: 0,
|
itemStyle: {
|
borderWidth: 0,
|
borderColor: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [{
|
offset: 0,
|
color: 'rgba(50,115,256, 1)'
|
}, {
|
offset: 0.5,
|
color: 'rgba(50,115,233, .75)'
|
}, {
|
offset: 1,
|
color: 'rgba(50,115,233, 1)'
|
}],
|
globalCoord: false
|
}
|
}
|
},
|
color: ['rgba(9,216,242, .8)', 'rgba(9,216,242, 0.6)', 'rgba(9,216,242, 0.4)'],
|
// color: {
|
// type: 'linear',
|
// x: 0,
|
// y: 0,
|
// x2: 0,
|
// y2: 1
|
// colorStops: [{
|
// offset: 0,
|
// color: 'rgba(37,237,259, 1)'
|
// }, {
|
// offset: 0.5,
|
// color: 'rgba(0,100,259, 0.5)'
|
// }, {
|
// offset: 1,
|
// color: 'darkblue'
|
// }
|
// ]
|
// globalCoord: false
|
// },
|
label: {
|
normal: {
|
formatter: ''
|
}
|
}
|
}
|
]
|
}
|
const myChart = echarts.init(document.getElementById('zhkb12'))
|
|
if (option.textStyle == null) {
|
option.textStyle = {
|
fontFamily: 'Microsoft YaHei',
|
color: '#ffffff'
|
}
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.clear()
|
myChart.setOption(option, true)
|
|
window.addEventListener('resize', function() {
|
myChart.resize()
|
})
|
},
|
getEchartsHead(id) {
|
const barWidth = 12
|
var data1 = [100]
|
const titlename = ['时间']
|
const valdata = [100]
|
const option = {
|
backgroundColor: 'transparent',
|
// animationDuration: 0,
|
// animationDurationUpdate: 1000 * 30,
|
// animationEasing: 'linear',
|
// animationEasingUpdate: 'linear',
|
grid: {
|
left: '%',
|
top: '20%',
|
bottom: '0%',
|
right: '5%',
|
containLabel: true
|
},
|
xAxis: {
|
show: false,
|
inverse: true
|
},
|
yAxis: [
|
{
|
show: false,
|
data: titlename,
|
inverse: true,
|
axisLine: {
|
show: false
|
},
|
splitLine: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
}
|
},
|
{
|
show: false,
|
inverse: true,
|
data: titlename,
|
axisLabel: {
|
textStyle: {
|
fontSize: 12,
|
color: '#fff'
|
}
|
},
|
axisLine: {
|
show: false
|
},
|
splitLine: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
}
|
}
|
],
|
series: [
|
// 内
|
{
|
type: 'bar',
|
barWidth: barWidth,
|
legendHoverLink: false,
|
symbolRepeat: true,
|
silent: true,
|
itemStyle: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 1,
|
y2: 0,
|
colorStops: [
|
{
|
offset: 0,
|
color: '#74ddff' // 0% 处的颜色
|
},
|
{
|
offset: 1,
|
color: '#ffc975' // 100% 处的颜色
|
}
|
]
|
},
|
shadowBlur: 6,
|
shadowColor: '#74ddff'
|
},
|
data: data1,
|
z: 1,
|
animationEasing: 'elasticOut'
|
},
|
// 背景
|
{
|
type: 'pictorialBar',
|
animationDuration: 0,
|
symbolRepeat: 'fixed',
|
symbolMargin: '20%',
|
symbol: 'roundRect',
|
symbolSize: [6, barWidth],
|
itemStyle: {
|
normal: {
|
color: '#12272A'
|
}
|
},
|
label: {
|
show: false
|
},
|
data: data1,
|
z: 0,
|
animationEasing: 'elasticOut'
|
},
|
// 分隔
|
{
|
type: 'pictorialBar',
|
itemStyle: {
|
color: '#000'
|
},
|
symbolRepeat: 'fixed',
|
symbolMargin: 4,
|
symbol: 'roundRect',
|
symbolClip: true,
|
symbolSize: [2, barWidth],
|
symbolPosition: 'start',
|
symbolOffset: [0, 0],
|
data: data1,
|
z: 2,
|
animationEasing: 'elasticOut'
|
},
|
// 图标
|
{
|
name: '图标',
|
type: 'pictorialBar',
|
symbol:
|
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
|
symbolSize: [50, 50],
|
symbolOffset: [-25, 0],
|
z: 12,
|
itemStyle: {
|
normal: {
|
color: '#14b1eb'
|
}
|
},
|
symbolPosition: 'end',
|
data: data1
|
}
|
// 外框
|
// {
|
// name: '外框',
|
// type: 'bar',
|
// barGap: '-100%', // 设置外框粗细
|
// yAxisIndex: 1,
|
// data: [100],
|
// barWidth: 25,
|
// itemStyle: {
|
// normal: {
|
// color: 'none',
|
// borderColor: '#74ddff',
|
// },
|
// },
|
// },
|
]
|
}
|
const myChart = echarts.init(document.getElementById(id))
|
|
if (option.textStyle == null) {
|
option.textStyle = {
|
fontFamily: 'Microsoft YaHei',
|
color: '#ffffff'
|
}
|
}
|
|
// function run() {
|
// let value = 100
|
// if (value < 120) {
|
// value++
|
// } else {
|
// value = 120
|
// }
|
// data1 = [value]
|
// myChart.setOption({
|
// series: [
|
// {
|
// type: 'bar',
|
// data: data1
|
// }
|
// ]
|
// })
|
// }
|
// setTimeout(function() {
|
// run()
|
// }, 0)
|
// setInterval(function() {
|
// run()
|
// }, 1000 * 30)
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.clear()
|
myChart.setOption(option, true)
|
|
window.addEventListener('resize', function() {
|
myChart.resize()
|
})
|
|
// return option
|
},
|
|
getzhkb02() {
|
const data = [
|
{
|
'name': '生产已排满',
|
'value': 40
|
}, {
|
'name': '物料不足',
|
'value': 10
|
}, {
|
'name': '插班',
|
'value': 20
|
}, {
|
'name': '其它',
|
'value': 30
|
}]
|
|
const colorArr = ['#00FFFF', '#FFFF00', '#00FF00', '#FF00FF']
|
const option = {
|
color: colorArr,
|
backgroundColor: 'transparent',
|
title: {
|
show: true,
|
text: '预期计划原因分析',
|
// subtext: 7789,
|
textStyle: {
|
color: '#09d8f2',
|
fontSize: 16
|
// align: 'center'
|
},
|
// subtextStyle: {
|
// fontSize: 30,
|
// color: ['#ff9d19']
|
// },
|
x: 'center',
|
y: '-2%'
|
},
|
grid: {
|
left: '0%',
|
right: '4%',
|
bottom: '4%',
|
top: '20%',
|
containLabel: true
|
},
|
legend: {
|
orient: 'vertical',
|
top: 'middle',
|
left: '5%',
|
textStyle: {
|
color: colorArr.map(r => r),
|
fontSize: 16
|
},
|
icon: 'roundRect',
|
data: data
|
},
|
series: [
|
// 主要展示层的
|
{
|
|
left: 150,
|
radius: ['40%', '61%'],
|
center: ['50%', '50%'],
|
type: 'pie',
|
label: {
|
normal: {
|
show: true,
|
formatter: '{c}%',
|
textStyle: {
|
fontSize: 16,
|
color: function(value, index) { // 此代码无效
|
console.log(value, index, 345678)
|
// let temp = ''
|
// colorArr.forEach((it, ind) => {
|
// if (index === ind) {
|
// temp = it
|
// }
|
// })
|
// return temp
|
}
|
},
|
position: 'outside'
|
},
|
emphasis: {
|
show: true
|
}
|
},
|
labelLine: {
|
normal: {
|
show: true,
|
length: 30,
|
length2: 55
|
},
|
emphasis: {
|
show: true
|
}
|
},
|
name: '民警训练总量',
|
data: data
|
|
},
|
// 边框的设置
|
{
|
left: 150,
|
radius: ['30%', '34%'],
|
center: ['50%', '50%'],
|
type: 'pie',
|
label: {
|
normal: {
|
show: false
|
},
|
emphasis: {
|
show: false
|
}
|
},
|
labelLine: {
|
normal: {
|
show: false
|
},
|
emphasis: {
|
show: false
|
}
|
},
|
animation: false,
|
tooltip: {
|
show: false
|
},
|
data: [{
|
value: 1,
|
itemStyle: {
|
// color: 'rgba(250,250,250,0.3)'
|
color: '#09d8f2'
|
}
|
}]
|
}, {
|
left: 150,
|
name: '外边框',
|
type: 'pie',
|
clockWise: false, // 顺时加载
|
hoverAnimation: false, // 鼠标移入变大
|
center: ['50%', '50%'],
|
radius: ['65%', '65%'],
|
label: {
|
normal: {
|
show: false
|
}
|
},
|
data: [{
|
value: 9,
|
name: '',
|
itemStyle: {
|
normal: {
|
borderWidth: 2,
|
// borderColor: '#0b5263'
|
borderColor: '#09d8f2'
|
}
|
}
|
}]
|
}
|
]
|
}
|
const myChart = echarts.init(document.getElementById('zhkb02'))
|
|
if (option.textStyle == null) {
|
option.textStyle = {
|
fontFamily: 'Microsoft YaHei',
|
color: '#ffffff'
|
}
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.clear()
|
myChart.setOption(option, true)
|
|
window.addEventListener('resize', function() {
|
myChart.resize()
|
})
|
|
let currentIndex = -1 // 当前高亮图形在饼图数据中的下标
|
const changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器
|
|
function highlightPie() { // 取消所有高亮并高亮当前图形
|
// for (var idx in option.series[0].data) {
|
// // 遍历饼图数据，取消所有图形的高亮效果
|
// myChart.dispatchAction({
|
// type: 'downplay',
|
// seriesIndex: 0,
|
// dataIndex: idx
|
// })
|
// }
|
// 遍历饼图数据，取消所有图形的高亮效果
|
option.series[0].data.forEach((item, index) => {
|
myChart.dispatchAction({
|
type: 'downplay',
|
seriesIndex: 0,
|
dataIndex: index
|
})
|
})
|
|
// 高亮当前图形
|
myChart.dispatchAction({
|
type: 'highlight',
|
seriesIndex: 0,
|
dataIndex: currentIndex
|
})
|
}
|
|
myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
|
clearInterval(changePieInterval)
|
currentIndex = params.dataIndex
|
highlightPie()
|
})
|
|
myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
|
if (changePieInterval) {
|
clearInterval(changePieInterval)
|
}
|
changePieInterval = setInterval(selectPie, 1000)
|
})
|
|
function selectPie() { // 高亮效果切换到下一个图形
|
var dataLen = option.series[0].data.length
|
currentIndex = (currentIndex + 1) % dataLen
|
highlightPie()
|
}
|
|
// return myChart
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
$kbBorderColor: rgba(9, 216, 242, 0.4);
|
$color01: #00FFFF; //边框四个角的颜色
|
$color02: #09d8f2; //看板标题和小标题颜色
|
.kb_body {
|
width: 1920px;
|
height: 1080px;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
//color: #09d8f2;
|
color: $color01;
|
//background-color: 'transparent';
|
}
|
|
.kb_background {
|
position: absolute;
|
bottom: 0;
|
width: 1920px;
|
height: 887px;
|
background: url('../../assets/images/body.jpg') no-repeat;
|
z-index: -1;
|
//opacity: 0.9;
|
}
|
|
.kb_background2 {
|
position: absolute;
|
top: -694px;
|
width: 1920px;
|
height: 887px;
|
background: url('../../assets/images/body.jpg') no-repeat;
|
z-index: -1;
|
//opacity: 0.9;
|
}
|
|
.kb_flex {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.kb_head {
|
display: flex;
|
justify-content: center;
|
line-height: 90px;
|
font-size: 46px;
|
margin: auto;
|
z-index: 2;
|
color: $color02;
|
letter-spacing: 2px;
|
font-weight: bolder;
|
}
|
|
//.kb_headerPic {
|
// position: absolute;
|
// top: 39px;
|
// width: 1808px;
|
// height: 12px;
|
// background: url("../../assets/images/kb_headtitle2.png") no-repeat;
|
// margin-left: 56px;
|
// z-index: 2;
|
//}
|
.kb_headerPic {
|
position: absolute;
|
top: 35px;
|
width: 1920px;
|
//height: 12px;
|
//background: url("../../assets/images/kb_headtitle2.png") no-repeat;
|
//margin-left: 56px;
|
z-index: 2;
|
}
|
|
.kb_content {
|
height: 990px;
|
display: flex;
|
//padding: 20px;
|
padding: 0 20px 20px 20px;
|
}
|
|
.kb_content_left {
|
width: 552px;
|
|
.kb_content_left_top {
|
height: 380px;
|
|
.scjh {
|
height: 340px;
|
}
|
}
|
|
.kb_content_left_bottom {
|
height: 570px;
|
|
.ckgl {
|
height: 530px;
|
}
|
}
|
}
|
|
.kb_content_center {
|
width: 736px;
|
margin: 0 20px;
|
|
.kb_content_center_top {
|
height: 475px;
|
|
.xsdd {
|
height: 435px
|
}
|
}
|
|
.kb_content_center_bottom {
|
height: 475px;
|
|
.cjhn {
|
height: 435px;
|
}
|
}
|
}
|
|
.kb_content_right {
|
width: 552px;
|
|
.kb_content_right_top {
|
height: 285px;
|
|
.zlfx {
|
height: 240px;
|
}
|
}
|
|
.kb_content_right_center {
|
height: 285px;
|
|
.ryfx {
|
height: 240px;
|
}
|
}
|
|
.kb_content_right_bottom {
|
height: 380px;
|
|
.sbfx {
|
height: 340px;
|
}
|
}
|
}
|
|
.kb_flex_column {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.kb_flex_space_between {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.kb_block {
|
border: 1px solid $color01;
|
box-shadow: $color02 0 0 10px;
|
border-radius: 10px;
|
padding: 10px;
|
//background-color: rgba(0,255,255,1);
|
}
|
|
.box03 {
|
width: 124px;
|
height: 139px;
|
background: url("../../assets/images/box03.png");
|
}
|
|
.middle_title {
|
display: flex;
|
align-items: flex-end;
|
height: 40px;
|
margin-left: 5px;
|
margin-bottom: 10px;
|
|
.svg_class {
|
font-size: 36px;
|
}
|
|
.title {
|
font-size: 26px;
|
margin-left: 5px;
|
}
|
|
}
|
|
.small_title {
|
height: 16px;
|
display: flex;
|
|
.small_bar {
|
width: 2px;
|
height: 16px;
|
background: $color01;
|
margin-right: 5px;
|
}
|
}
|
|
//边框四个角
|
.horn {
|
background: linear-gradient($color01, $color01) left top,
|
linear-gradient($color01, $color01) left top,
|
linear-gradient($color01, $color01) right top,
|
linear-gradient($color01, $color01) right top,
|
linear-gradient($color01, $color01) left bottom,
|
linear-gradient($color01, $color01) left bottom,
|
linear-gradient($color01, $color01) right bottom,
|
linear-gradient($color01, $color01) right bottom;
|
background-repeat: no-repeat;
|
//background-size: 5px 20px, 20px 5px;
|
background-size: 3px 20px, 20px 3px;
|
}
|
|
//文字3D
|
//.threeD {
|
// text-shadow:$color02 4px 4px 4px
|
//}
|
</style>
|
