<template>
  <div>
    <container4 title="总体生产情况">
      <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      <div style="height:100%;width:100%;" ref="chart"></div>
    </container4>
  </div>

</template>

<script>
import container4 from "../components/container4/index.vue";

import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
import 'echarts-liquidfill'
export default {
  mixins: [resize],
  name: 'bottom1',
  components: {
    container4,
  },
  data () {
    return {
      dateRange: [],
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params, ticket, callback) {
            console.log(params)
            var res = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
            }
            setTimeout(function () {
              // 仅为了模拟异步回调
              callback(ticket, res);
            }, 100)
            return 'loading...';
          }
        },
        legend: {
          data: ['交付产品', '装药量'],
          textStyle: {
            color: '#fff'
          },
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '35%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            axisLabel: {
              formatter: function (value) {
                return Math.abs(value);//显示的数值都取绝对值
              }
            },
            type: 'value',
            splitLine: {
              show: false//不显示网格线
            },
            axisLine: {
              lineStyle: {
                color: 'rgb(255, 255, 255)'
              },
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            // data : ['0~5岁','5~10岁','10-30岁','30-50岁','50-70岁','70-100','100以上']
            data: ['2021.12', '2021.11', '2021.10', '2021.09', '2021.08'].reverse(),
            splitLine: {
              show: false//不显示网格线
            },
            splitArea: {
              show: false//不显示网格区域
            },
            axisLine: {
              lineStyle: {
                color: 'rgb(255, 255, 255)'
              },
            },
          }
        ],
        title: {
          text: `${80}%`,
          left: "80%",
          top: "40%",
          textAlign: 'center',
          textStyle: {
            fontWeight: "normal",
            fontSize: 26,
            fontWeight: 'bold',
            color: "rgb(255,255,255)",
          },
        },
        series: [
          {
            name: '交付产品',
            type: 'bar',
            stack: '总量',
            barWidth: 20,
            label: {
              normal: {
                show: true,
                position: 'inside',

              }
            },
            data: [320, 302, 341, 374, 390],
            itemStyle: {
              color: 'rgb(115,208,183)'
            },
          },
          {
            name: '装药量',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: function (v) { return Math.abs(v.data) }
              }
            },

            data: [-120, -132, -101, -134, -190],
            itemStyle: {
              color: 'rgb(151,186,255)'
            },
          },
          {
            type: 'liquidFill',
            radius: '40%',
            z: 1,
            center: ['50%', '50%'],
            amplitude: 20,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#324791',
                },
                {
                  offset: 1,
                  color: '#449090',
                },
              ],
              globalCoord: false,
            },
            data: [
              0.4,
              {
                value: 0.4,
                direction: 'left',
              },
            ],
            backgroundStyle: {
              borderWidth: 1,
              color: 'transparent',
            },
            label: {
              normal: {
                formatter: '',
              },
            },
            outline: {
              show: true,
              itemStyle: {
                borderWidth: 0,
              },
              borderDistance: 0,
            },
          },

          {
            type: "liquidFill", // 图表类型
            radius: "70%",
            center: ["80%", "50%"],
            data: [
              80 / 100,
              80 / 100,
            ], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "rgba(255,255,255,0)"
            },
            label: {
              normal: {
                show: false, //不显示label  用副标题代替了
                formatter: (0.5 * 100).toFixed(0) + "%",
                textStyle: {
                  fontSize: 38,
                  color: "black"
                }
              }
            },
            color: [  //color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(82,157,240,0.1)"
                  },
                  {
                    offset: 0,
                    color: "rgba(104,222,219,0.5)"
                  }
                ],
                globalCoord: false
              },
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(82,157,240,0.1)"
                  },
                  {
                    offset: 0,
                    color: "rgba(104,222,219,0.5)"
                  }
                ],
                globalCoord: false
              },
            ],
            outline: {
              show: false
            }
          },

          //进度线
          {
            type: "pie",
            center: ["80%", "50%"],
            radius: ["75%", "80%"], //进度线粗细
            hoverAnimation: false,
            clockwise: false,
            data: [
              {
                name: "",
                value: 80, //进度
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 2,
                    colorStops: [
                      // !! 在此添加渐变过程色 !!
                      { offset: 0, color: "#68DEDB" },
                      { offset: 1, color: "#529DF0" }
                    ]
                  }
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    // color: "#5886f0"
                  }
                }
              },
              {
                //画剩余的刻度圆环
                name: "",
                value: 100 - 80,
                clockwise: false,
                itemStyle: {
                  color: "rgba(255,255,255,0)"
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: "rgba(255,255,255,0)"
                  }
                }
              }
            ]
          }
        ]
      }


    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$refs.chart, 'macarons');
      this.chart.setOption(this.option);
    }
  }
}
</script>

<style lang="scss" scoped>
</style>