<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>YTDç»é”€å•†å®ŒæˆçŽ‡åŠå¢žé•¿çŽ‡BY产å“分类</title>
</head>
<body>
<script type="text/javascript">
var pageVue = null;
function loadJsCss(callback) {
var jscss_urls = [
{id: "js6", type: "js", url: "root/js/echarts.js"},
{id: "js7", type: "js", url: "root/js/calendar.js"},
{id: "js8", type: "js", url: "root/js/China.js"},
];
window.top.initJsCss(document, jscss_urls, callback);
}
function initVue() {
new BasicsVue({
el: "#hbody",
data: {
dataRequest: [],
dataRequestObj: {},
dataCharts: {
chart6: [
[122, 50, 4344, "PFO"],
[70, 5, 1556, "先心"],
[137, 40, 1001, "输é€ç³»ç»Ÿ"],
[122, 19, 400, "é…件"],
],
},
tableFields_nonActive: [
{isshow: "T",field: "customer_name",name: "产å“分类",width: "250",align: "left", isminwidth: true},
{isshow: "T",field: "YTD_Target",name: "销售é¢",width: "150"},
{isshow: "T",field: "YTD_Actual",name: "YTDè¾¾æˆçŽ‡",width: "150"},
{isshow: "T",field: "PTQ",name: "YTD增长率",width: "150"},
],
tableData_nonActive: [
{
customer_name: 'PFO',
YTD_Target: '4344',
YTD_Actual: '122%',
PTQ: '50%',
},
{
customer_name: '先心',
YTD_Target: '1556',
YTD_Actual: '70%',
PTQ: '5%',
},
{
customer_name: '输é€ç³»ç»Ÿ',
YTD_Target: '1001',
YTD_Actual: '137%',
PTQ: '40%',
},
{
customer_name: 'é…件',
YTD_Target: '400',
YTD_Actual: '122%',
PTQ: '19%',
},
],
//Year
options_year: [
{
value: '2021',
label: '2021'
},
{
value: '2022',
label: '2022'
},
{
value: '2023',
label: '2023'
},
],
value_year: '',
//Season
options_season: [
{
value: 'Q1',
label: 'Q1'
},
{
value: 'Q2',
label: 'Q2'
},
{
value: 'Q3',
label: 'Q3'
},
{
value: 'Q4',
label: 'Q4'
},
],
value_season: '',
//Month
options_month: [
{
value: '1',
label: 'Jan'
},
{
value: '2',
label: 'Feb'
},
{
value: '3',
label: 'Mar'
},
{
value: '4',
label: 'Apr'
},
{
value: '5',
label: 'May'
},
{
value: '6',
label: 'June'
},
{
value: '7',
label: 'July'
},
{
value: '8',
label: 'Aug'
},
{
value: '9',
label: 'Sept'
},
{
value: '10',
label: 'Oct'
},
{
value: '11',
label: 'Nov'
},
{
value: '12',
label: 'Dec'
},
],
value_month: '',
//Province
options_province: [
],
value_province: '',
},
created() {
var me = this;
},
mounted() {
var me = this;
//é¢„åŠ è½½æ•°æ®
if (this.dataRequest && this.dataRequest.length) {
var result = {};
this.loadRequestData(this.dataRequest, result, function(data) {
me.dataRequestObj = data;
});
}
me.$nextTick(() => {
hideLoading();
let clientHeight = document.documentElement.clientHeight;
me.initData();
})
},
methods: {
initData() {
var me = this;
me.chart6();
},
filter() {
var me = this;
console.log("filter year", me.value_year);
console.log("filter season", me.value_season);
console.log("filter month", me.value_month);
console.log("filter province", me.value_province);
},
//YTDç»é”€å•†å®ŒæˆçŽ‡åŠå¢žé•¿çŽ‡
chart6() {
var d6 = document.getElementById("ct6");
var c6 = echarts.init(d6);
const data = this.dataCharts.chart6;
var o6 = {
// backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
// {
// offset: 0,
// color: "#f7f8fa",
// },
// {
// offset: 1,
// color: "#cdd0d5",
// },
// ]),
title: {
text: "YTDç»é”€å•†å®ŒæˆçŽ‡åŠå¢žé•¿çŽ‡",
show: false,
},
legend: {
right: "10%",
top: "3%",
show: false,
},
// grid: {
// left: "15%",
// // top: "15%",
// bottom: '15%',
// },
xAxis: {
splitLine: {
lineStyle: {
type: "dashed",
},
},
axisLabel: {
formatter: "{value}%",
show: true,
},
},
yAxis: {
splitLine: {
lineStyle: {
type: "dashed",
},
},
axisLabel: {
formatter: "{value}%",
show: true,
},
scale: true,
},
series: [
{
name: "waiting",
data: data,
type: "scatter",
label: {
show: true,
formatter: function (param) {
return param.data[3] + "\n" + param.data[2];
},
color: "black",
},
symbolSize: function (data) {
return Math.sqrt(data[2]);
},
emphasis: {
focus: "series",
label: {
show: true,
formatter: function (param) {
return param.data[3] + " : " + param.data[2];
},
// position: "top",
},
},
itemStyle: {
shadowBlur: 10,
shadowColor: "rgba(25, 100, 150, 0.5)",
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0,
color: "rgb(129, 227, 238)",
},
]),
},
},
],
};
c6.setOption(o6);
},
},
});
};
loadJsCss(function() {
initVue();
});
</script>
<style>
[v-cloak] {
display: none !important;
}
.v_main {
background:linear-gradient(rgba(246, 247, 248, 0.878), rgba(170, 207, 243, 0.785));
background-size: contain;
background-position: bottom left;
}
.chart {
width: 100%;
height: 56%;
/* display: flex; */
/* top: 20px; */
/* bottom: -10px; */
/* justify-content: flex-start; */
}
.selectors {
display: flex;
align-items: center;
justify-content: space-around;
}
.selectors el-select {
flex: 1;
}
.charts {
width: 99%;
height: 85%;
display: flex;
/* åªè¦æ‚¨æŠŠè¿™ä¸ªå±žæ€§åŽ»æŽ‰,å°±ä¸ä¼šè‡ªåŠ¨æ¢è¡Œäº† */
flex-wrap: wrap;
justify-content: space-around;
/* padding-bottom: 10%; */
}
.chart {
width: 85%;
/* margin-top: 1%; */
}
</style>
<div v-cloak id="hbody" class="h_body" style="margin: 0;padding: 0;">
<div id="page_root" ref="ref_main" class="v_main" style="padding: 0px 0px 0px 10px">
<div style="width: 100%; height: 100%; overflow-y: hidden;">
<div>
<h3 style="font-weight: 600;color: #045c24;text-align: center;">YTDç»é”€å•†å®ŒæˆçŽ‡åŠå¢žé•¿çŽ‡BY产å“分类</h3>
</div>
<div class="selectors">
<el-select
placeholder="Year"
v-model="value_year"
clearable
@change="filter"
>
<el-option
v-for="item in options_year"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
placeholder="Quarter"
v-model="value_season"
clearable
@change="filter"
>
<el-option
v-for="item in options_season"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
placeholder="Month"
v-model="value_month"
clearable
@change="filter"
>
<el-option
v-for="item in options_month"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
placeholder="Province"
v-model="value_province"
clearable
@change="filter"
>
<el-option
v-for="item in options_province"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="charts">
<div class="chart">
<div id = "ct6" style = "width: 100%; height: 100%;" ></div>
</div>
<div class="chart">
<h-table
v-if="tableFields_nonActive"
ref="table_nonActive"
:table-fields="tableFields_nonActive"
:table-data="tableData_nonActive"
:is-pagination="false"
>
</h-table>
</div>
</div>
</div>
</div>
<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
<div class="spinner">
<div class="cube1"></div>
<div class="cube2"></div>
</div>
</div>
</div>
</body>
</html>