114 lines
2.9 KiB
Vue
114 lines
2.9 KiB
Vue
<template>
|
|
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
|
|
</template>
|
|
<script>
|
|
// 引入 ECharts 主模块
|
|
const echarts = require('echarts/lib/echarts');
|
|
// 引入柱状图
|
|
require('echarts/lib/chart/bar');
|
|
require('echarts/lib/chart/line');
|
|
// 引入提示框和标题组件
|
|
require('echarts/lib/component/tooltip');
|
|
require('echarts/lib/component/title');
|
|
|
|
require('echarts/lib/component/visualMap');
|
|
export default {
|
|
name: 'barPercent',
|
|
props: {
|
|
className: {
|
|
type: String,
|
|
default: 'bar-percent-chart'
|
|
},
|
|
id: {
|
|
type: String,
|
|
default: 'bar-percent-chart'
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '200px'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '200px'
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
mounted() {
|
|
this.initBar();
|
|
},
|
|
methods: {
|
|
initBar() {
|
|
this.chart = echarts.init(document.getElementById(this.id));
|
|
|
|
const xAxisData = [];
|
|
const data = [];
|
|
for (let i = 0; i < 30; i++) {
|
|
xAxisData.push(i + '号');
|
|
data.push(Math.round(Math.random() * 2 + 3))
|
|
}
|
|
|
|
this.chart.setOption(
|
|
{
|
|
backgroundColor: '#08263a',
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
show: false,
|
|
data: xAxisData
|
|
},
|
|
visualMap: {
|
|
show: false,
|
|
min: 0,
|
|
max: 50,
|
|
dimension: 0,
|
|
inRange: {
|
|
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
|
|
}
|
|
},
|
|
yAxis: {
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#4a657a'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#08263f'
|
|
}
|
|
},
|
|
axisTick: {}
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
data,
|
|
name: '撸文数',
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 5,
|
|
shadowBlur: 10,
|
|
shadowColor: '#111'
|
|
}
|
|
},
|
|
animationEasing: 'elasticOut',
|
|
animationEasingUpdate: 'elasticOut',
|
|
animationDelay(idx) {
|
|
return idx * 20;
|
|
},
|
|
animationDelayUpdate(idx) {
|
|
return idx * 20;
|
|
}
|
|
}]
|
|
}
|
|
)
|
|
}
|
|
}
|
|
}
|
|
</script>
|