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: [4000,6190,3650,2050,2050,129,115,3080,100],
                    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', '入户安检', '超重', '超量'],
                    ['东维',307,0,0 ],
                    ['田园',1765,0,0],
                    ['爱馨',2200,0,0],
                    ['旺达隆',1495,0,0 ],
                    ['大坎',1495,0,0 ],
                    ['燕山',5,0,0 ],
                    ['永青',6,0,0 ],
                    ['育新',2,0,0 ],
                    ['白官屯',38,0,0 ]
                    ]
                },
                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: [700,2050,3650,2050,2050,165,130,3080,100],
                    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>