web-zk-h5/components/distribution/fistAddPv.vue

<template>
   <div class="width-auto">
	  <view class="title">
	  	{{'新增业绩'}}
	  </view>
    <div class="flex-s">
      <div
        id="firstPv"
        style="width: 700rpx;height: 600rpx;"
        :style="myChartStyle"
      ></div>
    </div>
  </div>

</template>

<script>
import * as echarts from "echarts";

import * as api from '@/config/activity.js'
export default {
  data(){
    return{
      myChartStyle: {
        float: "center",
        width: "690rpx",
        height: "750rpx",
        paddingTop: "0",
        // margin: "20px",
      }, //
    }
  },
  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.aNewPv
        })
        let arr3 = res.data.map((item) => {
          return item.bNewPv
        })
        setTimeout(() => {
          this.drawChart(arr1, arr2, arr3)
        }, 50);

      })
    },
    drawChart(arr1, arr2, arr3) {
      var myChart = echarts.init(document.getElementById("firstPv"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '',
          subtext: '业绩(万)',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          top: 'bottom',
          data: ['左区', '右区'],
          itemWidth: 20, // 长方形宽度
          itemHeight: 10, // 长方形高度
        },
        xAxis: {
          data: arr1,
          axisLabel: {
            interval: 0,
            rotate: 45,
            textStyle: {
              color: '#000',
              fontSize: '8',
              itemSize: '',
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        series: [
          {
            name: '左区',
            type: 'line',
            data: arr2,
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#5A64FF',
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
          },
          {
            name: '右区',
            type: 'line',
            data: arr3,
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#01C4FF',
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
  },
}
</script>

<style scoped lang="scss">
.width-auto{
  width: 100%;
	position: relative;
	height: 950rpx;
	background-color: #fff;
	  width: 690rpx;

		border-radius: 20rpx;
		margin: 20rpx auto;
}
.title{
	padding: 20rpx 30rpx ;
	height: 80rpx;
	line-height: 80rpx;
	border-bottom: 10rpx solid #f3f3f3;
	margin-top: 10rpx;
}
::v-deep .el-select .el-input .el-select__caret {
  color: #333;
}
.lines {
  width: 2px;
  height: 470px;
  opacity: 1;
  background: #979797;
  position: absolute;
  bottom: 50px;
  left: 50%;
  margin-left: -110px;
}
.right-lines {
  position: absolute;
  right: 80px;
  top: 140px;
  color: #999;
  font-size: 12px;
}
.item-s {
  padding-bottom: 10px;
  display: flex;
  line-height: 24px;
}
.bg-color {
  width: 40px;
  height: 22px;
  border-radius: 2px;
  margin-left: 5px;
}
.flex-s {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // width: 700px;
}
.styles {
  position: absolute;
  right: -30px;
  z-index: 111;
  top: 60px;
  /*background: rgba(0,0,0,0.05);*/
  /*border-radius: 4px 4px 4px 4px;*/
}
::v-deep .el-select .el-input__inner {
  border: none;
  background: rgba(0, 0, 0, 0.05);
}
</style>