<template>
<div>
    <h1 style="text-align: center; width: 100%; font-size: 32px;">质量等级统计</h1>
  <div
    v-resize="init"
    ref="chart"
    style="min-width: 400px; min-height: 600px; width: 100%; height: 100%"
  ></div>
</div>
</template>

<script>
import { generateWaterData } from "@/utils/water";
import Moment from "../utils/moment.zh_cn";
export default {
  data() {
    return {
      data: [],
    };
  },

  methods: {
    init() {
      let myChart = echarts.init(this.$refs.chart)
      setTimeout(function () {

        var option = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['水质指标', '2012', '2013', '2014', '2015', '2016', '2017'],
                    ['优', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                    ['良', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                    ['合格', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                    ['不合格', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    emphasis: {focus: 'data'},
                    label: {
                        formatter: ' {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: '指标统计',
                        value: '2012',
                        tooltip: '2012'
                    }
                }
            ]
        };

        myChart.on('updateAxisPointer', function (event) {
            var xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                var dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });

        myChart.setOption(option);

    });
    },

  },

  mounted() {
    this.init();
  },
};
</script>

<style>
</style>