141 lines
3.3 KiB
Vue
141 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<VueEcharts :options="options" autoresize style="width: 100%;height: 100%;"></VueEcharts>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from 'echarts'
|
||
|
|
import echartsMixin from "../mixins/echarts.mixin";
|
||
|
|
export default {
|
||
|
|
name: "Bar",
|
||
|
|
mixins: [echartsMixin],
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
options () {
|
||
|
|
const { xAxis, dataObj } = this.translateData()
|
||
|
|
return {
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
axisLabel: {
|
||
|
|
fontSize: 14,
|
||
|
|
textStyle: {
|
||
|
|
color: '#7da4d4',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: ['#36537D'],
|
||
|
|
type: 'solid',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
splitArea: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
data: xAxis
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '0',
|
||
|
|
right: '0',
|
||
|
|
bottom: '3%',
|
||
|
|
top: '15%',
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
// 坐标轴指示器，坐标轴触发有效
|
||
|
|
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
left: 'right',
|
||
|
|
top: '4%',
|
||
|
|
textStyle: {
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: 14,
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
width: 4
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
show: true,
|
||
|
|
minInterval: 1,
|
||
|
|
splitNumber: 5,
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
fontSize: 14,
|
||
|
|
textStyle: {
|
||
|
|
color: '#7da4d4',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: ['#36537D'],
|
||
|
|
type: 'solid',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitArea: {
|
||
|
|
show: false,
|
||
|
|
areaStyle: {
|
||
|
|
color: 'rgba(54,101,146,0.15)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: Object.keys(dataObj).map((item, attrIndex) => {
|
||
|
|
const data = dataObj[item]
|
||
|
|
const _data = data.map((datum, index) => {
|
||
|
|
if (datum.name === xAxis[index]) {
|
||
|
|
return datum.value
|
||
|
|
}
|
||
|
|
return null
|
||
|
|
})
|
||
|
|
const colors = this.colors[attrIndex]
|
||
|
|
const [ startColor, endColor ] = colors
|
||
|
|
return {
|
||
|
|
barWidth: 6,
|
||
|
|
type: 'bar',
|
||
|
|
name: item,
|
||
|
|
data: _data,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: this.hexToRgba(startColor || '#1EB5FF', '1'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: this.hexToRgba(endColor || startColor || this.colors[attrIndex] || '#1EB5FF', '0.2'),
|
||
|
|
},
|
||
|
|
]),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|