一、柱状图
1.1 横向
效果图:
代码演示:
<template>
<div>
<div id="vechile"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "vehicles",
data() {
return {
option: {
grid: {
left: '4%',
right: '50px',
bottom: '3%',
top:'3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.2],
splitLine: {
show: false
},
axisLabel: {
formatter: function(){
// x轴文字不显示
return "";
},
margin: 10,
color: '#FFFFFFFF',
fontSize: 16
},
},
yAxis: [{
type: 'category',
// axisLine: {show:false},
axisTick: {
show:false},
splitLine:{
show:false},
axisLabel: {
margin: 45,
color: '#FFFFFFFF',
fontSize: 16,
},
data: ['度假区司法所', '石淙司法所', '千金司法所', '旧馆镇司法所', '善琏司法所', '和孚司法所','菱湖司法所','双林司法所','练市司法所','南浔司法所','东迁司法所']
},{
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
margin: 39,
textStyle: {
color: '#ffffff',
fontSize: 14,
},
},
data: [42, 42, 142, 242, 42, 142, 242, 142, 148, 42, 250],
}],
series: [{
type: 'bar',
data: [250, 42, 148, 142, 242, 142, 42, 242, 142, 42, 42],
barWidth:'16px',
showBackground: true,
backgroundStyle