<template>
  <div :id="'chart' + index" style="height: 360px;width: 100%"></div>
</template>

<script>
export default {
  props: {
    option: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: -1
    },
    //是否转换options
    isConvertOption: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    option: {
      handler: function(newVal, oldVal) {
        this.initChart()
      },
      deep: true
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      let chart = this.$echarts.init(
        document.getElementById('chart' + this.index)
      )
      chart.clear() //清空图表实例
      let myOption = {}
      if (this.isConvertOption) {
        if (
          this.option &&
          this.option.series &&
          this.option.series[0].type === 'pie'
        ) {
          myOption = {
            title: {
              text: this.option.name,
              subtext: this.option.subtext
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              data: this.option.legend
            },
            series: this.option.series
          }
        } else {
          myOption = {
            title: {
              text: this.option.name,
              subtext: this.option.subtext,
              top: 20
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            calculable: true,
            legend: {
              x: 'right',
              data: this.option.legend
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              y: 'center',
              right: 20,
              itemGap: 13,
              feature: {
                mark: {show: true},
                magicType: {
                  show: true,
                  type: ['line', 'bar', 'stack', 'tiled']
                },
                //重写Restore
                myTool1: {
                  show: true,
                  title: 'Restore',
                  icon:
                    'path://M512 981.333333c-209.866667 0-396.693333-126.026667-466.293333-314.08a35.52 35.52 0 0 1 23.626666-44.426666 38.613333 38.613333 0 0 1 48 20.693333c58.666667 158.933333 217.013333 265.493333 394.666667 265.6s336-106.666667 394.666667-266.133333a37.6 37.6 0 0 1 28.853333-23.626667 38.986667 38.986667 0 0 1 35.786667 11.946667 34.773333 34.773333 0 0 1 7.146666 35.36c-69.386667 188.373333-256.48 314.666667-466.453333 314.666666z m431.36-574.08a37.92 37.92 0 0 1-35.946667-24.266666C849.386667 222.56 690.613333 114.88 512 114.72S174.72 222.346667 116.746667 382.773333A38.72 38.72 0 0 1 69.333333 403.733333a35.786667 35.786667 0 0 1-24.106666-44.373333C113.333333 169.866667 301.013333 42.666667 512 42.666667s398.666667 127.306667 467.146667 316.96a34.56 34.56 0 0 1-4.906667 32.64 38.933333 38.933333 0 0 1-30.88 14.986666z',
                  onclick: () => {
                    // 还原
                    chart.clear()
                    chart.setOption(myOption)
                  }
                },

                // restore: { show: true },
                saveAsImage: {show: true},
                dataZoom: {
                  yAxisIndex: 'none'
                },
                dataView: {
                  show: true,
                  readOnly: true,
                  optionToContent: function(opt) {
                    let axisData = opt.xAxis[0].data
                    let series = opt.series
                    let tdHeaders = '<th></th>' //表头
                    series.forEach(function(item) {
                      tdHeaders += '<th>' + item.name + '</th>' //组装表头
                    })
                    let table =
                      '<div class="table-responsive"><table class="table table-bordered table-striped table-hover" style="text-align:center"><tbody><tr>' +
                      tdHeaders +
                      '</tr>'
                    let tdBodys = '' //数据
                    for (let i = 0, l = axisData.length; i < l; i++) {
                      for (let j = 0; j < series.length; j++) {
                        tdBodys += '<td>' + series[j].data[i] + '</td>' //组装表数据
                      }
                      table +=
                        '<tr><td style="padding: 0 10px">' +
                        axisData[i] +
                        '</td>' +
                        tdBodys +
                        '</tr>'
                      tdBodys = ''
                    }
                    table += '</tbody></table></div>'
                    return table
                  }
                }
              }
            },
            grid: {
              y: 80,
              y2: 40,
              x2: 40
            },
            xAxis: [
              {
                type: 'category',
                data: this.option.xAxis
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: this.option.series
          }
        }
      } else {
        myOption = this.option
      }
      chart.setOption(myOption)
    }
  }
}
</script>

<style scoped></style>
