1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
<div :id="idstr"></div>
</template>
<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data () {
return {
dataObj: {},
option: {},
chart: null,
lengendColor: ['#00E8FF', '#746ef8', '#F8E71C', '#7ED321', '#FF663B'],
clickNum: [1, 1, 1, 1, 1]
}
},
props: ['message', 'idstr', 'performActive'],
mounted () {
console.log(this.performActive)
this.drawLine()
},
methods: {
drawLine () {
const vm = this
// 基于准备好的dom，初始化echarts实例
vm.chart = echarts.init(document.getElementById(vm.idstr))
// 清空图表
vm.chart.clear()
vm.option = {
xAxis: [
{
type: 'category',
data: ['客户营销', '解决方案', '智能制造', '生态合作', 'IT服务'],
axisPointer: {
type: 'shadow'
},
axisLine: {
lineStyle: {
color: '#FFF'
}
}
}
],
yAxis: [
{
type: 'value',
name: vm.performActive === 1 ? '分数' : '部门',
min: 0,
max: 250,
interval: 50,
axisLine: {
lineStyle: {
color: '#FFF'
}
}
}
],
grid: {
top: '20%',
left: '10%',
right: '10%',
bottom: '5%',
width: '80%', // 图例宽度
height: '70%' // 图例高度
},
series: [
{
type: 'bar',
barWidth: '50%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#30DDF4' },
{ offset: 1, color: '#001873' }
])
},
data: [23.2, 76.7, 135.6, 162.2, 32.6]
}
]
}
vm.drawBar()
},
drawBar () {
// 绘制图表
const vm = this
vm.chart.setOption(vm.option)
vm.eventList()
},
eventList () {
const vm = this
vm.chart.on('click', function (params) {
})
}
},
watch: {
performActive: function (val) {
console.log(val)
const vm = this
setTimeout(function () {
vm.drawLine()
}, 10)
}
}
}
</script>
<style lang="less">
</style>