<style>
@import '../../css/style.css';
</style>
<style>
@import "../../css/vue_single_bar.css";
</style>
<template>
<div class="single_bar">
<chart class="bar" :options="singleBar"></chart>
<div class="space"></div>
<div class="barBtn">
<button @click="goBar">goBar</button>
<button @click="goShadowLine">goShadowLine</button>
</div>
</div>
</template>
<script>
import eCharts from 'vue-echarts/components/ECharts'
export default {
data() {
return {
data_val1: [],
_boyActual: [],
_college:[]}
},
created(){
this._boyActual = [100, 100, 150];
this._college = ['3', '2', '1'];
},
methods:{
goBar(){
this.$router.push({path:'/single_line'})
},
goShadowLine(){
this.$router.push({path:'/shadow_line'})
},
},
computed:{
singleBar(){
return{
tooltip: {
show:"true",
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
legend:{
show: true,
data: ['支出' ,'收入'],
bottom: 'bottom'
},
grid: {
left: '12%',
right: '2%',
bottom: '3%',
top:"10%",
containLabel: false
},
calculable: true,
xAxis: {
type: 'value',
show: true,
max: 150,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
yAxis: [
{
type: 'category',
position: "left",
data: this._college,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
color:'#fff'
},
splitLine: {
show: false
}
},
{
type: 'category',
position: "left",
data: this._college,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
color:'#fff'
},
splitLine: {
show: false
}
}],
series: [
{
name: '支出',
type: 'bar',
barWidth: 25,
silent: true,
yAxisIndex: 1,
label: {
normal: {
show: true,
color:'#fff',
formatter: function(data) {
return [120,100,90][data.dataIndex] ;
},
position: 'insideRight'
}
},
itemStyle: {
normal: {
color: new eCharts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#F4FDFF'
},
{
offset: 0.5,
color: 'rgb(5,250,238,0.4)'
},
{
offset: 1,
color: '#05FAEE'
}
]),
}
},
data:[120,100,90]
},
{
z: 10,
name: '',
type: 'bar',
barWidth: 1,
silent: false,
yAxisIndex: 0,
itemStyle: {
normal: {
color: '#05FAEE'
}
},
data: [120,100,90]
},
{
name: '收入',
type: 'bar',
barWidth: 25,
silent: true,
yAxisIndex:1,
label: {
normal: {
show: true,
color:'#fff',
formatter: function(data) {
return [150,120,110][data.dataIndex] ;
},
position: 'insideRight'
}
},
itemStyle: {
normal: {
color: new eCharts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#FFFFFF'
},
{
offset: 0.5,
color: 'rgb(254,254,0,0.4)'
},
{
offset: 1,
color: '#FEFE00'
}
]),
}
},
data: [150,120,110],
z: 0,
},
{
z: 2,
name: '',
type: 'bar',
barWidth: 1,
silent: false,
yAxisIndex: 0,
barGap: 35,
itemStyle: {
normal: {
color: '#FEFE00',
}
},
data: [150,120,110]
}
]
}
}
}
}
</script>
vue echarts 柱形图
最新推荐文章于 2024-08-01 13:51:19 发布