代码更新

surprise

2024-05-09 e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf

 src/components/chart/projectState.vue

@@ -1,169 +1,164 @@
<template>
    <div class="projectState" ref="chart"></div>
  <div class="projectState" ref="chart"></div>
</template>
  

<script>
import * as echarts from "echarts"
import { GetServicesVisitsCount } from "@/api/screen.js"
export default {
    data() {
        return {
            option: {},
  data() {
    return {
      option: {},
    }
  },
  mounted() {
    // const option = this.initData()
    this.initChart()
  },
  methods: {
    initChart() {
      // const res = await GetServicesVisitsCount()

      // console.log(res.result);

      // if (res.code == 200) {
      // }
      // let xAxis = []
      // let yAxis = []

      // res.result.forEach(item => {
      //     xAxis.push(item.type)
      //     yAxis.push(item.count)
      // })

      // let data = [220, 182, 191, 234, 290, 330, 310]
      // const sideData = data.map(item => {
      //   return {
      //     name: item.name,
      //     value: item.number,
      //   }
      // })

      var XName = ["立项", "启动", "建设", "完成"]
      var data1 = [
        [100, 100, 100, 100],
        [
          100,
          100,
          {
            value: 100,
            symbol:
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==",
            symbolSize: [50, 50],
          },
        ],
      ]
      var Line = ["线1", "线2"]
      var color = ["#256589", "#3F88E9"]

      //数据处理
      var datas = []
      Line.map((item, index) => {
        if (index == 0) {
          datas.push({
            symbolSize: 10,
            symbol: "circle",
            hoverAnimation: false,
            name: item,
            type: "line",
            data: data1[index],
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: color[index],
              },
            },
          })
        } else {
          datas.push({
            symbolSize: 10,
            symbol: "circle",
            hoverAnimation: false,
            name: item,
            type: "line",
            data: data1[index],
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: color[index],
              },
            },
          })
        }
    },
    mounted() {
        // const option = this.initData()
        this.initChart()
    },
    methods: {
         initChart() {
            // const res = await GetServicesVisitsCount()
      })

            // console.log(res.result);

            // if (res.code == 200) {
            // }
            // let xAxis = []
            // let yAxis = []

            // res.result.forEach(item => {
            //     xAxis.push(item.type)
            //     yAxis.push(item.count)
            // })

            // let data = [220, 182, 191, 234, 290, 330, 310]
            // const sideData = data.map(item => {
            //   return {
            //     name: item.name,
            //     value: item.number,
            //   }
            // })

            var XName = ["立项", "启动", "建设", "完成"]
            var data1 = [
                [100, 100, 100, 100],
                [100, 100, {
                    value: 100, symbol:
                        'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                    symbolSize: [50, 50],
                }]
            ]
            var Line = ["线1", "线2"];
            var color = ['#256589', '#3F88E9'];

            //数据处理
            var datas = [];
            Line.map((item, index) => {
                if (index == 0) {
                    datas.push(
                        {
                            symbolSize: 10,
                            symbol: 'circle',
                            hoverAnimation: false,
                            name: item,
                            type: "line",
                            data: data1[index],
                            itemStyle: {
                                normal: {
                                    borderWidth: 5,
                                    color: color[index],
                                }
                            }
                        }
                    )

                } else {
                    datas.push(
                        {
                            symbolSize: 10,
                            symbol: 'circle',
                            hoverAnimation: false,
                            name: item,
                            type: "line",
                            data: data1[index],
                            itemStyle: {
                                normal: {
                                    borderWidth: 5,
                                    color: color[index],
                                }
                            }
                        }
                    )

                }

            })

        let     option = {
                grid: {
                    left: '5%',
                    top: '30%',
                    bottom: '30%',
                    right: '5%',
                },
                yAxis: [
                    {
                        type: 'value',
                        position: 'right',
                        max: 100,
                        splitLine: {
                            show: false
                        }
                        ,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    }
                ],
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#6A989E',
                            }
                        },
                        axisLabel: {
                            inside: true,
                            show: true,
                            textStyle: {
                                color: '#90deff',// x轴颜色
                                fontWeight: 'normal',
                                fontSize: '12',
                                lineHeight: 20
                            }

                        },
                        data: XName,
                    }
                ],
                series: datas,
            };
            const chart = echarts.init(this.$refs.chart)

            chart.setOption(option)
            window.addEventListener("resize", function () {
                chart.resize()
            })
      let option = {
        grid: {
          left: "5%",
          top: "30%",
          bottom: "30%",
          right: "5%",
        },
        yAxis: [
          {
            type: "value",
            position: "right",
            max: 100,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#6A989E",
              },
            },
            axisLabel: {
              inside: true,
              show: true,
              textStyle: {
                color: "#90deff", // x轴颜色
                fontWeight: "normal",
                fontSize: "12",
                lineHeight: 20,
              },
            },
            data: XName,
          },
        ],
        series: datas,
      }
      const chart = echarts.init(this.$refs.chart)

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

<style lang="scss" scoped>
.projectState {
    width: 100%;
    height: calc(100% - 30px);
  width: 100%;
  height: calc(100% - 30px);
}
</style>