折柱混合图

<!--折柱混合图-->
<template>
  <div class="chartBox">
    <!--echart图标-->
    <div id="lineBarChart" ref="lineBarChart" ></div>
  </div>
</template>

<script>
// 引入基本模板
// const echarts = require('echarts');
import * as echarts from 'echarts' // 注意此处echarts高版本中需要使用此方式才可引入
export default {
  name: "barAndLineChart",
  props:{
    //折线是否平滑
    smooth:{
      type:Boolean,
      default:true
    },
    //拐点大小
    symbolSize:{
      type:Number,
      default:0
    },
    // 柱状背景颜色
    barBgColor:{
      type:Array,
      default(){
        return['#00D9F0','rgba(13,147,247,0)']
      }
    },
    //折线颜色
    lineColor:{
      type:Array,
      default(){
        return['#F97011','#F8D800']
      }
    },
  },
  data() {
    return {
      myChart: null,
    }
  },
  mounted() {
    this.initEchart();

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

      let option = {
        grid: {
          left: '0',
          bottom: '20',
          top: '60',
          right: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          itemGap: 16,
          itemWidth: 12,
          itemHeight: 12,
          top: 13,
          right: 72,
          textStyle: {
            color: '#FFF'
          },
          data: [
            {name: '直播人数', icon: 'rect', itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: '#00D9F0'},
                  {offset: 1, color: 'rgba(13,147,247,1)'}
                ])}},
            {name: '直播课程', icon: 'circle',itemStyle: {color:'#F8D501'}},

          ]
        },
        xAxis: [
          {
            type: 'category',
            data: ['05.17', '05.18', '05.19', '05.20', '05.21', '05.22', '05.23', '05.17', '05.18', '05.19', '05.20', '05.21', '05.22', '05.23'],
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {

              lineStyle: {
                color: 'rgba(255,255,255,0.2)'
              }
            },
            axisLabel: {
              interval: 0,
              // rotate:-30,
              textStyle: {
                color: '#FFF',
                fontSize: 12
              }
            }
          }
        ],
        yAxis: [

          {
            type: 'value',
            name: '人数/人',
            nameTextStyle: {
              color: '#FFF',
              fontSize: 12,
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.2)'
              }
            },
            nameGap: 30,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#FFF',
                fontSize: 12
              }
            },

          },
          {
            type: 'value',
            name: '课程',
            nameTextStyle: {
              color: '#FFF',
              fontSize: 12,
            },
            nameGap: 30,
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.2)'
              }
            },
            // min: 0,
            // max: 25,
            // interval: 5,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#FFF',
                fontSize: 12
              }
            }
          }
        ],
        series: [
          {
            name: '直播人数',
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: this.barBgColor[0]},
                {offset: 1, color: this.barBgColor[1]}
              ]),
              shadowColor: 'rgba(0,213,240,0.6)',
              shadowOffsetX: 0,
              shadowOffsetY: -2,
              shadowBlur: 8,
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 人';
              }
            },
            data: [
              100, 100, 50, 23.2, 25.6, 76.7, 135.6, 100, 100, 50, 23.2, 25.6, 76.7, 135.6,
            ]
          },
          {
            name: '直播课程',
            type: 'line',
            symbol: "circle",
            symbolSize: this.symbolSize,
            smooth: this.smooth,
            lineStyle:{
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color:this.lineColor[0] },
                {offset: 1, color:this.lineColor[1] }
              ]),//折线颜色
            },
            itemStyle: {
              normal:{
                color:'rgb(247, 207, 1)',//拐点颜色
              }
            },

            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 课程';
              }
            },
            data: [2, 4, 6, 8, 10, 22, 12, 12, 4, 6, 8, 10, 22, 12]
          }
        ]
      };

      // //建议加上以下这一行代码，不加，当浏览器窗口缩小时，echarts显示不全。
      // window.addEventListener('resize', function() {
      //   this.myChart.resize()
      // });
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);








    }
  }
}
</script>

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

    height: 100%;

  }
}
</style>