operationNum.vue

<template>
    <div class="display">
        <div class="leftbar">
            <div class="leftnum">
                <img src="../../../../assets/mapinages/Group1120.png" alt="" style="width: 80px;">
                <span style="margin-left: 20px;margin-right: 20px;">充装数量分析</span>
                <img src="../../../../assets/mapinages/Group1121.png" alt="" style="width: 80px;">
            </div>
            <div id="echartsone" style="width:100%;height:300px;"></div>
        </div>
        <div class="centerbar">
            <div class="leftnum">
                <img src="../../../../assets/mapinages/Group1120.png" alt="" style="width: 80px;">
                <span style="margin-left: 20px;margin-right: 20px;">预警分析</span>
                <img src="../../../../assets/mapinages/Group1121.png" alt="" style="width: 80px;">
            </div>
            <div id="echartstwo" style="width:100%;height:300px;"></div>
        </div>
        <div class="rightbar">
            <div class="leftnum">
                <img src="../../../../assets/mapinages/Group1120.png" alt="" style="width: 80px;">
                <span style="margin-left: 20px;margin-right: 20px;">瓶装燃气用户汇总分析</span>
                <img src="../../../../assets/mapinages/Group1121.png" alt="" style="width: 80px;">
            </div>
            <div id="echartsthree" style="width:100%;height:300px;"></div>
        </div>
    </div>
    
</template>
  
  <script>
  import * as echarts from 'echarts';
  export default {
      name:"",
      data () {
          return {
              
          }
      },
      mounted () {
          this.drawLine()
      },
      methods: {
        drawLine() {
        // 基于准备好的dom，初始化echarts实例
            let myChart1 = this.$echarts.init(document.getElementById("echartsone"));
            let myChart2 = this.$echarts.init(document.getElementById("echartstwo"));
            let myChart3 = this.$echarts.init(document.getElementById("echartsthree"));
            // 绘制图表
            myChart1.setOption({
                color: ['#4CC4E0'],
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '1%',
                    containLabel: true
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ['平山', '东回舍', '温塘', '南甸', '古月', '西柏坡', '小觉','下口','两河乡'],
                    axisLine: {
                     lineStyle: {
                         type:  'solid' ,
                         color:  '#99E2FF' , //左边线的颜色
                         width: '2' //坐标线的宽度
                     }
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color:  '#000' , //坐标值得具体的颜色
    
                        }
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: [1200, 2000, 1500, 800, 700, 1100, 4300,1234,3456],
                    type: 'bar',
                    barWidth : 7,
                    }
                ]
            });
            myChart2.setOption({
                color: ['#4CC4E0','#EEC25B','#8E83DE'],
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '1%',
                    containLabel: true
                },
                legend: {
                    orient:"horizontal",
                    icon: "circle",
                    x:'center',
                    y:' center',
                    width:'300',
                    padding:[25, 30,0, 0],
                    itemWidth:10,
                    textStyle:{
                        color:'#000',
                    },
                },
                tooltip: {},
                dataset: {
                    source: [
                    ['product', '入户安检', '超重', '超量'],
                    ['平山', 143.3, 185.8, 93.7],
                    ['东回舍', 83.1, 173.4, 55.1],
                    ['温塘', 86.4, 65.2, 82.5],
                    ['南甸', 43.3, 85.8, 393.7],
                    ['古月', 183.1, 273.4, 55.1],
                    ['西柏坡', 186.4, 265.2, 82.5],
                    ['小觉', 43.3, 185.8, 493.7],
                    ['下口', 483.1, 273.4, 55.1],
                    ['两河乡', 286.4, 265.2, 382.5],
                    ['孟家庄', 272.4, 453.9, 139.1]
                    ]
                },
                xAxis: { 
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            type:  'solid' ,
                            color:  '#99E2FF' , //左边线的颜色
                            width: '2' //坐标线的宽度
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color:  '#000' , //坐标值得具体的颜色
    
                        }
                    }
                },
                yAxis: {},
                series: [{ type: 'bar',barWidth : 7, }, { type: 'bar',barWidth : 7, }, { type: 'bar',barWidth : 7, }]
            });
            myChart3.setOption({
                color: ['#4CC4E0'],
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '1%',
                    containLabel: true
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    axisLabel:{
                        interval: 0,
                        textStyle: {
                            color:  '#000' , //坐标值得具体的颜色
                        }
                    } ,
                    data: ['平山', '东回舍', '温塘', '南甸', '古月', '西柏坡', '小觉','下口','两河乡'],
                    axisLine: {
                     lineStyle: {
                         type:  'solid' ,
                         color:  '#99E2FF' , //左边线的颜色
                         width: '2' //坐标线的宽度
                     }
                    },
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                    data: [1240, 2040, 1540, 3380, 4370, 1140, 2130,1234,3456],
                    type: 'bar',
                    barWidth : 7,
                    }
                ]
            });
        }

      }
  }
</script>
  
<style scoped>
    .display{
        display: flex;
        
    }
.leftbar{
    width: 27.5%;
    height: 340px;
    /* float: left; */
}
.centerbar{
    width: 45%;
    height: 340px;
    /* float: left; */
    margin-left: 40px;
}
.rightbar{
    width: 27.5%;
    height: 340px;
    /* float: left; */
    margin-left: 40px;
}
.leftnum{
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 70px;
}
</style>