地图接口

ZZJ

2021-11-24 bbe33e5fd87e5961fdab804bfb0b4cf354e0c5b2

 src/pages/internetEquipment/components/helemetEchart.vue

@@ -1,72 +1,85 @@
<template>
  <div class="helemet-echart">
      <div id="echart-cotainer" ></div>
    <div id="echart-cotainer"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { getChart } from "@/api/helemt";

export default {
    data (){
        return {
            option : {
              grid: {
                  show :false,
                  bottom: 20,
                  top: 20,
                  left: 40,
                  right: 20
  async created() {
    const res = await getChart();
    res.data.forEach((item, index) => {
      this.option.series[0].data.push(item.amount);
      if (index % 2 == 1) {
        this.option.xAxis.data.push(item.time);
      } else {
        this.option.xAxis.data.push("");
      }
    });
    let myChart = echarts.init(document.getElementById("echart-cotainer"));
    myChart.setOption(this.option);
  },
  data() {
    return {
      option: {
        grid: {
          show: false,
          bottom: 20,
          top: 20,
          left: 40,
          right: 20,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLine: {
            show: false, //不显示坐标轴轴线
          },
          axisTick: {
            show: false, //不显示坐标轴刻度
          },
          spiltLine: {
            show: false, //想要不显示网格线，改为false
          },
          axisLabel: {
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false, //不显示坐标轴轴线
          },
          axisTick: {
            show: false, //不显示坐标轴刻度
          },
        },
        series: [
          {
            data: [],
            type: "line",
            areaStyle: {},
            areaStyle: {
              normal: {
                color: "#FFF8EB", //改变区域颜色
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['', '2021-09-02 00:00', '', '2021-09-02 00:00', '', '2021-09-02 00:00', ''],
                axisLine: {
                    show: false  //不显示坐标轴轴线
                },
                axisTick: {
                    show: false  //不显示坐标轴刻度
                },
                spiltLine:{
                    show: false  //想要不显示网格线，改为false
                },
                axisLabel:{
                    interval: 0
                }
              },
              yAxis: {
                type: 'value',
                splitLine : {
                    show: false
                },
                axisLine: {
                    show: false  //不显示坐标轴轴线
                },
                axisTick: {
                    show: false  //不显示坐标轴刻度
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#FFAA44",
                },
              },
              series: [
                {
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                  type: 'line',
                  areaStyle: {},
                  areaStyle: {
                    normal: {
                   color: '#FFF8EB' //改变区域颜色
                            }
                          },
                  itemStyle: {
                      normal: {
                          lineStyle: {
                              color: '#FFAA44'
                          }
                      }
                  }
            },

                                
/* itemStyle: {
            /* itemStyle: {
    normal: {
        color: '#f7ba0e',
        label: {
@@ -87,18 +100,14 @@
        }
    }
} */
                }
              ],

            }
        }
    },
    mounted (){
         let myChart = echarts.init(document.getElementById('echart-cotainer'))
         myChart.setOption(this.option);
    },
    methods :{
      /*   format (params) {
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    /*   format (params) {
            console.log(params);
                for (var i = 0,
                l = this.option.xAxis.data.length; i < l; i++) {
@@ -112,14 +121,14 @@
                    }
                }
        } */
    }
}
  },
};
</script>

<style scoped lang="scss">
.helemet-echart {
    #echart-cotainer {
        height: 100%;
    }
  #echart-cotainer {
    height: 100%;
  }
}
</style>