leftBar.vue

<template>
  <div> 
    <div class="left-top" style="margin-top: 70px;width: 430px;margin-left: 10px;display: flex;justify-content: space-around;">
      <div style="width: 40%;text-align: center;color: #00ffff;">
        <p>从业人员数</p>
        <span style="font-family: 'arialbd';font-size: 30px;background-image:-webkit-linear-gradient(bottom,#f0c41b,#e4dbb7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;  ">{{datanow.congyeNum}}</span>
      </div>
      <div style="width: 40%;text-align: center;color: #00ffff;">
        <p>管道长度(m)</p>
        <span style="font-family: 'arialbd';font-size: 30px;background-image:-webkit-linear-gradient(bottom,#f86742,#f0c41b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;  ">{{datanow.guandaoNum}}</span>
      </div>
    </div>
    
    <div>
      <div class="item1" style="margin-top: 40px;">
        <span class="dot">
          <span class="dot-inner"></span>
        </span>
        <span>安全监管</span>
        <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> 
        <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
        <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
      </div>
  </div>
  <div id="main1" style="width: 100%;height: 280px;"></div>
    <div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;">
      <div>
        <div class="item1">
          <span class="dot">
            <span class="dot-inner"></span>
          </span>
          <span>任务完成率</span>
          <div class="fong-div" style="width: 8px;height: 12px;background-color: #2c888899;float: right;margin-top: 10px;transform: skewX(-25deg)"></div> 
          <div class="fong-div" style="width: 8px;height: 12px;background-color: #24b1b1b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
          <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div> 
        </div>
      </div>
      <div id="myCharttwo" :style="{width: '450px', height: '300px'}"></div>
      <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 15px;">
        ● 已完成数量:{{datanow.renwu[1]}}
      </div>
      <div class="titleTex" style="height: 20px;margin-top: 0px;font-size: 15px;color: #0099ff">
        ● 未成数量:{{datanow.renwu[0]}}
      </div>
    </div>
  </div>
</template>

