123 lines
2.6 KiB
Vue
123 lines
2.6 KiB
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>
|