地图接口

ZZJ

2021-11-24 bbe33e5fd87e5961fdab804bfb0b4cf354e0c5b2

 src/pages/internetEquipment/components/helemetEchart.vue

@@ -6,8 +6,22 @@

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

export default {
  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 : {
@@ -16,55 +30,54 @@
                  bottom: 20,
                  top: 20,
                  left: 40,
                  right: 20
          right: 20,
              },
              xAxis: {
                type: 'category',
          type: "category",
                boundaryGap: false,
                data: ['', '2021-09-02 00:00', '', '2021-09-02 00:00', '', '2021-09-02 00:00', ''],
          data: [],
                axisLine: {
                    show: false  //不显示坐标轴轴线
            show: false, //不显示坐标轴轴线
                },
                axisTick: {
                    show: false  //不显示坐标轴刻度
            show: false, //不显示坐标轴刻度
                },
                spiltLine:{
                    show: false  //想要不显示网格线，改为false
            show: false, //想要不显示网格线，改为false
                },
                axisLabel:{
                    interval: 0
                }
            interval: 0,
          },
              },
              yAxis: {
                type: 'value',
          type: "value",
                splitLine : {
                    show: false
            show: false,
                },
                axisLine: {
                    show: false  //不显示坐标轴轴线
            show: false, //不显示坐标轴轴线
                },
                axisTick: {
                    show: false  //不显示坐标轴刻度
            show: false, //不显示坐标轴刻度
                },
              },
              series: [
                {
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                  type: 'line',
            data: [],
            type: "line",
                  areaStyle: {},
                  areaStyle: {
                    normal: {
                   color: '#FFF8EB' //改变区域颜色
                            }
                color: "#FFF8EB", //改变区域颜色
              },
                          },
                  itemStyle: {
                      normal: {
                          lineStyle: {
                              color: '#FFAA44'
                          }
                      }
                  }

                  color: "#FFAA44",
                },
              },
            },
                                
/* itemStyle: {
    normal: {
@@ -87,16 +100,12 @@
        }
    }
} */
                }
          },
              ],

            }
        }
    },
    mounted (){
         let myChart = echarts.init(document.getElementById('echart-cotainer'))
         myChart.setOption(this.option);
    };
    },
  mounted() {},
    methods :{
      /*   format (params) {
            console.log(params);
@@ -112,8 +121,8 @@
                    }
                }
        } */
    }
}
  },
};
</script>

<style scoped lang="scss">