145 lines
4.6 KiB
Vue
145 lines
4.6 KiB
Vue
|
<template>
|
||
|
|
<div class="webBar"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: '',
|
||
|
|
props: {
|
||
|
|
data: Object
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
myChart: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
setData() {
|
||
|
|
var max = Math.max.apply(null, this.data.value);
|
||
|
|
var arr = []
|
||
|
|
for (let i = 0; i < 6; i++) {
|
||
|
|
arr.push(max / 10)
|
||
|
|
}
|
||
|
|
return arr;
|
||
|
|
},
|
||
|
|
// 网站
|
||
|
|
setChart() {
|
||
|
|
let option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
|
|
type: 'none' // 默认为直线，可选为：'line' | 'shadow'
|
||
|
|
},
|
||
|
|
backgroundColor: '#11367a',
|
||
|
|
textStyle: {
|
||
|
|
color: '#6dd0e3',
|
||
|
|
fontSize: 10,
|
||
|
|
},
|
||
|
|
formatter: (params) => {
|
||
|
|
params[1].number = this.data.number
|
||
|
|
return params[1].name + "<br>" + params[1].seriesName + ":" + params[1].number + "/" + params[1].value + "人"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '4%',
|
||
|
|
top: '5%',
|
||
|
|
bottom: 10,
|
||
|
|
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
yAxis:
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
inverse: true,
|
||
|
|
position: 'left',
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#1a3c58'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
margin: 13,
|
||
|
|
fontSize: 10,
|
||
|
|
color: '#75deef'
|
||
|
|
},
|
||
|
|
data: this.data.data
|
||
|
|
},
|
||
|
|
xAxis:
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
,
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '辅助',
|
||
|
|
type: 'bar',
|
||
|
|
stack: '总量',
|
||
|
|
barCategoryGap: 20,
|
||
|
|
barWidth: 8,
|
||
|
|
itemStyle: {
|
||
|
|
color: 'rgba(0,0,0,0)'
|
||
|
|
},
|
||
|
|
data: this.setData()
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: this.data.name,
|
||
|
|
type: 'bar',
|
||
|
|
stack: '总量',
|
||
|
|
barCategoryGap: 20,
|
||
|
|
barWidth: 8,
|
||
|
|
itemStyle: {
|
||
|
|
color: { // 颜色线性渐变
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 1,
|
||
|
|
y2: 0,
|
||
|
|
colorStops: [{
|
||
|
|
offset: 0, color: 'rgb(' + this.data.color + ',0.1)' // 0% 处的颜色
|
||
|
|
}, {
|
||
|
|
offset: 1, color: 'rgb(' + this.data.color + ',1)' // 100% 处的颜色
|
||
|
|
}],
|
||
|
|
globalCoord: false // 缺省为 false
|
||
|
|
},
|
||
|
|
borderRadius: 5,
|
||
|
|
},
|
||
|
|
data: this.data.value
|
||
|
|
},
|
||
|
|
]
|
||
|
|
};
|
||
|
|
if (!this.myChart) this.myChart = this.$echarts(this.$el);
|
||
|
|
this.myChart.clear();
|
||
|
|
this.myChart.resize();
|
||
|
|
this.myChart.setOption(option);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.setChart()
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.webBar {
|
||
|
|
float: left;
|
||
|
|
width: 60%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|