pc_kingdee_large_screen/investment/js/investHome3compound.js

let app = new Vue({
  el: '#app',
  data () {
    return {
      time: '',
      timer: '',
      config5: {
        waitTime: 2000,
        header: ["风险类型", "风险说明", '提出人', '时间', '风险等级'],
        data: [
          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="blue">一级</span></span>'],
          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="yellow">二级</span></span>'],
          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="pink">三级</span></span>'],
          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="blue">一级</span></span>'],
          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="yellow">二级</span></span>'],
          ["风险等级", "WBS:012工程", "杨志宇", "2022.9.12", '<span class="lightOut"><span class="pink">三级</span></span>']
        ],
        align: ["center", "center", "center", "center", "center"],
        headerBGC: "#1C537D",
        oddRowBGC: "#09335C"
      },
    }
  },
  created () {
    this.time = formatDate()
    this.timer = setInterval(() => {
      this.time = formatDate()
    }, 1000)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  mounted () {
    setTimeout(() => {
      this.initChartL1()
      this.initChartL2()
      this.initChartL3()
      this.initChartL4()
      this.initChartL5()
      this.initChartL6()
      this.aiQualityECharts();
      this.aiQualityECharts2();
    })
  },
  methods: {
    initChartL1 () {
      let myChart = echarts.init(this.$refs['tl1'])
      let option = {
        grid: {
          top: 0,
          right: 0,
          left: 0,
          bottom: 0,
        },
        tooltip: {
          trigger: 'item',
        },
        color: ['#6682f5', '#40A9FF'],
        legend: {
          // icon: 'circle',
          bottom: 5,
          left: '40',
          // itemHeight: 10,
          // itemWidth: 10,
          textStyle: {
            color: '#9DB9EB',
          },
        },
        // graphic: {
        //   elements: [{
        //     type: "text",
        //     left: "center",
        //     top: "70%",
        //     style: {
        //       text: "投资类别",
        //       textAlign: "center",
        //       fill: "#fff",
        //       fontSize: 15,
        //       fontWeight: 500
        //     }
        //   }]
        // },
        series: [
          {
            center: ['50%', '32%'],
            radius: ['45%', '60%'],
            name: '',
            type: 'pie',
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: 1169.91, name: '固定资产投资' },
              { value: 154.17, name: '股权投资' }
            ],
          },
        ],
      }
      tools.loopShowTooltip(myChart, option, {
        interval: 2000,
        loopSeries: true,
      });
      myChart.setOption(option)
    },
    initChartL2 () {
      let myChart = echarts.init(this.$refs['tl2'])
      let option = {
        grid: {
          top: 0,
          right: 0,
          left: 0,
          bottom: 0,
        },
        tooltip: {
          trigger: 'item',
        },
        color: ['#40A9FF', '#45DAD1'],
        legend: {
          bottom: 0,
          left: 40,
          textStyle: {
            color: '#9DB9EB',
          },
        },
        // graphic: {
        //   elements: [{
        //     type: "text",
        //     left: "center",
        //     top: "77%",
        //     style: {
        //       text: "投资阶段",
        //       textAlign: "center",
        //       fill: "#fff",
        //       fontSize: 15,
        //       fontWeight: 500
        //     }
        //   }]
        // },
        series: [
          {
            center: ['50%', '32%'],
            radius: ['45%', '60%'],
            name: '',
            type: 'pie',
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: 345.53, name: '新建项目' },
              { value: 978.55, name: '续建项目' }
            ],
          },
        ],
      }
      tools.loopShowTooltip(myChart, option, {
        interval: 2500,
        loopSeries: true,
      });
      myChart.setOption(option)
    },
    initChartL3 () {
      let myChart = echarts.init(this.$refs['tl3'])
      let option = {
        grid: {
          top: 0,
          right: 0,
          left: 0,
          bottom: 0,
        },
        tooltip: {
          trigger: 'item',
        },
        color: ['#40A9FF', '#8BA2FF'],
        legend: {
          bottom: 0,
          left: 40,
          textStyle: {
            color: '#9DB9EB',
          },
        },
        // graphic: {
        //   elements: [{
        //     type: "text",
        //     left: "center",
        //     top: "77%",
        //     style: {
        //       text: "管理类别",
        //       textAlign: "center",
        //       fill: "#fff",
        //       fontSize: 15,
        //       fontWeight: 500
        //     }
        //   }]
        // },
        series: [
          {
            center: ['50%', '32%'],
            radius: ['45%', '60%'],
            name: '',
            type: 'pie',
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: 242, name: '特别监管类' },
              { value: 165, name: '备案类' },
              { value: 35, name: '其他类' }
            ],
          },
        ],
      }
      tools.loopShowTooltip(myChart, option, {
        interval: 3000,
        loopSeries: true,
      });
      myChart.setOption(option)
    },
    initChartL4 () {
      let myChart = echarts.init(this.$refs['tl4'])
      let option = {
        grid: {
          top: 0,
          right: 0,
          left: 0,
          bottom: 0,
        },
        tooltip: {
          trigger: 'item',
        },
        color: ['#45DAD1', '#40A9FF'],
        legend: {
          bottom: 0,
          left: '30',
          textStyle: {
            color: '#9DB9EB',
          },
        },
        // graphic: {
        //   elements: [{
        //     type: "text",
        //     left: "center",
        //     top: "77%",
        //     style: {
        //       text: "投资领域",
        //       textAlign: "center",
        //       fill: "#fff",
        //       fontSize: 15,
        //       fontWeight: 500
        //     }
        //   }]
        // },
        series: [
          {
            center: ['50%', '32%'],
            radius: ['45%', '60%'],
            name: '',
            type: 'pie',
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: 405.29, name: '传统产业投资' },
              { value: 196.44, name: '战略新兴产业投资' },
              { value: 722.34, name: '基础产业投资' }
            ],
          },
        ],
      }
      tools.loopShowTooltip(myChart, option, {
        interval: 3500,
        loopSeries: true,
      });
      myChart.setOption(option)
    },
    initChartL5 () {
      let myChart = echarts.init(this.$refs['cl1'])
      let option = {
        grid: {
          top: 0,
          right: 0,
          left: 0,
          bottom: 0,
        },
        tooltip: {
          trigger: 'item',
        },
        color: ['#45DAD1', '#40A9FF'],
        legend: {
          bottom: 0,
          left: 'center',
          textStyle: {
            color: '#9DB9EB',
          },
        },
        graphic: {
          elements: [{
            type: "text",
            left: "center",
            top: "77%",
            style: {
              text: "投资情况",
              textAlign: "center",
              fill: "#fff",
              fontSize: 15,
              fontWeight: 500
            }
          }]
        },
        series: [
          {
            center: ['50%', '40%'],
            radius: ['45%', '60%'],
            name: '',
            type: 'pie',
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: 1048, name: '数据1' },
              { value: 735, name: '数据2' }
            ],
          },
        ],
      }
      tools.loopShowTooltip(myChart, option, {
        interval: 4000,
        loopSeries: true,
      });
      myChart.setOption(option)
    },
    initChartL6 () {
      let myChart = echarts.init(this.$refs['cr1'])
      option = {
        title: {
          text: ''
        },
        legend: {
          data: ['类型1', '类型2', '类型3', '类型4', '类型5'],
          bottom: 0,
          left: 'center',
          textStyle: {
            color: '#9DB9EB',
          },
        },
        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
          show: true,
          areaStyle: { // 分隔区域的样式设置。
            color: ['yellow'],
            // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
          }
        },
        radar: {
          // shape: 'circle',
          center: ['50%', '50%'],
          radius: 60,
          indicator: [
            { name: '类型1', max: 100000 },
            { name: '类型2', max: 100000 },
            { name: '类型3', max: 100000 },
            { name: '类型4', max: 100000 },
            { name: '类型5', max: 100000 },
          ],
          axisLine: {  // 设置雷达图中间射线的颜色
            lineStyle: {
              color: '#c0c0c0',
            },
          },
          splitLine: { //网格颜色设置
            show: true,
            lineStyle: {
              width: 1,
              color: '#1e83e4',
            },
          },
          splitArea: {  //设置图表颜色，show的值为true
            show: false,
            areaStyle: {
              // color:"#c1ddf8", //一般设置方式
              //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
              //a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
              //b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: '#c1ddf8' }, // 0% 处的颜色 
                { offset: 1, color: '#1e83e4' }// 100% 处的颜色
              ], false)
            }
          }
        },
        series: [
          {
            name: '',
            type: 'radar',
            symbol: 'circle', // 单个数值点的样式，还可以取值'rect','angle'等
            symbolSize: 0, // 数值点的大小
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: '类型1',
                itemStyle: { //该数值区域样式设置
                  normal: {
                    color: '#2CC6FF', //背景颜色，还需设置areaStyle
                    lineStyle: {
                      color: '#2CC6FF', //边框颜色
                    },
                  },
                },
                label: {  //显示value中具体的数值
                  normal: {
                    show: false,
                    textStyle: {  //更改数值样式
                      color: '#43EDE3'
                    }
                  },
                },
                areaStyle: { //设置区域背景颜色透明度
                  normal: {
                    width: 1,
                    opacity: 0.8,
                  },
                },
              },
              {
                value: [8000, 3000, 38000, 76000, 32000, 71000],
                name: '类型2',
                itemStyle: { //该数值区域样式设置
                  normal: {
                    color: '#D87AFF', //背景颜色，还需设置areaStyle
                    lineStyle: {
                      color: '#2CC6FF', //边框颜色
                    },
                  },
                },
                label: {  //显示value中具体的数值
                  normal: {
                    show: false,
                    textStyle: {  //更改数值样式
                      color: '#43EDE3'
                    }
                  },
                },
                areaStyle: { //设置区域背景颜色透明度
                  normal: {
                    width: 1,
                    opacity: 0.8,
                  },
                },
              }
            ]
          }
        ]
      };
      tools.loopShowTooltip(myChart, option, {
        interval: 2000,
        loopSeries: true,
      });
      myChart.setOption(option)
    },
    aiQualityECharts () {
      let chart = echarts.init(document.getElementById("aiQuality"));
      let option = {
        grid: {
          top: 35,
          right: 40,
          left: 60,
          bottom: 20,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          data: ["万家寨水控", "山西建设", "华新燃气", "国际能源", "汾酒集团", "大地控股", "晋能控股", '华远陆港', '山西焦煤', '潞安化工', '华阳新材', '太重集团', '文旅集团', '航产集团', '华舰体育', '神农科技', '云时代', '山西交控'],
          axisTick: {
            show: false,
          },
          // x轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "white",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: [{
          type: 'value',
          name: '亿元',
          nameTextStyle: {//y轴上方单位的颜色
            color: '#fff',
          },
          axisTick: {
            lineStyle: {
              color: "#18416F",
            },
          },
          // y轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "white",
              formatter: '{value} %',
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#204561",
              width: 1,
              type: "dotted",
            },
          },
        },
        {
          type: 'value',
          nameTextStyle: {//y轴上方单位的颜色
            color: '#fff',
          },
          axisTick: {
            lineStyle: {
              color: "#18416F",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            formatter: '{value} %',
            lineStyle: {
              color: "#fff",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#204561",
              width: 1,
              type: "dotted",
            },
          }
        }],
        series: [
          {
            name: "",
            type: "bar",
            data: [46.99, 218.35, 31.83, 64.20, 14.03, 47.05, 385.25, 97.57, 189.07, 106.84, 82.95, 80.01, 26.79, 41.09, 5.33, 14.76, 63.45, 346.36],
            showBackground: false,
            backgroundStyle: {
              color: "#18416F",
            },
            barWidth: "10%",
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#132543",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#897DFF",
                },
              ]),
            },
          },
          {
            name: "",
            type: "bar",
            data: [50.89, 143.84, 25.20, 12.19, 7.69, 23.93, 224.89, 112.67, 121.59, 59.93, 71.34, 42.46, 9.64, 42.67, 0.80, 5.84, 32.60, 335.91,],
            showBackground: false,
            backgroundStyle: {
              color: "#18416F",
            },
            barWidth: "10%",
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#132543",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#FED95B",
                },
              ]),
            },
          },
          {
            name: "",
            type: "bar",
            yAxisIndex: 1,
            data: [1.08, 0.66, 0.79, 0.19, 0.55, 0.51, 0.58, 1.15, 0.64, 0.56, 0.86, 0.53, 0.36, 1.04, 0.15, 0.4, 0.51, 0.97],
            showBackground: false,
            backgroundStyle: {
              color: "#18416F",
            },
            barWidth: "10%",
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#132543",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#897DFF",
                },
              ]),
            },
          },
        ],
        legend: {
          data: ["计划投资额", "实际投资额"],
          textStyle: {
            // 图列内容样式
            color: "#fff", // 字体颜色
            // fontSize: "10",
          },
          right: 30,
          icon: "roundRect",
          // 小图标的宽高
          itemHeight: 5,
        },
      };
      chart.setOption(option);
      tools.loopShowTooltip(chart, option, {
        interval: 2000,
        loopSeries: true,
      });
    },
    aiQualityECharts2 () {
      let chart = echarts.init(document.getElementById("aiQuality2"));
      let option = {
        grid: {
          top: 35,
          right: 40,
          left: 60,
          bottom: 20,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          data: ["工程费用", "设备费用", "人员费用", "材料费用", "管理费用"],
          axisTick: {
            show: false,
          },
          // x轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "white",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          name: '亿元',
          nameTextStyle: {//y轴上方单位的颜色
            color: '#fff',
          },
          axisTick: {
            lineStyle: {
              color: "#18416F",
            },
          },
          // y轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#204561",
              width: 1,
              type: "dotted",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            name: "预算金额",
            type: "bar",
            data: [843, 987, 126, 723, 569],
            showBackground: false,
            backgroundStyle: {
              color: "#18416F",
            },
            barWidth: "10%",
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#132543",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#40A9FF",
                },
              ]),
            },
          },
          {
            name: "实际金额",
            type: "bar",
            data: [675, 743, 724, 733, 725],
            showBackground: false,
            backgroundStyle: {
              color: "#18416F",
            },
            barWidth: "10%",
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#132543",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#45DAD1",
                },
              ]),
            },
          },
        ],
        legend: {
          data: ["预算金额", "实际金额"],
          textStyle: {
            // 图列内容样式
            color: "#fff", // 字体颜色
            // fontSize: "10",
          },
          right: 30,
          icon: "roundRect",
          // 小图标的宽高
          itemHeight: 5,
        },
      };
      chart.setOption(option);
      tools.loopShowTooltip(chart, option, {
        interval: 2000,
        loopSeries: true,
      });
    }
  },
})