diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue index 25c134ed..ad0d1a73 100644 --- a/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue +++ b/src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue @@ -6,76 +6,108 @@ import echarts from 'echarts4' export default { props: { - data: { + title: { + type: Object, + default: () => ({ + text: '' + }) + }, + grid: { type: Array, - default: () => [{ value: 1, name: '' }] + default: () => ['15%', '2%', '2%', '2%'] }, color: { type: Array, - default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6'] + default: () => ['#5EC2D0', '#61D2B9', '#F67F51', '#7851F6'] }, - title: { - type: String, - default: '' - }, - subTitle: { - type: String, - default: '' - }, - radius: { + xData: { + required: true, type: Array, - default: () => ['65%', '80%'] + default: () => [] + }, + yData: { + required: true, + type: Array, + default: () => [] } }, mounted() { this.jBarChart = echarts.init(this.$refs.jBarChart) - this.createRingChart() + this.createChart() }, data() { return { jBarChart: null } }, methods: { - createRingChart() { + createChart() { + const { title, grid, color, xData, yData } = this const option = { - color: this.color, title: { - show: true, - text: this.title, - x: '48%', - y: '36%', - z: 5, - textAlign: 'center', + text: title.text, + right: 20, textStyle: { - color: 'rgba(255, 255, 255, 1)', - fontSize: 20 - }, - subtext: this.subTitle, - subtextStyle: { - color: 'rgba(255, 255, 255, 0.8)', - fontSize: 13 + fontSize: '14px', + color: '#5EC2D0', + fontWeight: 'normal' } }, grid: { - right: 0 + top: grid[0], + right: grid[1], + bottom: grid[2], + left: grid[3], + containLabel: true }, - legend: { - show: false + color, + xAxis: { + type: 'category', + data: xData, + axisLine: { + show: true, + lineStyle: { + type: [5, 10] + } + }, + axisLabel: { + show: true, + textStyle: { + color: '#fff' + } + }, + axisTick: { + show: false + } + }, + yAxis: { + type: 'value', + splitLine: { + show: true, + lineStyle: { + type: [5, 10], + color: '#323D50' + } + }, + axisLine: { + show: true, + lineStyle: { + type: [5, 10] + } + }, + axisLabel: { + show: true, + textStyle: { + color: '#fff' + } + }, + axisTick: { + show: false + } }, series: [ { - name: '', - type: 'pie', - radius: this.radius, - avoidLabelOverlap: false, - hoverAnimation: false, - label: { - show: false, - position: 'center' - }, - labelLine: { - show: false - }, - data: this.data + data: yData, + type: 'bar', + barWidth: 15 } ] } diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftBottom.vue index 38f1046c..4ea4aba8 100644 --- a/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftBottom.vue +++ b/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftBottom.vue @@ -3,13 +3,7 @@
{{ title }}
- +
@@ -25,7 +19,10 @@ export default { } }, data() { - return {} + return { + xData: ['地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师'], + yData: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33] + } } }