<template>
  <div class="app-container">
    <el-row :gutter="5">
      <el-col :span="8">
        <el-card>
          <Echart
            :options="pieOptions"
            id="pieChart"
            height="400px"
            width="260px"
          ></Echart>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <charts
            :id="chartId1"
            :options="barOptions"
            :className="chartsName"
            height="400px"
            width="600px"
          >
          </charts>
        </el-card>
      </el-col>
    </el-row>
    <el-col>
      <el-card>
        <charts
          :id="chartId2"
          :options="barOptions"
          :className="chartsName"
          height="480px"
          width="100%"
        >
        </charts>
      </el-card>
    </el-col>
  </div>
</template>

<script>
  import charts from './charts.vue'
  import Echart from '@/components/echart';
    export default {
        name: "progressStatistics",
      components: {
        Echart,
        charts
      },
      data() {
        return {
          chartsName:'barChart',
          chartId1:'chart1',
          chartId2:'chart2',
          pieOptions: {},
          barOptions: {},
          cdata: {
            xData: ["交付率", "逾期率"],
            seriesData: [
              {value: 99, name: "交付率"},
              {value: 1, name: "逾期率"},
            ]
          },
          xAxisbar:["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框"],
          barData: [80, 95, 96, 96, 96, 98, 99],
        }
      },
      watch: {
        cdata: {
          handler(newData) {
            this.pieOptions = {
              color: [
                "#32c5e9",
                "#ffdb5c"
              ],
              tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              toolbox: {
                show: true
              },
              calculable: true,
              series: [
                {
                  name: '访问来源',
                  type: 'pie',    // 设置图表类型为饼图
                  radius: '65%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                  center: ['50%', '50%'], //圆心位置
                  data:newData.seriesData
                }
              ]
            }
          },
          immediate: true,
        },
        immediate: true,
        deep: true
      },
      methods: {
      },
      mounted() {
          this.barOptions ={
            grid: {
              top: '10%',
              left: '3%',
              right: '5%',
              bottom: '1%',
              containLabel: true
            },
            tooltip: {
              trigger: 'item',
              formatter: function (params) {
                let color = params.color;//图例颜色
                let htmlStr = '<div>';
                htmlStr += params.name + '<br/>';
                htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
                htmlStr += params.seriesName + '：' + params.value + '%';
                htmlStr += '</div>';
                return htmlStr;
              }
            },
            xAxis: {
              axisTick: {
                show: false
              },
              splitLine: {
                show: false, //去掉X轴分割线
              },
              data: this.xAxisbar,
            },
            yAxis: {
              axisLine: {
                show: true,//y轴线
              },
              axisTick: {
                show: false//Y轴刻度线
              },
              axisLabel: {
                color: '#333333'//Y轴文本颜色
              },
              splitLine: {
                show: true, //Y轴分割线
                lineStyle: {
                  color: '#dddddd'//Y轴分割线颜色
                }
              },
            },
            series: [{
              name: '成品率',
              type: 'bar',
              barWidth: 20,
              data: this.barData,
              label: {
                show: true, //开启显示
                position: 'top', //在上方显示
                formatter: '{c}%',//显示百分号
                textStyle: { //数值样式
                  color: 'black',//字体颜色
                  fontSize: 10//字体大小
                }
              },
              itemStyle: {
                color: '#409EFF'
              },
            }]
          }
      }
    }
</script>

<style scoped>

</style>
