echarts 3D柱状+折线图 + 自滚动

<template>
  <div class="commercial-container">
    <div class="commercial-top-box">
      <itemTitle title="测试标题1133" />
    </div>
      <div class="commercial-center-box">
        <div class="Echarts">
          <div id="commercial-main" style="width: 27rem;height: 17rem;"></div>
        </div>
      </div>
  </div>
</template>

<script>
import itemTitle from '@/components/Title/itemTitle.vue'
export default {
  components: {
    itemTitle
  },
  data() {
    return {
    }
  },
  mounted() {
    this.myEcharts();
  },
  methods: {
    myEcharts() {
      var myChart = this.$echarts.init(document.getElementById('commercial-main'));
      //配置图表
      const industryData = [22, 35, 30, 22];
      const lineData = [22, 35, 30, 22];
      // 配置立体图
      const colors = ['#31D5C7', '#2EC6BD', '#1D2773'];
      const barColor = {
        type: 'linear',
        x: 0,
        x2: 0,
        y: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: colors[0]
          },
          {
            offset: 0.5,
            color: colors[1]
          },
          {
            offset: 1,
            color: colors[2]
          }
        ]
      };
      // 配置流线
      const liuxian = lineData.map((item,index)=>{
        return [index,lineData[index]]
      })
      var option = {
        legend: {
          data: [{
            name:"商业库存（万支）",
          },{
            name:"可销天数",
            textStyle:{
            }
          }],
          itemHeight:5,
          itemWidth:15,
          x: 'right',
          textStyle: {
            fontSize: 12,
            color: '#ffffff'
          },
        },
        animation: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        grid: {
          left: '0%',
          right: '4%',
          bottom: '0%',
          top: '40px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['山东', '湖北', '四川', '安徽'],
          axisLabel: {
            color: '#E6F7FF'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 2555, 0.1)'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#E6F7FF'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.2)'
              }
            }
          },
          {
            type: 'value',
            min: 0,
            max: 50,
            interval: 10,
            axisLabel: {
              color: '#fff'
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255,0.2)'
              }
            }
          }
        ],
        series: [
          // 线图
          {
            name: '可销天数',
            type: 'line',
            yAxisIndex: 1,
            data: lineData,
            emphasis:{
              scale:2.5
            },
            z:10,
            itemStyle: {
              normal: {
                color: '#6AF9F2', //圈圈的颜色
                lineStyle: {
                  color: '#32CDC3' //线的颜色
                }
              }
            }
          },
          //折线图流光配置
          {
            name: '可销天数',
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            polyline: true,
            yAxisIndex:1,
            z:12,
            effect: {
              show: true,//是否展示
              period:4,//时间
              trailLength:0.3,//尾部长度
              symbolSize: 8,//点大小
              symbol: 'circle',//点的类型
              color: '#2EC6BD',//颜色
            },
            data: [{
              coords: liuxian
            }]
          },
          // 柱子
          {
            itemStyle: {
              normal: {
                // 这里是用一个柱子，从左到右的渐变。也可以用两个柱子做从上往下的渐变，和上面的透明渐变一样用法
                color:barColor
              },
              decal:{
                rotation:2,
              }
            },
            label: {
              show: true,
              position: 'top',
              color:'#fff',
            },
            data: industryData,
            symbol: 'diamond',
            symbolPosition: 'end',
            type: 'bar',
            barWidth: 18,
            symbolSize: [8, 19],
            z: 2,
            name: '商业库存（万支）',
          },
          {
            z: 3,
            name: '商业库存（万支）',
            type: 'pictorialBar',
            // 柱子顶部
            symbolPosition: 'end',
            data: industryData,
            symbol: 'diamond',
            symbolOffset: [0, -11],
            symbolRotate: 90,
            symbolSize: [8, 19],
            itemStyle: {
              normal: {
                borderWidth: 2,
                color: colors[1]
              }
            },
            tooltip: {
              show: false
            }
          },
        ]
      };
      myChart.setOption(option);
      var index = 0; //播放所在下标
      setInterval(function () {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index
        });
        index++;
        if (index > industryData.length) {
          index = 0;
        }
        myChart.setOption(option)
      }, 1500);
    }
  }
}
</script>

<style lang="scss" scope>
.commercial-container {
  padding: 0;
  margin: 0;
  width: 100%;

  .commercial-top-box {
    width: 100%;
  }

  .commercial-center-box {
    padding: 1rem 0;
    border: 2px solid #015169;
    width: 100%;
    height: 17rem;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 10px #13A8BC;
  }
}
</style>