全国项目和全球项目统计图

TreeWish

2023-02-24 60597f31dd9e97dee67224da16418c2f035cef73

全国项目和全球项目统计图

 src/components/chart/CountryDimensionBar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,235 @@
<template>
  <div class="CountryDimension" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts"
import { countCountryDimension } from "@/api/screen.js"
export default {
  data() {
    return {
      option: {},
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    async initChart() {
      let data = [
        {
          country: "苏丹",
          count: 1,
        },
        {
          country: "印度尼西亚",
          count: 1,
        },
        {
          country: "阿联酋",
          count: 1,
        },
        {
          country: "乌兹别克斯坦",
          count: 1,
        },
        {
          country: "哈萨克斯坦",
          count: 2,
        },
        {
          country: "委内瑞拉",
          count: 1,
        },
        {
          country: "斯里兰卡",
          count: 1,
        },
        {
          country: "中国",
          count: 17,
        },
        {
          country: "其他",
          count: 1,
        },
        {
          country: "土库曼斯坦",
          count: 1,
        },
        {
          country: "新加坡",
          count: 1,
        },
      ]
      const res = await countCountryDimension()
      if (res.code == 200) {
        data = res.result
      }
      let xAxisData = []
      let yAxisData = []

      data.forEach(item => {
        xAxisData.push(item.country)
        yAxisData.push(item.count)
      })
      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "12%",
          right: "0%",
          left: "0%",
          bottom: "13%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            interval: 0,
            axisLabel: {
              margin: 10,
              color: "#e2e9ff",
              textStyle: {
                fontSize: 11,
              },
              formatter: function (value) {
                //debugger
                var ret = "" //拼接加\n返回的类目项
                var maxLength = 2 //每项显示文字个数
                var valLength = value.length //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = "" //每次截取的字符串
                    var start = i * maxLength //开始截取的位置
                    var end = start + maxLength //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n"
                    ret += temp //凭借最终的字符串
                  }
                  return ret
                } else {
                  return value
                }
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: yAxisData,
            barWidth: "12px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)", // 100% å¤„的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [20, 20, 0, 0],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: 14,
                width: 40,
                height: 14,
                backgroundColor: "rgba(0,160,221,0.1)",
                borderRadius: 200,
                position: ["-8", "-20"],
                distance: 1,
                formatter: value => {
                  // console.log(value);
                  if (value.name == "中国") {
                    return [
                      `    {d|●}", " {a|${value.value}}     \n", "    {b|}`,
                    ].join(",")
                  }
                },
                // formatter: ["    {d|●}", " {a|{c}}     \n", "    {b|}"].join(
                //   ","
                // ),
                rich: {
                  d: {
                    color: "#3CDDCF",
                  },
                  a: {
                    color: "#fff",
                    align: "center",
                  },
                  b: {
                    width: 1,
                    height: 15,
                    borderWidth: 1,
                    borderColor: "#234e6c",
                    align: "left",
                  },
                },
              },
            },
          },
        ],
      }

      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.CountryDimension {
  width: 100%;
  height: 100%;
}
</style>

 src/components/chart/CountryDimensionPie.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,291 @@
<template>
  <div class="echart" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts"
import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
export default {
  data() {
    return {
      currentProject: '全球项目'
    }
  },
  mounted() {
    this.initChart()
  },

  methods: {
    async initChart() {
      const res = await countCountryDimension()
      let dataPie = [
        {
          value: 410,
          name: "企业",
        },
        {
          value: 380,
          name: "政府",
        },
        {
          value: 50,
          name: "个人",
        },
        {
          value: 50,
          name: "个人1",
        },
        {
          value: 50,
          name: "个人2",
        },
        {
          value: 50,
          name: "个人3",
        },
        {
          value: 50,
          name: "个人4",
        },
        {
          value: 50,
          name: "个人5",
        },
      ]
      let count = 0
      if (res.code == 200) {
        dataPie = res.result.map(item => {
          return {
            name: item.country,
            value: item.count
          }
        })
      }

      let colorPie = ["#173852", "#0b2036", "#002e49"]
      let colorWrap = [
        "#3087d6",
        "#f6ce54",
        "#4be1ff",
        "#b6e9ff",
        "#18edc9",
        "#6ac5fa",
      ]
      let baseDataPie = [],
        baseDataWrap = []
      let total = 0
      dataPie
        .sort((a, b) => b.value - a.value)
        .forEach(function (val, idx, arr) {
          count += val.value
        })
      for (let i = 0; i < dataPie.length; i++) {
        baseDataWrap.push(
          {
            value: dataPie[i].value,
            name: dataPie[i].name,
            itemStyle: {
              normal: {
                color: colorWrap[i],
                borderWidth: 1,
                borderColor: colorWrap[i],
                shadowBlur: 10,
                shadowColor: "rgba(7, 132, 250, 0.8)",
              },
            },
          },
          {
            value: 0.1,
            name: "",
            itemStyle: {
              normal: {
                color: "transparent",
                borderWidth: 5,
                borderColor: "transparent",
              },
            },
            tooltip: {
              show: false,
            },
          }
        )

        if (i < 3) {
          baseDataPie.push({
            value: dataPie[i].value,
            name: dataPie[i].name,
            itemStyle: {
              normal: {
                borderWidth: 10,
                borderColor: colorPie[i],
              },
            },
          })
        }
      }

      let option = {
        backgroundColor: "transparent",
        title: {
          text: count,
          subtext: "项目总数",
          textStyle: {
            color: "#fff",
            fontSize: 20,
            fontWeight: 400,
            fontFamily: "YouSheBiaoTiHei",
          },
          subtextStyle: {
            align: "center",
            fontSize: 14,
            color: ["#fff"],
            fontWeight: 400,
            fontFamily: "YouSheBiaoTiHei",
          },
          x: "center",
          y: "center",
        },
        grid: {
          left: "1%", // ä¸Žå®¹å™¨å·¦ä¾§çš„距离
          right: "1%", // ä¸Žå®¹å™¨å³ä¾§çš„距离
          top: "1%", // ä¸Žå®¹å™¨é¡¶éƒ¨çš„距离
          bottom: "1%", // ä¸Žå®¹å™¨åº•éƒ¨çš„距离
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: [
          {
            show: false,
            data: ["在线", "ç»´ä¿®", "离线", "检修", "抢修", "其他"],
            icon: "vertical",
            right: "5px",
            top: "center",
            orient: "vertical",
            itemGap: 20,
            itemWidth: 15,
            itemHeight: 8,
            formatter: function (name) {
              let target, percent
              for (let i = 0; i < dataPie.length; i++) {
                if (dataPie[i].name === name) {
                  target = dataPie[i].value
                  percent = ((target / total) * 100).toFixed(1)
                }
              }
              let arr = [
                percent + "% " + " {yellow|" + target + "}",
                " {blue|" + name + "}",
              ]
              return arr.join("\n")
            },
            textStyle: {
              lineHeight: 20,
              color: "#f0f4f6",
              align: "right",
              rich: {
                yellow: {
                  color: "#00b5f3",
                  fontWeight: "bold",
                },
                blue: {
                  color: "#4be1ff",
                  align: "right",
                },
              },
            },
          },
        ],
        series: [
          {
            name: "项目数量",
            type: "pie",
            // clockWise: false, //顺时加载
            // hoverAnimation: false, //鼠标移入变大
            center: ["50%", "50%"],
            // radius: ["60%", "70%"],
            radius: [70, 80],
            labelLine: {
              show: true,
            },
            itemStyle: {
              borderWidth: 3,
              // borderColor: "#fff",
            },
            minAngle: 15, //最小角度
            startAngle: 270, //起始角度
            label: {
              // show: false,
              formatter: params => {
                if (params.percent > 10) {
                  return `{b|${params.name}} \n {per|${Math.ceil(
                    (params.value * 100) / count
                  )}%}`
                } else {
                  return `{b|${params.name}}`
                }
              },
              // backgroundColor: "#eee",
              // borderColor: "#aaa",
              // borderWidth: 1,
              // borderRadius: 3,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 14,
                  lineHeight: 14,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },

            data: baseDataWrap,
          },
        ],
      }
      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },

  },
}
</script>

<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 100%;
}
</style>

 src/components/chart/CountryProvinceBar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,235 @@
