indexRight.vue

<template>
    <div class="app-container home">
      <div style="width: 100%;height: 250px;border: 1px solid #dbdada;position: relative;">
        <p style="padding-left: 20px;">隐患上报数量</p>
        <div id="myChartright" :style="{ width: '100%', height: '180px' }"></div>
        <div class="circle">
            <p style="font-size: 16px;">隐患总数 </p>
            <span> 56</span>
            <!-- <img src="../../assets/images/ell.png" alt="" style="width: 100%;height: 100%;"> -->
        </div>
      </div>
      <div style="width: 100%;height: 300px;border: 1px solid #dbdada;margin-top: 5px;">
        <p style="padding-left: 20px;">报警数量</p>
        <div id="myChartinit" :style="{ width: '100%', height: '240px' }"></div>
      </div>
    </div>
  </template>
  <script>
    // 引入基本模板
    import * as echarts from 'echarts';
    export default {
      data() {
        return {
          
        };
      },
      mounted() {
        this.drawLine();
        this.initLine();
      },
      methods: {
        drawLine() {
          // 基于准备好的dom，初始化echarts实例
          let myChart1 = this.$echarts.init(document.getElementById("myChartright"));
          // 绘制图表
          myChart1.setOption({
            color:['#109CF1','#FFEC3D'],
                angleAxis: {
                    clockwise: false, // 刻度增长是否按顺时针，默认顺时针(true)。
                    axisLine: {
                    show: false
                    },
                    axisLabel: {
                    show: false
                    },
                    splitLine: {
                    show: false
                    },
                    axisTick: {
                    show: false
                    },
                    min: 0,
                    max: 16, //一圈的刻度值
                    startAngle: 0 //初始角度
                },
                radiusAxis: {
                    type: 'category',
                    data: ['1', '2', '3', '4'], // 极坐标径向轴中的类目，这边有几个数，
                    // 就代表径向轴分了几份，和series中的data对应，这样就可以撑开圆环
                    z: 10,
                    axisLine: {
                    show: false
                    },
                    axisTick: {
                    show: false
                    },
                    axisLabel: {
                    show: false
                    },
                },
                polar: {
                },
                series: [{
                    type: 'bar',
                    data: [0, 0, 0, 12],
                    coordinateSystem: 'polar',
                    name: '已整改',
                    roundCap: true,
                    stack: 'a',
                    itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 3
                                },
                }, {
                    type: 'bar',
                    data: [0, 0, 0, 4], // 前面的0，累计还是0，这样径向轴上的对应的分区总数就是0，不会显示圆环
                    coordinateSystem: 'polar',
                    name: '待整改',
                    stack: 'a',
                    roundCap: true,
                    itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 3
                                },
                }
            ],
                legend: {
                    show: true,
                    top: '90%',
                    // data: ['待整改', '已整改']
                }

            // tooltip: {
            //     trigger: 'item'
            // },
            // legend: {
            //     top: 'bottom',
            // },
            // series: [
            //     {
            //         name: 'Access From',
            //         type: 'pie',
            //         radius: ['60%', '70%'],
            //         avoidLabelOverlap: false,
            //         itemStyle: {
            //             borderRadius: 10,
            //             borderColor: '#fff',
            //             borderWidth: 3
            //         },
            //     label: {
            //         show: false,
            //         position: 'center'
            //     },
            //     emphasis: {
            //         label: {
            //         show: false,
            //         fontSize: '40',
            //         fontWeight: 'bold'
            //         }
            //     },
            //     labelLine: {
            //         show: false
            //     },
            //     data: [
            //         { value: 1048, name: '已整改' },
            //         { value: 335, name: '待整改' }
            //     ]
            //     }
            // ]
            
          });
        },
        initLine() {
          // 基于准备好的dom，初始化echarts实例
          let myChart2 = this.$echarts.init(document.getElementById("myChartinit"));
          // 绘制图表
          myChart2.setOption({
            grid: {
              top: "8%",
              left: "5%",
              right: "5%",
              bottom: "5%",
              containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#6AB7EB",
                        width: 1,
                        type: "solid"
                    }
                },
                axisLabel: {//x轴文字的配置
                    show: true,
                    interval: 0,
                    rotate: 20,
                    fontSize: 12,
                    textStyle: {
                        color: "#334D6E ",
                    }
                },
            },
            yAxis: {
                type: 'value',
                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: [
                {
                data: [30, 52, 91, 64, 70, 30, 50, 91, 64, 40, 70, 40],
                type: 'line',
                areaStyle: {},
                areaStyle: {
                normal: {
                    color: '#e1f0fb' //改变区域颜色
                    }
                },
                itemStyle: {
                    normal: {
                    color: '#8cd5c2', //改变折线点的颜色
                    lineStyle: {
                        color: '#7AB7EB' //改变折线颜色
                    }
                    }
                },
                }
            ]
            
          });
        },
      },
    };
    </script>
  <style scoped lang="scss">
    .home{
      padding: 20px 20px 0px 5px;
    }
    .circle{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        top: 37%;
        left: 37%;
        text-align: center;
        position: absolute;
        background: url('../../assets/images/ell.png') 100% 100%;
        background-size: 100% 100%;
        line-height: 10px;
        padding-top: 20px;
        font-size: 30px;
        color: #fff;
        font-family: 'UnidreamLED';
    }
    </style>