<script>
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  export default {
    data () {
    　　return {
          dataAll:{
              congyeNum:1544,
              guandaoNum:3658495,
              shigu1:[820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290],
              shigu2:[452, 786, 456, 732, 458, 165, 198,489, 158, 358, 345, 675],
              shigu3:[ 932, 901, 198,489, 158, 358, 345, 675,  901, 934, 1290, 888],
              renwu:[50,92],
              renwuzong:142
          },
          dataone:{
              congyeNum:521,
              guandaoNum:1254848,
              shigu1:[223, 44, 332, 321, 458, 456, 653,122, 345, 133, 421, 123],
              shigu2:[123, 234, 456, 567, 235, 12,89, 158, 158, 145, 175,224],
              shigu3:[ 432, 301, 108,189, 18, 158, 145, 175,  401, 334, 590, 388],
              renwu:[4,27],
              renwuzong:31
          },
          datatwo:{
              congyeNum:488,
              guandaoNum:1244495,
              shigu1:[653,122, 345, 133, 456, 653,122, 345, 133, 421, 123,500],
              shigu2:[432, 301, 456, 567, 235, 12, 145, 175,  401, 334, 590, 388],
              shigu3:[ 123, 234, 108,189, 18, 158, 123, 234, 456, 567, 235, 12],
              renwu:[8,25],
              renwuzong:33
          },
          datathree:{
              congyeNum:535,
              guandaoNum:1189492,
              shigu1:[653,122, 345, 133, 456, 653,122, 345, 133, 421, 123,500],
              shigu2:[432, 301, 456, 567, 456, 653,122, 175,  401, 334, 590, 388],
              shigu3:[ 334, 590, 388, 133, 456, 123, 234, 653,122, 345, 133],
              renwu:[38,40],
              renwuzong:78
          },
          datanow:{
              renwu:[0,0]
          }
      };
    　},
     mounted(){
        this.datanow = this.dataAll;
        this.drawLine(this.datanow);
        this.initdata(this.datanow);
      },
    methods: {
        choice(index){
            console.log("-----"+index)
            if(index==0){
                this.datanow = this.dataAll;
                this.drawLine(this.datanow);
                this.initdata(this.datanow);
            }else
            if(index==1){
                this.datanow = this.dataone;
                this.drawLine(this.datanow);
                this.initdata(this.datanow);
            }else if(index==2){
                this.datanow = this.datatwo;
                this.drawLine(this.datanow);
                this.initdata(this.datanow);
            }else if(index==3){
                this.datanow = this.datathree;
                this.drawLine(this.datanow);
                this.initdata(this.datanow);
            }
        },
      drawLine(data){
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('main1'))
                // 绘制图表
                myChart.setOption({
                    legend: {
                        top:20,
                        textStyle:{
                            color:"#fff"
                        },
                    },
                    
                    grid: {  
                            left: '5%',  
                            right: '7%',  
                            bottom: '4%', 
                            containLabel: true  
                        },
                    xAxis: {
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#bbb6b6',
                            },
                        },
                        axisTick: {           //去掉坐标轴刻线
                            show: false
                        },
                        type: 'category',
                        data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12']
                    },
                    yAxis: {
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#bbb6b6'
                            },
                        },
                        splitLine: {
                            show:true,
                            lineStyle:{
                                type:"dashed",
                                color: '#bbb6b6',
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:"事故数量",
                            data: data.shigu1,
                            type: 'line',
                            smooth: true
                        },
                        {
                            data: data.shigu2,
                            type: 'line',
                            smooth: true,
                            name:"隐患整治数"
                        },
                        {
                            data: data.shigu3,
                            type: 'line',
                            smooth: true,
                            name:"预警数量"
                        }
                    ]
                });
            },
      initdata(data){
          // 基于准备好的dom，初始化echarts实例
          //console.log(data.renwu[0]+"=-=-=-"+data.renwu[1])
          let myChart2 = this.$echarts.init(document.getElementById('myCharttwo'))
          // 绘制图表
          myChart2.setOption({
              title: {
                  text: '任务总数量:'+data.renwuzong,
                  left: 'center',
                  top :20,
                  textStyle:{
                      color: "#00ffff"
                  }
              },
            tooltip: {
              trigger: 'item',
            },
            series: [
              {
                name: '任务概况',
                type: 'pie',
                radius: '70%',
                center: ['50%','58%'],
                data: [
                  { 
                    value: data.renwu[0],
                    name: '未完成',
                    itemStyle: { color: '#09f' }
                },
                  { 
                    value: data.renwu[1],
                      name: '已完成' ,
                    itemStyle: { color: '#00ffff' }
                  },
                ],
                  label:{
                    color:'#fff',
                      fontSize: 18
                  },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          });
      },




    }
  }
</script>

<style lang="scss" scoped>
  
/* @font-face {
  font-family: 'arialbd';
} */
.item1{
    width: 95%;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    padding-left: 10px;
    margin-top: 10px;
    font-weight: 700;
    font-style: italic;
    margin-left: 10px;
    background-image: linear-gradient(to left, #122033, rgb(51 152 243 / 50%) 50%, #111a22);
}
.dot {
        display: inline-block;
        position: relative;
        width: 10px;
        height: 10px;
        background: rgb(30, 185, 190);
        border-radius: 50%;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 2px;
    }

    .dot-inner {
        background: #44d7dc;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -webkit-animation: vabDot 1.2s ease-in-out infinite;
        animation: vabDot 1.2s ease-in-out infinite;
    }

    @-webkit-keyframes vabDot {
        0% {
            opacity: .6;
            transform: scale(.8)
        }

        to {
            opacity: 0;
            transform: scale(2.4)
        }
    }

    @keyframes vabDot {
        0% {
            opacity: .6;
            transform: scale(.8)
        }

        to {
            opacity: 0;
            transform: scale(2.4)
        }
    }
</style>