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

      option = {
        legend: {
          top: 'bottom',
          padding: 30,
        },
        tooltip: {
          //此处配置鼠标移动对应区域时的黑色弹框
          trigger: 'item',
          formatter: (a) => {
            return (
              a.seriesName +
              '<br/>' +
              a.marker +
              a.name +
              ' ' +
              a.data[a.seriesIndex + 1] +
              '个'
            )
          },
        },
        dataset: {
          source: [
            ['product', '计划开工项目', '已开工项目'],
            ['1月', 43, 21],
            ['2月', 83, 34],
            ['3月', 86, 0],
            ['4月', 86, 0],
            ['5月', 86, 0],
            ['6月', 86, 0],
            ['7月', 86, 0],
            ['8月', 86, 0],
            ['9月', 86, 0],
            ['10月', 86, 0],
            ['11月', 86, 0],
            ['12月', 86, 0],
          ],
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            fontSize: 14,
          },
        },
        yAxis: {
          axisLabel: {
            fontSize: 16
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            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: '#50c48f'},
                  {offset: 0.5, color: '#26ccd8'},
                  {offset: 0, color: '#3685fe'},
                ]),
              },
            },
          },
          {
            type: 'bar',
            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: '#71ae46'},
                  {offset: 0.5, color: '#96b744'},
                  {offset: 0, color: '#c4cc38'},
                ]),
              },
            },
          },
        ],
      }

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