<template>
  <div class="CountryDimension" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts"
import { countProvinceDimension } from "@/api/screen.js"
export default {
  data() {
    return {
      option: {},
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    async initChart(dataPie) {
      let data = [
        {
          country: "苏丹",
          count: 1,
        },
        {
          country: "印度尼西亚",
          count: 1,
        },
        {
          country: "阿联酋",
          count: 1,
        },
        {
          country: "乌兹别克斯坦",
          count: 1,
        },
        {
          country: "哈萨克斯坦",
          count: 2,
        },
        {
          country: "委内瑞拉",
          count: 1,
        },
        {
          country: "斯里兰卡",
          count: 1,
        },
        {
          country: "中国",
          count: 17,
        },
        {
          country: "其他",
          count: 1,
        },
        {
          country: "土库曼斯坦",
          count: 1,
        },
        {
          country: "新加坡",
          count: 1,
        },
      ]
      const res = await countProvinceDimension()
      if (res.code == 200) {
        data = res.result
      }
      let xAxisData = []
      let yAxisData = []

      data.forEach(item => {
        xAxisData.push(item.province)
        yAxisData.push(item.count)
      })
      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "12%",
          right: "0%",
          left: "0%",
          bottom: "13%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            interval: 0,
            axisLabel: {
              margin: 10,
              color: "#e2e9ff",
              textStyle: {
                fontSize: 11,
              },
              formatter: function (value) {
                //debugger
                var ret = "" //拼接加\n返回的类目项
                var maxLength = 2 //每项显示文字个数
                var valLength = value.length //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = "" //每次截取的字符串
                    var start = i * maxLength //开始截取的位置
                    var end = start + maxLength //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n"
                    ret += temp //凭借最终的字符串
                  }
                  return ret
                } else {
                  return value
                }
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: yAxisData,
            barWidth: "12px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)", // 100% å¤„的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [20, 20, 0, 0],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: 14,
                width: 40,
                height: 14,
                backgroundColor: "rgba(0,160,221,0.1)",
                borderRadius: 200,
                position: ["-8", "-20"],
                distance: 1,
                formatter: value => {
                  // console.log(value);
                  if (value.name == "中国") {
                    return [
                      `    {d|●}", " {a|${value.value}}     \n", "    {b|}`,
                    ].join(",")
                  }
                },
                // formatter: ["    {d|●}", " {a|{c}}     \n", "    {b|}"].join(
                //   ","
                // ),
                rich: {
                  d: {
                    color: "#3CDDCF",
                  },
                  a: {
                    color: "#fff",
                    align: "center",
                  },
                  b: {
                    width: 1,
                    height: 15,
                    borderWidth: 1,
                    borderColor: "#234e6c",
                    align: "left",
                  },
                },
              },
            },
          },
        ],
      }

      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.CountryDimension {
  width: 100%;
  height: 100%;
}
</style>

 src/components/chart/CountryProvincePie.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,292 @@
<template>
  <div class="echart" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts"
