E-commerce/src/components/szBar/index.vue

<!--
 描述: 双轴柱状图
 作者: Jack Chen
 日期: 2020-04-27
-->

<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">双轴柱状图</div> 
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_bar"></div>
        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
export default {
  name: "szBar",
  data() {
    return {
      option: null,
      xAxisData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      yData1: [9, 12, 15, 18, 15, 12, 9, 12, 15, 18, 15, 12],
      yData2: [-9, -12, -15, -18, -15, -12, -9, -12, -15, -18, -15, -12],
    }
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_bar'));
      let barWidth = '10%';
      let dataCoord = [
        {coord: [0, 9]},
        {coord: [1, 12]},
        {coord: [2, 15]},
        {coord: [3, 18]},
        {coord: [4, 15]},
        {coord: [5, 12]},
        {coord: [6, 9]},
        {coord: [7, 12]},
        {coord: [8, 15]},
        {coord: [9, 18]},
        {coord: [10, 15]},
        {coord: [11, 12]},
      ];
      let dataCoord2 = [
        {coord: [0, -9]},
        {coord: [1, -12]},
        {coord: [2, -15]},
        {coord: [3, -18]},
        {coord: [4, -15]},
        {coord: [5, -12]},
        {coord: [6, -9]},
        {coord: [7, -12]},
        {coord: [8, -15]},
        {coord: [9, -18]},
        {coord: [10, -15]},
        {coord: [11, -12]},
      ];

      this.option = {
        xAxis: {
          data: this.xAxisData,
          axisLabel: {
            color: '#999',
            formatter: '{value} 月'
          },
          axisTick: {
            show: false
          }, 
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(40, 103, 168, 0.3)',
            }
          },
        },
        yAxis: {
          axisLabel: {
            color: '#999'
          },
          axisTick: {
            show: false
          }, 
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(40, 103, 168, 0.3)'
            }
          },
        },
        grid: {
          top: 20,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        series: [
          {
            name: '正值柱状图',
            type: 'bar',
            stack: 'one',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1, 
                  color: 'rgba(0, 0, 0, 0)'
                },{
                  offset: 0.5, 
                  color: '#466e71'
                },{
                  offset: 0, 
                  color: '#eb9b44'
                }])
              }
            },
            barWidth: barWidth,
            markPoint: {
              symbol: 'circle',
              itemStyle: {
                normal: {
                  color: '#eb9b44',
                  shadowColor: '#eb9b44',
                  shadowBlur: 20
                }
              },
              symbolSize: [10, 10], // 容器大小
              symbolOffset: [0, 0], // 位置偏移
              data: dataCoord,
            },
            data: this.yData1
          },
          {
            name: '负值柱状图',
            type: 'bar',
            stack: 'one',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0, 
                  color: 'rgba(0, 0, 0, 0)'
                },{
                  offset: 0.5, 
                  color: '#774a75'
                },{
                  offset: 1, 
                  color: '#b34d69'
                }])
              }
            },
            barWidth: barWidth,
            markPoint: {
              symbol: 'circle',
              itemStyle: {
                normal: {
                  color: '#b34d69',
                  shadowColor: '#b34d69',
                  shadowBlur: 20
                }
              },
              symbolSize: [10, 10], 
              symbolOffset: [0, 0],
              data: dataCoord2,
            },
            data: this.yData2
          }
        ]
      };
      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    
  }
};
</script>

<style lang="scss" scoped>
.sn-container {
  left: 975px;
  top: 690px;
  width: 895px;
  height: 400px;
  .chartsdom {
    width: 100%;
    height: 95%;
  }
}
</style>