分组柱状图

<!--分组柱状图-->
<template>
  <div class="chartBox">
    <!--echart图标-->
    <div id="histogram" ref="histogram"></div>
  </div>

</template>

<script>
// 引入基本模板
// const echarts = require('echarts');
import * as echarts from 'echarts' // 注意此处echarts高版本中需要使用此方式才可引入
export default {
  name: "lineChart",
  data() {
    return {
      myChart: null,
    }
  },
  mounted() {
    this.initEchart();

  },
  methods: {
    initEchart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs.histogram);

      let option = {
        legend: {
          itemGap:30,
          itemWidth:12,
          itemHeight:12,
          top:10,
          right:0,
          textStyle:{
            color:'#FFF'
          }
        },
        tooltip: {},
        title: {
          subtext: "使用次数/次",
          top: 0,
          left: 0,
          subtextStyle: { // 设置二级标题的样式
            color: "#FFF"
          }
        },
        grid: {
          left: '0',
          bottom: '0',
          top: '60',
          right: 0,
          containLabel: true
        },
        dataset: {
          dimensions: ['product', 'audio', '360p', '720p', '1080p'],
          source: [
            {product: '2022.10.20', audio: 43.3, '360p': 43.3, '720p': 85.8, '1080p': 93.7},
            {product: '2022.10.21', audio: 43.3, '360p': 83.1, '720p': 73.4, '1080p': 55.1},
            {product: '2022.10.22', audio: 43.3, '360p': 86.4, '720p': 65.2, '1080p': 82.5},
            {product: '2022.10.23', audio: 43.3, '360p': 72.4, '720p': 53.9, '1080p': 39.1},
            {product: '2022.10.24', audio: 43.3, '360p': 72.4, '720p': 53.9, '1080p': 39.1}
          ]
        },
        xAxis: {
          type: 'category',
          show: true,


          axisLine:{

            lineStyle:{
              color:'rgba(255,255,255,0.45)',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#FFF',
              fontSize: 12
            }
          }
        },
        yAxis: {
          splitLine:{
            lineStyle:{
              color:'rgba(255,255,255,0.45)'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#FFF',
              fontSize: 12
            }
          },

        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            name:'纯音乐',
            labelLayout:{
              x:100,
              y:100,
              fontSize:100
            },
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#4D55ED'},
                {offset: 1, color: '#8D78EA'}
              ]),
              shadowColor:'rgba(0,213,240,0.6)',
              shadowOffsetX:0,
              shadowOffsetY:-2,
              shadowBlur: 8,
            }
          },
          {
            name:'360p',
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#00D9F0'},
                {offset: 1, color: '#0D93F7'}
              ]),
              shadowColor:'rgba(0,213,240,0.6)',
              shadowOffsetX:0,
              shadowOffsetY:-2,
              shadowBlur: 8,
            }
          },
          {
            name:'720p',
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#28C76F'},
                {offset: 1, color: '#5EFCE8'}
              ]),
              shadowColor:'rgba(0,213,240,0.6)',
              shadowOffsetX:0,
              shadowOffsetY:-2,
              shadowBlur: 8,
            }
          },
          {
            name:'1080p',
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#DEFF03'},
                {offset: 1, color: '#F8D803'}
              ]),
              shadowColor:'rgba(0,213,240,0.6)',
              shadowOffsetX:0,
              shadowOffsetY:-2,
              shadowBlur: 8,
            }
          }
        ]
      };


      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    }
  }
}
</script>

<style scoped lang="scss">
.chartBox {
  width: 100%;
  box-sizing: border-box;
  padding: 1.6rem;
  flex: 1;

  #histogram {

    height: calc(100% - 16px);

  }
}
</style>