import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
export default {
  data() {
    return {
      currentProject: '全球项目'
    }
  },
  mounted() {
    this.initChart()
  },

  methods: {
    async initChart() {
      const res = await countProvinceDimension()
      let dataPie = [
        {
          value: 410,
          name: "企业",
        },
        {
          value: 380,
          name: "政府",
        },
        {
          value: 50,
          name: "个人",
        },
        {
          value: 50,
          name: "个人1",
        },
        {
          value: 50,
          name: "个人2",
        },
        {
          value: 50,
          name: "个人3",
        },
        {
          value: 50,
          name: "个人4",
        },
        {
          value: 50,
          name: "个人5",
        },
      ]
      let count = 0
      if (res.code == 200) {
        dataPie = res.result.map(item => {
          return {
            name: item.province,
            value: item.count
          }
        })
      }


      let colorPie = ["#173852", "#0b2036", "#002e49"]
      let colorWrap = [
        "#3087d6",
        "#f6ce54",
        "#4be1ff",
        "#b6e9ff",
        "#18edc9",
        "#6ac5fa",
      ]
      let baseDataPie = [],
        baseDataWrap = []
      let total = 0
      dataPie
        .sort((a, b) => b.value - a.value)
        .forEach(function (val, idx, arr) {
          count += val.value
        })
      for (let i = 0; i < dataPie.length; i++) {
        baseDataWrap.push(
          {
            value: dataPie[i].value,
            name: dataPie[i].name,
            itemStyle: {
              normal: {
                color: colorWrap[i],
                borderWidth: 1,
                borderColor: colorWrap[i],
                shadowBlur: 10,
                shadowColor: "rgba(7, 132, 250, 0.8)",
              },
            },
          },
          {
            value: 0.1,
            name: "",
            itemStyle: {
              normal: {
                color: "transparent",
                borderWidth: 5,
                borderColor: "transparent",
              },
            },
            tooltip: {
              show: false,
            },
          }
        )

        if (i < 3) {
          baseDataPie.push({
            value: dataPie[i].value,
            name: dataPie[i].name,
            itemStyle: {
              normal: {
                borderWidth: 10,
                borderColor: colorPie[i],
              },
            },
          })
        }
      }

      let option = {
        backgroundColor: "transparent",
        title: {
          text: count,
          subtext: "项目总数",
          textStyle: {
            color: "#fff",
            fontSize: 20,
            fontWeight: 400,
            fontFamily: "YouSheBiaoTiHei",
          },
          subtextStyle: {
            align: "center",
            fontSize: 14,
            color: ["#fff"],
            fontWeight: 400,
            fontFamily: "YouSheBiaoTiHei",
          },
          x: "center",
          y: "center",
        },
        grid: {
          left: "1%", // ä¸Žå®¹å™¨å·¦ä¾§çš„距离
          right: "1%", // ä¸Žå®¹å™¨å³ä¾§çš„距离
          top: "1%", // ä¸Žå®¹å™¨é¡¶éƒ¨çš„距离
          bottom: "1%", // ä¸Žå®¹å™¨åº•éƒ¨çš„距离
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: [
          {
            show: false,
            data: ["在线", "ç»´ä¿®", "离线", "检修", "抢修", "其他"],
            icon: "vertical",
            right: "5px",
            top: "center",
            orient: "vertical",
            itemGap: 20,
            itemWidth: 15,
            itemHeight: 8,
            formatter: function (name) {
              let target, percent
              for (let i = 0; i < dataPie.length; i++) {
                if (dataPie[i].name === name) {
                  target = dataPie[i].value
                  percent = ((target / total) * 100).toFixed(1)
                }
              }
              let arr = [
                percent + "% " + " {yellow|" + target + "}",
                " {blue|" + name + "}",
              ]
              return arr.join("\n")
            },
            textStyle: {
              lineHeight: 20,
              color: "#f0f4f6",
              align: "right",
              rich: {
                yellow: {
                  color: "#00b5f3",
                  fontWeight: "bold",
                },
                blue: {
                  color: "#4be1ff",
                  align: "right",
                },
              },
            },
          },
        ],
        series: [
          {
            name: "项目数量",
            type: "pie",
            // clockWise: false, //顺时加载
            // hoverAnimation: false, //鼠标移入变大
            center: ["50%", "50%"],
            // radius: ["60%", "70%"],
            radius: [70, 80],
            labelLine: {
              show: true,
            },
            itemStyle: {
              borderWidth: 3,
              // borderColor: "#fff",
            },
            minAngle: 15, //最小角度
            startAngle: 270, //起始角度
            label: {
              // show: false,
              formatter: params => {
                if (params.percent > 10) {
                  return `{b|${params.name}} \n {per|${Math.ceil(
                    (params.value * 100) / count
                  )}%}`
                } else {
                  return `{b|${params.name}}`
                }
              },
              // backgroundColor: "#eee",
              // borderColor: "#aaa",
              // borderWidth: 1,
              // borderRadius: 3,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 14,
                  lineHeight: 14,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },

            data: baseDataWrap,
          },
        ],
      }
      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },

  },
}
</script>

<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 100%;
}
</style>