<template>
  <div class="echart">
    <div id="myChart" :style="{width: '600px', height: '300px'}"></div>
  </div>
</template>
<script>
// 引入基本模板
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '年龄分布' },
        tooltip: {},
        legend: {
          data: ['基金', '全网分布', '平均温度']
        },
        xAxis: {
          data: ['≤19', '20-29', '30-39', '40-49', '≥50']
        },
        yAxis: [
          {
            type: 'value',
            name: '温度',
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
                  color: '#333'
              }
            },
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '基金',
            type: 'bar',
            barWidth: '30%',
            data: [13, 28, 46, 23, 20],
            itemStyle: {
              normal: {
                color: '#68B8A4'
              }
            }
          },
          {
            name: '全网分布',
            type: 'bar',
            barWidth: '30%',
            data: [8, 12, 30, 15, 9],
            itemStyle: {
              normal: {
                color: '#63C7E3'
              }
            }
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
.echart{
  background:#fff;
  padding:50px;
  margin-top:50px;
}
</style>
