折线图完善布局

zhangshuaibao

2021-03-31 588438a8f2efcb5faabef6a034f0df2148436d5b

 src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue

@@ -1,7 +1,6 @@
<template>
    <div class="main">
        <div id="echarts" ref="main"></div>
      </div>
        <div id="echarts" ref="main">
        </div>
</template>

<script>
@@ -25,7 +24,32 @@
          }
        },
        legend: {
          data: ['氮氧化物', '二氧化硫', '烟尘', '废气流量']
          x: '200px',
          y: '30px',
          data: [{
            name: '氮氧化物',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '二氧化硫',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '烟尘',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '废气流量',
            textStyle: {
              color: '#00d0f9'
            }
          }]
          // pageTextStyle: {
          //   color: '#fff'
          // }
@@ -34,7 +58,7 @@
          left: '3%',
          right: '1%',
          bottom: '3%',
          top: '10%',
          // top: '1%',
          containLabel: true
        },
        toolbox: {
@@ -92,6 +116,7 @@
        // Y 轴的设置
        yAxis: [{
          type: 'value',
          // position: 'left', // 多 Y 轴使用
          // name: yname, // 后期图标Y轴显示单位
          name: '浓度(mg/m³)',
          axisLabel: {
@@ -150,14 +175,14 @@
</script>

<style scoped lang="less">
    .main{
        background: rgba(255, 255, 255, 0.1);
    }
    #echarts{
        width: 600px;
        width: 670px;
        height: 260px;
        position: relative;
        margin: 0;
        padding: 0;
        /*background-color: rgba(0, 0, 0, 0.6);*/
            border: 1px solid #396d83;
            margin: 10px 10px 10px 10px;
    }
</style>