<div class="echart" ref="myChart">div>
<div class="pie" ref="pie">div>
vue最后不要直接操作dom,所以我这里选择使用ref
drawLine() {
const myChart = this.$echarts.init(this.$refs.myChart)
myChart.setOption({
title: { text: '项目数据' },
xAxis: {
data: ['筹备阶段', '在建阶段', '停工阶段', '完工阶段', '竣工阶段'],
},
yAxis: {
type: 'value'
},
color: '#2196f3',
series: [
{
type: 'bar',
data: [23, 24, 18, 25, 27],
showBackground: true,
barWidth: '50%'
}
],
tooltip: { //鼠标悬浮时,设置样式
trigger: 'axis',
backgroundColor: 'rgba(32, 33, 36,.7)',
borderColor: 'rgba(32, 33, 36,0.20)',
borderWidth: 1,
textStyle: {
color: '#fff',
fontSize: '12'
},
axisPointer: {
type: 'shadow',
label: {
backgroundColor: '#6a7985'
}
},
}
})
},
initPie() {
const pie = this.$echarts.init(this.$refs.pie)
pie.setOption({
title: {
text: '人员数据',
left: 'center'
},
color: ['#00BCD4', '#ff5722', '#FF9800'],
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '企业人员数据',
type: 'pie',
radius: ['40%', '70%'],
data: [
{ value: 1048, name: '累计用工数', },
{ value: 735, name: '当前用工数', },
{ value: 580, name: '管理人员数', },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
}
mounted() {
this.$refs.basicRef.drawLine()
this.$refs.basicRef.initPie()
}
注意: 修改颜色的时候,最后不要使用透明,很容易鼠标悬浮后,就bar消失闪烁
要带透明度就用rgba