indexLeft.vue

<template>
    <div class="app-container home">
      <div style="width: 100%;height: 250px;border: 1px solid #dbdada;">
        <div style="width: 50%;height: 100%;text-align: center;line-height: 50px;float: left;">
            <p>企业人员数量</p>
            <div class="tz">
                <span style="font-family: 'UnidreamLED'; color: #fff;font-size: 35px;">135</span>
            </div>
        </div>
        <div style="width: 50%;height: 100%;text-align: center;line-height: 50px;float: right;">
            <p>特种作业人员数量</p>
            <div class="tz">
                <!-- <img src="../../assets/images/group1.png" alt="" width="100%"> -->
                <span style="font-family: 'UnidreamLED';color: #fff;font-size: 35px;">53</span>
            </div>
        </div>
      </div>
      <div style="width: 100%;height: 300px;border: 1px solid #dbdada;margin-top: 5px;">
        <p style="padding-left: 20px;">感知设备</p>
        <div id="myChartone" :style="{ width: '100%', height: '240px' }"></div>
      </div>
    </div>
  </template>
  <script>
    // 引入基本模板
    import * as echarts from 'echarts';
    export default {
      data() {
        return {
          
        };
      },
      mounted() {
        this.drawLine();
      },
      methods: {
        drawLine() {
          // 基于准备好的dom，初始化echarts实例
          let myChart1 = this.$echarts.init(document.getElementById("myChartone"));
          // 绘制图表
          myChart1.setOption({
            legend: {},
            grid: {
              top: "14%",
              left: "5%",
              right: "7%",
              bottom: "5%",
              containLabel: true,
            },
            tooltip: {},
            dataset: {
                source: [
                    ['product', '在线数量', '离线数量'],
                    ['气体报警器', 89, 23],
                    ['摄像头', 55, 12],
                    ['用电探测器', 77, 12],
                    ['压力探测器', 66, 16],
                    ['温度探测器', 90, 20]
                ]
            },
            xAxis: { 
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#6AB7EB",
                        width: 1,
                        type: "solid"
                    }
                },
                axisLabel: {//x轴文字的配置
                    show: true,
                    interval: 0,
                    rotate: 20,
                    fontSize: 12,
                    textStyle: {
                        color: "#334D6E ",
                    }
                },
             },
            yAxis: {
                axisLine: {//y轴线的颜色以及宽度
                    show: true,
                    lineStyle: {
                        color: "#6AB7EB ",
                        width: 1,
                        type: "solid"
                    },
                },
                axisLabel: {//x轴文字的配置
                    show: true,
                    textStyle: {
                        color: "#334D6E ",
                    }
                },
                splitLine:{
                    //设置条纹显示 柱状图默认yAxis(true)
                    show:true,
                    //设置lineStyle即可写入样式即可
                    lineStyle:{
                        color:'#c7e8ff',
                        type:'dashed'
                    }
                }
            },
            series: [
                { 
                    type: 'bar' ,
                    barWidth: 18,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0098FF '
                                }, {
                                offset: 1,
                                color: '#fff'
                            }]),
                            label: {
                            // show: true, //开启显示
                            position: "top", //在上方显示
                            // textStyle: {
                            //     //数值样式
                            //     color: "#688AB6",
                            //     fontSize: 12,
                            // },
                            },
                            barBorderRadius: [5, 5, 0, 0], //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        },
                    }
                }, 
                { 
                    type: 'bar' ,
                    barWidth: 18,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#CBB700'
                                }, {
                                offset: 1,
                                color: '#fff'
                            }]),
                            label: {
                            // show: true, //开启显示
                            position: "top", //在上方显示
                            // textStyle: {
                            //     //数值样式
                            //     color: "#688AB6",
                            //     fontSize: 12,
                            // },
                            },
                            barBorderRadius: [5, 5, 0, 0], //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        },
                    }
                }
            ]
            
          });
        },
      },
    };
    </script>
  <style scoped lang="scss">
    .home{
      padding: 20px 5px 0px 20px;
    }
    .tz{
        background: url('../../assets/images/group1.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 130px;
        text-align: center;
        height: 130px;
        position: relative;
        margin-left: 15%;
        line-height: 130px;
    }
    </style>