管道基础大数据平台系统开发-【前端】-新系統界面
surprise
2024-03-29 98a2b24c89e81a5aacdcbd6b739fef422adf17dd
src/components/chart/VisitCount.vue
@@ -4,7 +4,7 @@
<script>
import * as echarts from "echarts"
import { GetTypeVisitsCount } from "@/api/screen.js"
import { countByMajor } from "@/api/screen.js"
export default {
  data() {
    return {
@@ -17,54 +17,16 @@
  methods: {
    async initChart() {
      let data = [
        {
          name: "user1",
          value: 10,
        },
        {
          name: "user2",
          value: 20,
        },
        {
          name: "user3",
          value: 23,
        },
        {
          name: "user4",
          value: 44,
        },
        {
          name: "user1",
          value: 10,
        },
        {
          name: "user2",
          value: 20,
        },
        {
          name: "user3",
          value: 53,
        },
        {
          name: "user4",
          value: 24,
        },
        {
          name: "user1",
          value: 10,
        },
        {
          name: "user2",
          value: 20,
        },
      ]
      const res = await GetTypeVisitsCount()
      const res = await countByMajor()
      let xAxis = []
      let yAxis = []
      if (res.code == 200) {
        var obj = res.result;
        data = res.result.map(item => {
          xAxis.push(item.name)
          yAxis.push(item.count)
          xAxis.push(item.m2)
          yAxis.push(item.sizes)
        })
      }
      let option = {
@@ -76,13 +38,34 @@
          bottom: "15%",
        },
        tooltip: {
          show: true
          show: true,
          formatter: function (data) {
            var val = obj.filter(res=>{
              if(data.value == res.sizes){
                return res
              }
            })
            if(val.length>0){
              var num = val[0].m3
              if(num=="平方千米"){
                num= " km²";
              }else  if(num=="平方米"){
                num= " m²";
              }else  if(num=="千米"){
                num= " km";
              }
               return  val[0].m2+":<br/>"+val[0].sizes+ num;
            }else{
              return data;
            }
          },
        },
        xAxis: {
          data: xAxis,
          axisLabel: {
            show: true,
            color: "#ffff",
          },
          axisTick: {
            show: false,