154 lines
6.1 KiB
Vue
154 lines
6.1 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="form">
|
||
|
|
<!-- inline="true"表单域在一行 -->
|
||
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
|
|
<el-form-item label="公司名称">
|
||
|
|
<el-input v-model="formInline.company_str" placeholder="公司名称：" size="mini"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" @click="onSubmit" icon="el-icon-search" size="mini">查询</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<div id='echarts' ref="echarts_1" style="height:300px;width:600px;margin-left: 200px;"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import * as echarts from "echarts"
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// 新数据
|
||
|
|
x:['2000/6/5','2000/6/6','2000/6/7','2000/6/8','2000/6/9','2000/6/10','2000/6/11','2000/6/12','2000/6/13','2000/6/14','2000/6/15','2000/6/16','2000/6/17','2000/6/18','2000/6/19','2000/6/20','2000/6/21','2000/6/22','2000/6/23','2000/6/24','2000/6/25','2000/6/26','2000/6/27','2000/6/28','2000/6/29','2000/6/30','2000/7/1','2000/7/2','2000/7/3','2000/7/4','2000/7/5','2000/7/6','2000/7/7','2000/7/8','2000/7/9','2000/7/10','2000/7/11','2000/7/12','2000/7/13','2000/7/14','2000/7/15','2000/7/16','2000/7/17','2000/7/18','2000/7/19','2000/7/20','2000/7/21','2000/7/22','2000/7/23','2000/7/24'],
|
||
|
|
y1:[200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
|
||
|
|
y2:[319,162,213,69,167,337,171,283,285,203,322,81,185,259,212,305,206,236,70,224,309,254,86,107,334,153,243,141,251,306,306,317,271,290,254,220,154,156,54,70,133,223,265,51,339,270,184,332,163,197],
|
||
|
|
y3:[329,113,251,118,324,328,140,284,231,189,192,275,73,311,313,299,199,300,249,160,263,272,159,245,222,104,203,283,332,147,278,339,207,159,66,106,338,63,258,191,246,141,243,90,290,330,93,76,134,86],
|
||
|
|
y4:[284,265,335,75,234,121,66,258,104,291,197,248,56,340,120,327,328,81,179,282,211,90,147,320,150,200,236,210,205,192,318,184,98,228,55,66,231,151,63,149,329,127,111,57,64,55,119,137,247,270],
|
||
|
|
|
||
|
|
formInline: {
|
||
|
|
company_str: '',
|
||
|
|
},
|
||
|
|
legend_1:['银行'],
|
||
|
|
series_1:[{
|
||
|
|
name: '银行',
|
||
|
|
type: 'line',
|
||
|
|
data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
|
||
|
|
}],
|
||
|
|
|
||
|
|
|
||
|
|
option_1 : {
|
||
|
|
title: [{
|
||
|
|
x :'center',
|
||
|
|
y:'bottom',
|
||
|
|
|
||
|
|
text: '各行业风险价值（机构处于极端困难情况时）的时序变化'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
legend: {data:
|
||
|
|
this.series_1
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
toolbox: {
|
||
|
|
feature: {
|
||
|
|
saveAsImage: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: this.x,//其中的一个数据
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value'
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '银行',
|
||
|
|
type: 'line',
|
||
|
|
// stack: 'Total',
|
||
|
|
data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
|
||
|
|
}],
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
linedata_1:[
|
||
|
|
{
|
||
|
|
name: '银行',
|
||
|
|
type: 'line',
|
||
|
|
data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '北京银行',
|
||
|
|
type: 'line',
|
||
|
|
data: [319,162,213,69,167,337,171,283,285,203,322,81,185,259,212,305,206,236,70,224,309,254,86,107,334,153,243,141,251,306,306,317,271,290,254,220,154,156,54,70,133,223,265,51,339,270,184,332,163,197],
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '中国银行',
|
||
|
|
type: 'line',
|
||
|
|
data: [329,113,251,118,324,328,140,284,231,189,192,275,73,311,313,299,199,300,249,160,263,272,159,245,222,104,203,283,332,147,278,339,207,159,66,106,338,63,258,191,246,141,243,90,290,330,93,76,134,86],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Direct',
|
||
|
|
type: 'line',
|
||
|
|
data: [284,265,335,75,234,121,66,258,104,291,197,248,56,340,120,327,328,81,179,282,211,90,147,320,150,200,236,210,205,192,318,184,98,228,55,66,231,151,63,149,329,127,111,57,64,55,119,137,247,270],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Search Engine',
|
||
|
|
type: 'line',
|
||
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
// 风险价值动态变化
|
||
|
|
this.onSubmit()
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
onSubmit() {
|
||
|
|
if (this.formInline.company_str!==''){
|
||
|
|
console.log(this.formInline.company_str)
|
||
|
|
let tmp=this.linedata_1.find(item => item.name === this.formInline.company_str) //es6
|
||
|
|
this.option_1.series.push(tmp)
|
||
|
|
console.log(this.option_1.series)
|
||
|
|
|
||
|
|
}
|
||
|
|
let echarts1 = echarts.init(this.$refs.echarts_1)
|
||
|
|
echarts1.setOption(this.option_1)
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
|
||
|
|
|
||
|
|
// 第一层
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|