web-base-pc/src/components/repAddPv.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-05-15 16:28:35
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-05-15 14:38:28
-->
<template>
  <div>
    <div id="repPv"
         style="width: 700px; height: 400px">

    </div>
  </div>
</template>

<script>
import * as api from '@/api/activity.js'
export default {
  // mounted() {
  //   this.upDateCover()
  // },
  methods: {
    upDateCover() {
      api.achieveDay().then((res) => {
        let arr1 = res.data.map((item) => {
          return item.settleDate
        })
        let arr2 = res.data.map((item) => {
          return item.repANewPv
        })
        let arr3 = res.data.map((item) => {
          return item.repBNewPv
        })
        this.drawChart(arr1, arr2, arr3)
      })
    },
    drawChart(arr1, arr2, arr3) {
      let myChart = this.$echarts.init(document.getElementById('repPv'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '',
          subtext: '业绩(万)',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          top: 'bottom',
          data: ['左区', '右区'],
          itemWidth: 20, // 长方形宽度
          itemHeight: 10, // 长方形高度
        },
        xAxis: {
          data: arr1,
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            // rotate: 45,
            textStyle: {
              color: '#000',
              fontSize: '10',
              itemSize: '',
            },
          },
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        series: [
          {
            name: '左区',
            type: 'line',
            data: arr2,
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#FF5A5A',
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
          },
          {
            name: '右区',
            type: 'line',
            data: arr3,
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#FFAE36',
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
  },
}
</script>

<style>
</style>