parkBigScreen2/src/components/scrollArc/index.vue

<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_arc"></div>
        </div> 
      </div> 
    </div>   
  </div> -->
  <div class="income-container">
    <div class="chart" id="chart_arc"></div>
  </div>
</template>

<script>
import img from '../../assets/img/brand/green.png'
import img2 from '../../assets/img/brand/org.png'

export default {
  props: {
    chartData: {
      type: Object,
      required: true,
    },
  },
  name: "scrollArc",
  data() {
    return {
      option: null,
      number: 0, // 播放所在下标
      timer: null,
      // 时间
      xData: [],
      dataIn: [],
      dataOut: [],
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler: function () {
        this.getEchart()
      }
    }
  },
  mounted() {
    setTimeout(() => {
      // console.log(this.chartData)

      this.getEchart();
    }, 800);
  },
  methods: {
    getEchart() {
      this.xData=[]
      this.dataIn=[]
      this.dataOut=[]
      for (let i = 0; i < this.chartData.inStatistics.length; i++) {
        this.xData.push(this.chartData.inStatistics[i].timeUnit)
        this.dataIn.push(this.chartData.inStatistics[i].num)
      }
      for (let i = 0; i < this.chartData.outStatistics.length; i++) {
        this.dataOut.push(this.chartData.outStatistics[i].num)
      }
      // eslint-disable-next-line no-undef
      let myChart = echarts.init(document.getElementById('chart_arc'));
      this.option = {
        tooltip: {
          trigger: 'axis',
          showContent: true,
          // extraCssText: 'width:150px;height:auto;background:linear-gradient(left,rgba(87,136,255,1),rgba(87,136,255,.8),rgba(87,136,255,.5));color:#fff',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              // eslint-disable-next-line no-undef
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 1,
                color: '#5d83ff'
              }, {
                offset: 0,
                color: 'rgba(255, 255, 255, 0)'
              }])
            }
          },
        },
        legend: {
          itemWidth: 30,
          itemHeight: 30,
          top: '0%', //调整位置
          right: '5%',//调整位置
          data: [
            {
              name: '入场车流',
              textStyle: {
                fontSize: 12,
                fontWeight: 'bolder',
                color: '#fff'
              },
              icon: `image://${img}`,
            },
            {
              name: '出场车流',
              textStyle: {
                fontSize: 12,
                fontWeight: 'bolder',
                color: '#fff',
              },
              icon: `image://${img2}`,
            }
          ],
          // textStyle:{
          //       fontSize: 14,//字体大小
          //       color: '#ffffff'//字体颜色
          //  },
        },
        color: ['#1BDB7F', '#EF8C62'],
        grid: {
          top: 30,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true //轴上的数值
        },
        xAxis: {
          type: 'category',
          data: this.xData,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: '{value}'
          },
          axisLine: {
            lineStyle: {
              color: '#7790CA',
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#7790CA'
            }
          },
        },
        series: [
          {
            name: '入场车流',
            type: 'line',
            data: this.dataIn,
            symbolSize: 10,
            showSymbol: false,
            // itemStyle: {
            //   opacity: 0,
            // },
            emphasis: {
              label: {
                show: true,
                color: '#fff',
                fontSize: 20
              },
              itemStyle: {
                color: '#5d83ff',
                borderColor: '#fff',
                borderWidth: 2,
                opacity: 1,

              },
            },
            areaStyle: {
              normal: {
                // eslint-disable-next-line no-undef
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#1BDB7F'
                }, {
                  offset: 1,
                  color: 'rgba(0, 0, 0, 0)'
                }]),
              }
            },
            smooth: true,
          },
          {
            name: '出场车流',
            type: 'line',
            data: this.dataOut,
            symbolSize: 10,
            showSymbol: false,
            // itemStyle: {
            //   opacity: 0,
            // },
            emphasis: {
              label: {
                show: true,
                color: '#fff',
                fontSize: 20
              },
              itemStyle: {
                color: '#5d83ff',
                borderColor: '#fff',
                borderWidth: 2,
                opacity: 1
              },
            },
            smooth: true,
          }
        ]
      };
      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });

      // this.timer = setInterval(() => {
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: this.number
      //   });

      //   this.number++;

      //   if (this.number > this.data.length) {
      //     this.number = 0;
      //   }
      // }, 1000);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped>
.income-container {
  .chart {
    height: 3rem;
  }
}

.sn-container {
  left: 50px;
  top: 690px;
  width: 895px;
  height: 400px;

  .chartsdom {
    width: 100%;
    height: 95%;
  }
}
</style>