let app = new Vue({
  el: '#app',
  data () {
    return {
      time: '',
      timer: '',
    }
  },
  created () {
    this.time = formatDate()
    this.timer = setInterval(() => {
      this.time = formatDate()
    })
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  mounted () {
    setTimeout(() => {
      this.initChart1()
      this.initChart2()
      this.initChart3()
      this.initChart4()
      this.initChart5()
    })
  },
  methods: {
    format (percentage) {
      return '230.10亿'
    },
    initChart1 () {
      let myChart = echarts.init(this.$refs['echart1'])
      let option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: '5%',
          orient: 'vertical',

          textStyle: {
            color: '#9DB9EB',
          },
          data: ['先进产能', '传统产能']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '50%'],
            center: ['50%', '40%'],
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: [
              { value: 1048, name: '先进产能' },
              { value: 735, name: '传统产能' }
            ],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'];
                  return colorList[colors.dataIndex];
                }
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
          },
        ],
      }
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 10000,
        loopSeries: true,
      })
    },
    initChart2 () {
      let myChart = echarts.init(this.$refs['echart2'])
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: '15%',
          right: '10',
          left: '30',
          bottom: '10%',
        },
        xAxis: {
          data: ['2020', '2021', '2022'],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 15,
            textStyle: {
              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
              fontSize: 12,
            },
          },
        },
        yAxis: [
          {
            name: '单位亿吨',
            type: 'value',
            nameTextStyle: {//y轴上方单位的颜色
              color: '#fff',
              fontSize: '10px'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: '{value}',
              textStyle: {
                color: 'rgba(250,250,250,0.6)',
              },
            },
          },
        ],
        series: [
          {
            name: '实际值',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: [70, 52, 33],
          }
        ],
      }
      myChart.setOption(option);
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      });
    },
    initChart3 () {
      let myChart = echarts.init(this.$refs['echart3'])
      let option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: '5%',
          orient: 'vertical',

          textStyle: {
            color: '#9DB9EB',
          },
          data: ['先进产能', '传统产能']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '50%'],
            center: ['50%', '40%'],
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: [
              { value: 1048, name: '先进产能' },
              { value: 735, name: '传统产能' }
            ],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'];
                  return colorList[colors.dataIndex];
                }
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
          },
        ],
      }
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 10000,
        loopSeries: true,
      })
    },
    initChart4 () {
      let myChart = echarts.init(this.$refs['echart4'])
      let option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: '5%',
          orient: 'horizontal',

          textStyle: {
            color: '#9DB9EB',
          },
          data: ['产业转型', '数字化转型', '其他项目']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '50%'],
            center: ['50%', '40%'],
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: [
              { value: 1048, name: '产业转型' },
              { value: 735, name: '数字化转型' },
              { value: 735, name: '其他项目' }
            ],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'];
                  return colorList[colors.dataIndex];
                }
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
          },
        ],
      }
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 10000,
        loopSeries: true,
      })
    },
    initChart5 () {
      let myChart = echarts.init(this.$refs['echart5'])
      let option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: '5%',
          orient: 'horizontal',

          textStyle: {
            color: '#9DB9EB',
          },
          data: ['传统产业改造提升', '战略性新兴产业发展壮大']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '50%'],
            center: ['50%', '40%'],
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: [
              { value: 1048, name: '传统产业改造提升' },
              { value: 735, name: '战略性新兴产业发展壮大' }
            ],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'];
                  return colorList[colors.dataIndex];
                }
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
          },
        ],
      }
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 10000,
        loopSeries: true,
      })
    },
  },
})