| | |
| | | |
| | | export function zhkb04() { |
| | | const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'] |
| | | const data = [330, 404, 780, 509, 150] |
| | | const option = { |
| | | backgroundColor: 'transparent', |
| | | grid: { |
| | |
| | | fontSize: 16 |
| | | } |
| | | }, |
| | | data: ['12566', '12566', '12566', '12566', '12566'] |
| | | |
| | | data: data |
| | | }, |
| | | { |
| | | show: false, |
| | |
| | | name: '条', |
| | | type: 'bar', |
| | | yAxisIndex: 0, |
| | | data: [33, 44, 78, 59, 15], |
| | | data: data.map(r => r / 10), |
| | | label: { |
| | | normal: { |
| | | show: false, |
| | |
| | | } |
| | | }, |
| | | z: 2 |
| | | }] |
| | | } |
| | | ] |
| | | } |
| | | |
| | | return option |
| | |
| | | x: 'center', |
| | | top: '38%', |
| | | textStyle: { |
| | | fontSize: 12, |
| | | fontSize: 14, |
| | | color: '#FFFFFF', |
| | | fontFamily: 'DINAlternate-Bold, DINAlternate', |
| | | foontWeight: 100 |
| | |
| | | ] |
| | | const rich = { |
| | | white: { |
| | | fontSize: 12, |
| | | fontSize: 14, |
| | | color: '#fff', |
| | | fontWeight: '500' |
| | | }, |
| | | bule: { |
| | | fontSize: 12, |
| | | fontSize: 14, |
| | | fontFamily: 'DINBold', |
| | | color: '#fff', |
| | | fontWeight: 100 |
| | |
| | | </div> |
| | | <div class="ckgl kb_block horn kb_flex_column"> |
| | | <div style="height: 60px" class="kb_flex_space_between"> |
| | | <div style="width: 50%;"> |
| | | <div style="width: 188px"> |
| | | <div class="middle_title"> |
| | | <div class="icon"> |
| | | <svg-icon icon-class="zncc" class="svg_class" /> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div style="width: 50%;"> |
| | | <div style="width: 324px"> |
| | | <div class="middle_title"> |
| | | <div class="icon"> |
| | | <svg-icon icon-class="zncc" class="svg_class" /> |
| | |
| | | <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" class="kb_block kb_flex_space_between"> |
| | | <div class="kb_flex_column" style="position: relative"> |
| | | <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">退货率</div> |
| | | <div style="text-align: center;margin-top: 5px;">退货率</div> |
| | | </div> |
| | | <div class="kb_flex_column" style="position: relative"> |
| | | <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">损坏率</div> |
| | | <div style="text-align: center;margin-top: 5px;">损坏率</div> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | <div style="height: 280px;position: relative" class="kb_flex_column"> |
| | |
| | | import { |
| | | loadEcharts, |
| | | zhkb01, |
| | | zhkb02, |
| | | zhkb03, |
| | | zhkb04, |
| | | zhkb05, |
| | |
| | | zhkb07, |
| | | zhkb08, |
| | | zhkb09, |
| | | zhkb10, zhkb11, zhkb12 |
| | | zhkb10, zhkb11 |
| | | } from '@/utils/myEcharts' |
| | | |
| | | import '@/utils/echarts-liquidfill.min.js' |
| | |
| | | this.getAllEcharts() |
| | | |
| | | this.getzhkb02() |
| | | // setInterval(() => { |
| | | // this.getzhkb02() |
| | | // }, 10000) |
| | | setInterval(() => { |
| | | this.getzhkb02() |
| | | }, 1000 * 18) |
| | | |
| | | this.getzhkb12() |
| | | setInterval(() => { |
| | | this.getzhkb12() |
| | | }, 1000 * 11) |
| | | |
| | | this.getzhkb13() |
| | | setInterval(() => { |
| | | this.getzhkb13() |
| | | }, 1000 * 50) |
| | | }, |
| | | methods: { |
| | | getAllEcharts() { |
| | |
| | | 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'] |
| | |
| | | series: [ |
| | | // 主要展示层的 |
| | | { |
| | | |
| | | left: 150, |
| | | radius: ['40%', '61%'], |
| | | center: ['50%', '50%'], |
| | |
| | | }) |
| | | |
| | | let currentIndex = -1 // 当前高亮图形在饼图数据中的下标 |
| | | let changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器 |
| | | const changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器 |
| | | |
| | | function highlightPie() { // 取消所有高亮并高亮当前图形 |
| | | // for (var idx in option.series[0].data) { |