<template>
  <div
    id='mainColumn'
    style="width:100%;height:100%"
  ></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      var chartDom = document.getElementById('mainColumn')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        legend: {
          top: 'bottom',
          padding: 30,
          data: ['年度投资', '计划投资']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          // 此处配置鼠标移动对应区域时的黑色弹框
          trigger: 'axis',
          // formatter: a => {
          //   return (
          //     a.seriesName +
          //     '<br/>' +
          //     a.marker +
          //     a.name +
          //     ' ' +
          //     a.data[a.seriesIndex + 1] +
          //     '万元'
          //   )
          // }
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '一月',
              '二月',
              '三月',
              '四月',
              '五月',
              '六月',
              '七月',
              '八月',
              '九月',
              '十月',
              '十一月',
              '十二月'
            ],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              fontSize: 14
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: '1200',
            axisLabel: {
              formatter: '{value}',
              fontSize: 16
            }
          },
          {
            type: 'value',
            min: 0,
            max: '1200',
            axisLabel: {
              formatter: '{value}',
              fontSize: 16
            }
          }
        ],
        series: [
          {
            name: '年度投资',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + '万元'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0,0,0,0.3)'
              }
            },
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 1, color: '#63b2ee'},
                  {offset: 0.5, color: '#76da91'},
                  {offset: 0, color: '#f8cb7f'}
                ])
              }
            },
            data: [
              730.2984,
              256.4447,
              220,
              340,
              429,
              791,
              652,
              452,
              323,
              255,
              671,
              303
            ]
          },

          {
            name: '计划投资',
            type: 'line',
            yAxisIndex: 1,
            // smooth: true,
            tooltip: {
              valueFormatter: function(value) {
                return value + '万元'
              }
            },
            itemStyle: {
              normal: {
                color: '#f89588'
              }
            },
            data: [
              830.2984,
              286.4447,
              320,
              340,
              429,
              791,
              652,
              452,
              623,
              255,
              771,
              403
            ]
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>