<template>
  <div class>
    <div class="charts">
      <div
        id="listChart"
        ref="myChart"
        :style="{width: '100%', height: '400px'}"
      />
    </div>
  </div>
</template>
<script>
// const echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// import echarts from 'echarts'

export default {
  name: 'EchartBar',
  // props:['id'], // 第一种接收父亲传过来的值的方式
  props: {
    id: {
      type: String,
      default: 'chart'
    }
  },
  data () {
    return {
      msg: '我是柱状图子组件--bar',
      chart: null
    }
  },
  mounted () {
    this.drawBar();
  },
  methods: {
    drawBar () {
      // this.$refs.myChart
      // this.chart = echarts.init(document.getElementById(this.id));
      this.chart = this.$echarts.init(this.$refs.myChart)
      const colors = ['#5793f3', '#d14a61', '#675bba'];
      this.chart.setOption(
        {
          color: colors,

          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            right: '20%'
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['利润', '成本', '销售额']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '销售额',
              min: 0,
              max: 250,
              position: 'right',
              axisLine: {
                lineStyle: {
                  color: colors[0]
                }
              },
              axisLabel: {
                formatter: '{value} 万元'
              }
            },
            {
              type: 'value',
              name: '成本',
              min: 0,
              max: 250,
              position: 'right',
              offset: 80,
              axisLine: {
                lineStyle: {
                  color: colors[1]
                }
              },
              axisLabel: {
                formatter: '{value} 万元'
              }
            },
            {
              type: 'value',
              name: '利润',
              min: 0,
              max: 25,
              position: 'left',
              axisLine: {
                lineStyle: {
                  color: colors[2]
                }
              },
              axisLabel: {
                formatter: '{value} 万元'
              }
            }
          ],
          series: [
            {
              name: '销售额',
              type: 'bar',
              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
              name: '成本',
              type: 'bar',
              yAxisIndex: 1,
              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
              name: '利润',
              type: 'line',
              yAxisIndex: 2,
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
          ]
        }
      )
    }
  }
}
</script>
<style scoped>
/* @import "../views/mystyle/resetelui.css"; */
</style>
