大屏：echarts图表-引入

一、柱状图

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