<template> <div id="staff-bar" class="container"> <ve-bar :style='{"height": height,"width": width}' :width='width' :height='height' :judge-width="true" :data="chartData" :extend="extend" :settings="chartSettings"/> </div> </template> <script> import * as echarts from 'echarts'; export default { name: 'PowerLine', data() { return { title: { text: '到岗率', textStyle: { color: '#cce9ff', fontSize: 15 }, padding: [5, 0, 0, 120] }, height: '0', width: '0', chartSettings: { labelMap: { name: '时间' }, metrics: [], dimension: ['name'] }, extend: { grid: { bottom: '0%', top: '1%', containLabel: true }, yAxis: { axisLabel: { color: '#cce9ff' } }, xAxis: { axisLabel: { color: '#cce9ff' } }, legend: { show: false, // type: 'scroll', top: '0px', textStyle: { color: '#cce9ff', fontWeight: 'bold' } }, series: { color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false), type: 'bar', symbol: 'circle', symbolSize: 8, stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' } }, tooltip: { trigger: 'axis', position: function(pt) { return [pt[0], '10'] } } }, chartData: { columns: [], rows: [] } } }, mounted() { this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px' this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px' this.fetchData() }, methods: { // 获取数据 fetchData() { // statisticsMonth().then(response => { // if(response.data.length>0){ // const arr = response.data.map((item)=> { // const result = {name: item.name} // for (let i = 0; i < item.data.length; i++) { // result[item.data[i].name] = item.data[i].count // } // return result // }) // const area = response.data[0].data.map(item=>item.name) // this.chartData.columns = ['name', ...area] // this.chartSettings.metrics = area // this.chartSettings.labelMap = {'name':'姓名'} // this.chartData.rows = arr // } // }) this.chartData.columns = ['name', '到岗率'] this.chartSettings.metrics = ['到岗率'] this.chartSettings.labelMap = { 'name': '姓名' } // 模拟数据 this.chartData.rows = [ { name: '保安0', '到岗率': '91' }, { name: '保安1', '到岗率': '94' }, { name: '保安2', '到岗率': '89' }, { name: '保安3', '到岗率': '75' }, { name: '保安4', '到岗率': '88' }, { name: '保安5', '到岗率': '78' }, { name: '保安6', '到岗率': '86' }, { name: '保安7', '到岗率': '82' }, { name: '保安8', '到岗率': '94' }, { name: '保安9', '到岗率': '96' }, ] } } } </script> <style lang="scss" scoped> .container{ position:relative; width: 100%; height:100%; } </style>