vue ---音符跳动

//利用echarts可以方便实现， (使用canvans标签，图表会模糊，id应放在canvans 父级标签；使用div则清晰）
    **HTML** <div id="cvs" class="content_biao"></div>
    **script** import echarts from "echarts"; data(){ 	return { 	  dataDevice: [],  //x
          deviceAudio: [],  //y 	} }, mounted(){ 	this.$nextTick(function() {
    	      setTimeout(()=>{
    	        this.drawPie4('cvs')
    	      },1000)
        }) }, methods: { 	 // 音频跳动
        drawPie4(id){
            var charts = echarts.init(document.getElementById(id));
            charts.setOption({
              tooltip : {
                  trigger: 'axis',
                  axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                      type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              grid: {
                  left: '-3%',
                  top: '3%',
                  right: '0%',
                  bottom: '15%',
                  containLabel: true
              },
              xAxis : [
                  {
                      type : 'category',
                      data : this.dataDevice,
                      axisTick: {show: false},
                      splitLine:{show: false},
                      axisLabel: {
                        inside: false,
                        textStyle: {
                          color: "#ccc",
                          fontSize: "10"
                        },
                      },
                      axisLine: {
                          show: false
                      },
                  }
              ],
              yAxis : [
                  {
                      type : 'value',
                      axisLabel: {
                          textStyle: {
                              color: 'rgba(0,0,0,0.00)'
                          }
                      },
                      splitLine:{show: false},
                      show:false,
                  },
              ],
              series : [
                  {
                      name:'音量',
                      type:'bar',
                      itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#18CFA7'},
                                    {offset: 1, color: '#0CBCF5'}
                                ]
                            )
                        }
                      },
                      barWidth: 20,
                      data:this.deviceAudio
                  }
              ]
                });
                //刷新实现自适应大小
          setTimeout(function (){
                window.addEventListener("resize", () => {
                      charts.resize();
                })
            },200)
        
    			
        }, }