Skip to content

S
SuperMan
Commit fd326151 authored by youjie's avatar youjie
Browse files
Options

规则，柱状图

parent 54b0beaa
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 530 additions and 8 deletions
src/components/FinancialModule/DataAnalysis/allEchart.vue
View file @ fd326151
......@@ -39,7 +39,7 @@
</el-col>
<el-col :span="4">
<el-form-item label="线路">
<el-select filterable v-model="msg.LineId" @change="getStatement"
<el-select filterable multiple v-model="msg.LineIdList" @change="getStatement"
clearable>
<el-option
:value="0"
......@@ -116,6 +116,8 @@
<WoolRateChange :msgData="msg" :StatisticalData="StatisticalData"></WoolRateChange>
<ActualRateChange :msgData="msg" :StatisticalData="StatisticalData"></ActualRateChange>
<ChangeProportion :msgData="msg" :StatisticalData="StatisticalData"></ChangeProportion>
<WoolRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></WoolRateColumnar>
<ActualRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></ActualRateColumnar>
</div>
</div>
</template>
......@@ -126,8 +128,11 @@ import IncomeShare from "./components/Echart/IncomeShare.vue";
import WoolRateChange from "./components/Echart/WoolRateChange.vue";
import ActualRateChange from "./components/Echart/ActualRateChange.vue";
import ChangeProportion from "./components/Echart/ChangeProportion.vue";
import WoolRateColumnar from "./components/Echart/WoolRateColumnar.vue";
import ActualRateColumnar from "./components/Echart/ActualRateColumnar.vue";
export default {
components: {IncomeChange,IncomeShare,WoolRateChange,ActualRateChange,ChangeProportion},
components: {IncomeChange,IncomeShare,WoolRateChange,ActualRateChange,ChangeProportion,
WoolRateColumnar,ActualRateColumnar},
data() {
return {
coinGetShow: false,
......@@ -142,7 +147,9 @@ export default {
Type: '0',
DataType:'-1',
LossType:'0',
IsLastData :1
IsLastData:1,
LineIdList: [],
LineIdStr: ''
},
dateTime: [],
CompanyList: [],
......@@ -220,6 +227,12 @@ export default {
})
},
getStatement(){
if(this.msg.LineIdList[this.msg.LineIdList.length-1]==0){
this.msg.LineIdList = [0]
}else{
this.msg.LineIdList = this.msg.LineIdList.filter(x=>{return x})
}
this.msg.LineIdStr = this.msg.LineIdList.join(',')
this.loading = true
this.apipost(
"financestatistics_post_GetDataAnalysisStat",
......@@ -298,10 +311,13 @@ export default {
}
.echartsBox{
flex: 1;
min-width: 458px;
min-width: 430px;
margin: 5px;
background: #fff;
}
.echartsBox:nth-child(2){
min-width: 458px;
}
.allMyEchartBox{
height: 270px;
}
......
src/components/FinancialModule/DataAnalysis/components/Echart/ActualRateChange.vue
View file @ fd326151
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度实际利率变化趋势图 %</h3>
<h3>月度实际利率变化趋势图 %(线图)</h3>
<div style="margin-left: 20px;">
......
src/components/FinancialModule/DataAnalysis/components/Echart/ActualRateColumnar.vue 0 → 100644
View file @ fd326151
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度实际利率变化趋势图 %(柱状图)</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="ActualMyEchartC" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msg','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计
colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
'rgba(228,57,57,.9)','rgba(248,126,46,1)','rgba(252,196,34,.7)','#3DD948','#39CAE4','rgba(44,49,241,.6)','rgba(122,57,228,.5)','#E65FC1','#D0B478','#BABABA',
'rgba(228,57,57,.7)','rgba(247,154,44,.7)','rgba(255,246,11,.7)','rgba(61,217,72,.7)','rgba(57,202,228,.7)','rgba(44,49,241,.7)','rgba(122,57,228,.7)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.LineAnalysisData = n.LineAnalysisData//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'bar',
itemStyle:{
barBorderRadius: 5,
},
barWidth: 5,
data: x.DetailList.map(y=>{return y.ProfitRate.toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('ActualMyEchartC','light');
let myChart = this.$echarts.init(chartDom);
let option
option = {
color:this.colorList,
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
data: titles,
selected: Stocklegend
},
grid: {
left: 15, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 45, // 默认10%
bottom: 70, // 默认60
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
nameTextStyle: {
fontWeight: 600,
fontSize: 18
},
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
data: this.MonthList
},
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
src/components/FinancialModule/DataAnalysis/components/Echart/WoolRateChange.vue
View file @ fd326151
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度毛利率变化趋势图 %</h3>
<h3>月度毛利率变化趋势图 %(线图)</h3>
<div style="margin-left: 20px;">
......
src/components/FinancialModule/DataAnalysis/components/Echart/WoolRateColumnar.vue 0 → 100644
View file @ fd326151
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度毛利率变化趋势图 %(柱状图)</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="WoolMyEchartC" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msg','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计
colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
'rgba(228,57,57,.9)','rgba(248,126,46,1)','rgba(252,196,34,.7)','#3DD948','#39CAE4','rgba(44,49,241,.6)','rgba(122,57,228,.5)','#E65FC1','#D0B478','#BABABA',
'rgba(228,57,57,.7)','rgba(247,154,44,.7)','rgba(255,246,11,.7)','rgba(61,217,72,.7)','rgba(57,202,228,.7)','rgba(44,49,241,.7)','rgba(122,57,228,.7)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.LineAnalysisData = n.LineAnalysisData//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'bar',
itemStyle:{
barBorderRadius: 5,
},
barWidth: 5,
data: x.DetailList.map(y=>{return y.MaoLiRate.toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('WoolMyEchartC','light');
let myChart = this.$echarts.init(chartDom);
let option
option = {
color:this.colorList,
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
data: titles,
selected: Stocklegend
},
grid: {
left: 15, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 45, // 默认10%
bottom: 70, // 默认60
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
nameTextStyle: {
fontWeight: 600,
fontSize: 18
},
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
data: this.MonthList
},
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
src/components/FinancialModule/DataAnalysis/components/lineEchart.vue
View file @ fd326151
......@@ -299,7 +299,7 @@ export default {
itemStyle:{
barBorderRadius: 5,
},
barWidth : 10,
barWidth: 10,
// stack: 'Total',
data: [],
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment