Skip to content

F
FTT_Board
Commit 9399d136 authored by 王文琼's avatar 王文琼
Browse files
Options

新增看板模板

parent 8702fdc1
Expand all Show whitespace changes
Inline Side-by-side
Showing with 4758 additions and 0 deletions
FTT.Board.VueUI/src/views/board/chartDemo/add.vue 0 → 100644
View file @ 9399d136
<template>
<div class="comAdd">
<div class="addbg" v-show="chartList[num].url.length>0">
<el-image :src="chartList[num].url" fit="contain" />
</div>
<div class="mask"></div>
<i class="el-icon-plus" @click="selectChart(num)"></i>
</div>
</template>
<script>
export default {
data() {
return {};
},
props: {
chartList: Array,
num: Number,
},
mounted() {},
methods: {
selectChart(n) {
console.log("选择图表。。。" + n);
// this.dialogFormVisible = true;
// this.selectLocation = n;
this.$emit('Select',n)
},
}
};
</script>
<style scoped>
.comAdd{
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mask {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.addbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden !important;
display: flex;
justify-content: center;
align-items: center;
flex: 0;
}
i {
font-size: 38px;
z-index: 5;
}
</style>
FTT.Board.VueUI/src/views/board/chartDemo/border.vue 0 → 100644
View file @ 9399d136
<template>
<div>
<span class="top-left border-span"></span>
<span class="top-right border-span"></span>
<span class="bottom-left border-span"></span>
<span class="bottom-right border-span"></span>
</div>
</template>
<script>
</script>
<style scoped >
/* .border-container {
position: relative;
margin-top: 15px;
padding: 10px;
border: 1px solid #54dcf2;
} */
.border-container span.border-span {
display: block;
position: absolute;
width: 35px;
height: 35px;
}
.border-container span.top-left {
top: -4px;
left: -4px;
border-top: 3px solid #54dcf2;
border-left: 3px solid #54dcf2;
}
.border-container span.top-right {
top: -4px;
right: -4px;
border-top: 3px solid #54dcf2;
border-right: 3px solid #54dcf2;
}
.border-container span.bottom-left {
bottom: -4px;
left: -4px;
border-bottom: 3px solid #54dcf2;
border-left: 3px solid #54dcf2;
}
.border-container span.bottom-right {
bottom: -4px;
right: -4px;
border-bottom: 3px solid #54dcf2;
border-right: 3px solid #54dcf2;
}
</style>
FTT.Board.VueUI/src/views/board/chartDemo/header.vue 0 → 100644
View file @ 9399d136
<template>
<!--头部-->
<div class="header">
飞天兔数字工厂大数据展示
<a href="javascript:;" class="a-access">
<button class="button type1" @click="created">生成</button>
</a>
</div>
</template>
<script>
export default {
name: "chartHeader",
data() {
return {
// key: value
};
},
// props:{
// chartList:Array,
// selectChartList:Array
// },
methods: {
created() {
this.$emit("created");
console.log("我要去生成了");
}
}
};
</script>
<style scoped="scoped">
.header {
height: 90px;
position: relative;
padding-top: 13px;
font-size: 36px;
color: #00ffff;
text-align: center;
background: url(../../../assets/image/chartHeaderBg.png) top center no-repeat;
box-sizing: border-box;
}
.header a.a-access {
position: absolute;
right: 3%;
top: -18%;
}
.button {
position: relative;
padding: 0.5em 1.5em;
border: none;
background-color: transparent;
cursor: pointer;
outline: none;
font-size: 18px;
margin: 1em 0.8em;
}
.button.type1 {
color: #00ffff;
}
.button.type1.type1::after,
.button.type1.type1::before {
content: "";
display: block;
position: absolute;
width: 20%;
height: 20%;
border: 2px solid;
transition: all 0.6s ease;
border-radius: 2px;
}
.button.type1.type1::after {
bottom: 0;
right: 0;
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: #566473;
border-right-color: #566473;
}
.button.type1.type1::before {
top: 0;
left: 0;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-color: #566473;
border-left-color: #566473;
}
.button.type1.type1:hover:after,
.button.type1.type1:hover:before {
width: 100%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/board/chartDemo/index.vue 0 → 100644
View file @ 9399d136
<template>
<div class="chartDemo">
<el-container>
<el-header style="height: 90px;">
<chartHeader :chartList="chartListLeft" @created="created" />
</el-header>
<el-main>
<el-row :gutter="20">
<el-col :span="7">
<div class="grid-content">
<chartLeft :chartList="chartListLeft" :selectChartList="selectChartList" />
</div>
</el-col>
<el-col :span="10">
<div class="grid-content">
<chartMain :chartList="chartListMain" :selectChartList="selectChartList" />
</div>
</el-col>
<el-col :span="7">
<div class="grid-content">
<chartRight :chartList="chartListRight" :selectChartList="selectChartList" />
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
</template>
<script>
import chartHeader from "./header.vue";
import chartLeft from "./left.vue";
import chartRight from "./right.vue";
import chartMain from "./main.vue";
export default {
name: "chartDemo",
data() {
return {
selectChartList: [
{
id: "Radar",
name: "雷达图",
url: require("@/assets/image/chart01.png")
},
{
id: "sexrate",
name: "圆环图",
url: require("@/assets/image/chart03.png")
},
{
id: "householdrate",
name: "圆环图2",
url: require("@/assets/image/chart09.png")
},
{
id: "courserate",
name: "饼图",
url: require("@/assets/image/chart04.png")
},
{
id: "professionrate",
name: "饼图2",
url: require("@/assets/image/chart05.png")
},
{
id: "graduateyear",
name: "折线图",
url: require("@/assets/image/chart02.png")
},
{
id: "changedetail",
name: "混合图",
url: require("@/assets/image/chart06.png")
},
{
id: "juniorservice",
name: "柱状图",
url: require("@/assets/image/chart07.png")
}
// {
// id:'pie8',
// name:'柱状图2',
// url:require("@/assets/image/chart08.png")
// }
],
chartListLeft: [
{
id: "Left1",
chartTypeId: "",
tittle: "",
url: ''
},
{
id: "Left2",
chartTypeId: "",
tittle: "",
url: ""
},
{
id: "Left3",
chartTypeId: "",
tittle: "",
url: ""
},
{
id: "Left4",
chartTypeId: "",
tittle: "",
url: ""
}
],
chartListMain: [
{
id: "Main1",
chartTypeId: "",
tittle: "",
url:''
},
{
id: "Main2",
chartTypeId: "",
tittle: "",
url: ""
},
{
id: "Main3",
chartTypeId: "",
tittle: "",
url: ""
},
{
id: "Main4",
chartTypeId: "",
tittle: "",
url: ""
}
],
chartListRight: [
{
id: "Right1",
chartTypeId: "",
tittle: "",
url: ''
},
{
id: "Right2",
chartTypeId: "",
tittle: "",
url: ""
},
{
id: "Right3",
chartTypeId: "",
tittle: "",
url: ""
},
]
};
},
components: {
chartHeader,
chartLeft,
chartRight,
chartMain
},
methods: {
created() {
console.log("1111"+JSON.stringify(this.chartListLeft))
console.log("222222222"+JSON.stringify(this.chartListMain))
console.log("3333"+JSON.stringify(this.chartListRight))
localStorage.setItem("chartListLeft",JSON.stringify(this.chartListLeft));
localStorage.setItem("chartListMain",JSON.stringify(this.chartListMain));
localStorage.setItem("chartListRight",JSON.stringify(this.chartListRight));
this.$router.push({
name: 'chartdemo1',
// query: {
// chartListLeft: this.chartListLeft,
// chartListMain: this.chartListMain,
// chartListRight: this.chartListRight,
// }
})
}
}
};
</script>
<style>
.el-header {
background-color: #040f3c;
}
div {
overflow: initial !important;
}
* {
box-sizing: border-box;
}
li {
list-style: none;
}
.chartDemo {
background: #040f3c;
}
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
FTT.Board.VueUI/src/views/board/chartDemo/left.vue 0 → 100644
View file @ 9399d136
<template>
<div class="main-left">
<div class="border-container">
<div class="add">
<Add :chartList="chartList" :num="0" @Select="Select" />
</div>
<Border />
</div>
<div class="border-container">
<div class="add" style="height:250px">
<Add :chartList="chartList" :num="1" @Select="Select" />
</div>
<ul class="three-pie clearfix">
<li style="padding:10px">
<div class="add" style="height:240px">
<Add :chartList="chartList" :num="2" @Select="Select" />
</div>
</li>
<li style="padding:10px">
<div class="add" style="height:240px">
<Add :chartList="chartList" :num="3" @Select="Select" />
</div>
</li>
</ul>
<Border />
</div>
<el-dialog title="图表列表" :visible.sync="dialogFormVisible" width="620px">
<div style="display: inline-flex; ">
<div class="left" style="width: 350px;display: inline-block;vertical-align: top;">
<el-form :model="form">
<el-form-item label="标题名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off" style="width: 200px;"></el-input>
</el-form-item>
<el-form-item label="图表类型" :label-width="formLabelWidth">
<el-select
style="width: 200px;"
v-model="form.region"
placeholder="请选择图表类型"
@change="changeSelect"
>
<el-option
v-for="item in selectChartList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div style="display: inline-block;flex: 2; overflow:hidden">
<el-image
v-if="this.url.length >0"
fit="contain"
:src="url"
style="width: 200px;height: 200px;"
/>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="sureSelect">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Border from "./border";
import Add from "./add";
export default {
data() {
return {
dialogFormVisible: false,
form: {
name: "",
region: ""
},
selectValue: "",
formLabelWidth: "120px",
url: "",
selectLocation: -1
};
},
components: {
Add,
Border
},
props:{
chartList:Array,
selectChartList:Array
},
mounted() {},
methods: {
Select(n) {
console.log("我点击了：", n);
this.selectLocation = n;
this.dialogFormVisible = true;
},
sureSelect() {
console.log("我点击了确定！~", this.selectLocation);
if (this.selectLocation < 0) return;
this.chartList[this.selectLocation].tittle = this.form.name;
this.chartList[this.selectLocation].chartTypeId = this.form.region;
this.chartList[this.selectLocation].url = this.url;
console.log(this.chartList);
this.dialogFormVisible = false;
},
changeSelect(e) {
console.log("ssssssssssss" + e);
this.selectChartList.find((item, index) => {
//if(item.id==e) return index;
if (item.id == e) {
console.log(index);
this.url = this.selectChartList[index].url;
}
});
}
}
};
</script>
<style scoped lang="scss">
.main-left {
float: left;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.border-container {
position: relative;
margin-top: 15px;
padding: 10px;
border: 1px solid #54dcf2;
}
.name-title {
font-size: 20px;
color: #00ffff;
}
.add {
height: 275px;
color: #93a9ff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.three-pie {
border-top: 1px solid #2c768a;
margin: -10px;
margin-top: 10px;
height: 266px;
}
.three-pie li {
float: left;
width: 50%;
border-right: 1px solid #2c768a;
box-sizing: border-box;
}
.three-pie li:last-child {
border-right: none;
}
</style>
FTT.Board.VueUI/src/views/board/chartDemo/main.vue 0 → 100644
View file @ 9399d136
<template>
<div class="main-middle">
<div class="border-container">
<div class="add">
<Add :chartList="chartList" :num = "0" @Select="Select"/>
</div>
<Border/>
</div>
<div class="border-container" style="display:flex;flex-direction: column;">
<ul class="teacher-pie clearfix">
<li style="padding:10px">
<div class="add" style="height:250px">
<Add :chartList="chartList" :num = "1" @Select="Select"/>
</div>
</li>
<li style="padding:10px">
<!-- <div class="name-title">
=======
</div>-->
<div class="add" style="height:250px">
<Add :chartList="chartList" :num = "2" @Select="Select"/>
</div>
</li>
</ul>
<div class="add" style="height:250px;margin-top:10px">
<Add :chartList="chartList" :num = "3" @Select="Select"/>
</div>
<Border/>
</div>
<el-dialog title="图表列表" :visible.sync="dialogFormVisible" width="620px">
<div style="display: inline-flex; ">
<div class="left" style="width: 350px;display: inline-block;vertical-align: top;">
<el-form :model="form">
<el-form-item label="标题名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off" style="width: 200px;"></el-input>
</el-form-item>
<el-form-item label="图表类型" :label-width="formLabelWidth">
<el-select
style="width: 200px;"
v-model="form.region"
placeholder="请选择图表类型"
@change="changeSelect"
>
<el-option
v-for="item in selectChartList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div style="display: inline-block;flex: 2; overflow:hidden">
<el-image
v-if="this.url.length >0"
fit="contain"
:src="url"
style="width: 200px;height: 200px;"
/>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="sureSelect">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Border from "./border";
import Add from "./add";
export default {
data() {
return {
dialogFormVisible: false,
form: {
name: "",
region: ""
},
selectValue: "",
formLabelWidth: "120px",
url: "",
selectLocation: -1
};
},
components: {
Add,
Border
},
mounted() {},
props:{
chartList:Array,
selectChartList:Array
},
methods: {
Select(n){
console.log("我点击了：",n)
this.selectLocation = n;
this.dialogFormVisible = true;
},
sureSelect() {
console.log("我点击了确定！~", this.selectLocation);
this.chartList[this.selectLocation].tittle = this.form.name;
this.chartList[this.selectLocation].chartTypeId = this.form.region;
this.chartList[this.selectLocation].url = this.url;
console.log(this.chartList);
this.dialogFormVisible = false;
},
changeSelect(e) {
console.log("ssssssssssss" + e);
this.selectChartList.find((item, index) => {
//if(item.id==e) return index;
if (item.id == e) {
console.log(index);
this.url = this.selectChartList[index].url;
}
});
}
}
};
</script>
<style scoped lang="scss">
.add {
height: 275px;
color: #93a9ff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.main-middle {
padding: 0 10px;
}
.border-container {
position: relative;
margin-top: 15px;
padding: 10px;
border: 1px solid #54dcf2;
}
#teacherrate,
#courserate,
#professionrate {
height: 200px;
}
#agelist {
height: 130px;
}
#changedetail {
height: 229px;
}
.teacher-pie li:last-child {
border-right: none;
}
.teacher-pie li .name-title {
padding-left: 10px;
padding-top: 10px;
}
.teacher-pie li {
float: left;
width: 50%;
border-right: 1px solid #2c768a;
box-sizing: border-box;
}
.teacher-pie {
border-bottom: 1px solid #2c768a;
margin: -10px;
margin-bottom: 0;
}
</style>
FTT.Board.VueUI/src/views/board/chartDemo/right.vue 0 → 100644
View file @ 9399d136
<template>
<div class="main-right">
<div class="border-container">
<div class="add">
<Add :chartList="chartList" :num = "0" @Select="Select"/>
</div>
<Border/>
</div>
<div class="border-container">
<div class="add" style="height:250px">
<Add :chartList="chartList" :num = "1" @Select="Select"/>
</div>
<Border/>
</div>
<div class="border-container">
<div class="add" style="height:240px">
<Add :chartList="chartList" :num = "2" @Select="Select"/>
</div>
<Border/>
</div>
<el-dialog title="图表列表" :visible.sync="dialogFormVisible" width="620px">
<div style="display: inline-flex; ">
<div class="left" style="width: 350px;display: inline-block;vertical-align: top;">
<el-form :model="form">
<el-form-item label="标题名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off" style="width: 200px;"></el-input>
</el-form-item>
<el-form-item label="图表类型" :label-width="formLabelWidth">
<el-select
style="width: 200px;"
v-model="form.region"
placeholder="请选择图表类型"
@change="changeSelect"
>
<el-option
v-for="item in selectChartList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div style="display: inline-block;flex: 2; overflow:hidden">
<el-image
v-if="this.url.length >0"
fit="contain"
:src="url"
style="width: 200px;height: 200px;"
/>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="sureSelect">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Border from "./border";
import Add from "./add";
export default {
data() {
return {
dialogFormVisible: false,
form: {
name: "",
region: ""
},
selectValue: "",
formLabelWidth: "120px",
url: "",
selectLocation: -1
};
},
components: {
Add,
Border
},
mounted() {},
props:{
chartList:Array,
selectChartList:Array
},
methods: {
Select(n){
console.log("我点击了：",n)
this.selectLocation = n;
this.dialogFormVisible = true;
},
sureSelect() {
console.log("我点击了确定！~", this.selectLocation);
this.chartList[this.selectLocation].tittle = this.form.name;
this.chartList[this.selectLocation].chartTypeId = this.form.region;
this.chartList[this.selectLocation].url = this.url;
console.log(this.chartList);
this.dialogFormVisible = false;
},
changeSelect(e) {
console.log("ssssssssssss" + e);
this.selectChartList.find((item, index) => {
//if(item.id==e) return index;
if (item.id == e) {
console.log(index);
this.url = this.selectChartList[index].url;
}
});
}
}
};
</script>
<style scoped>
.add {
height: 275px;
color: #93a9ff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.add .mask {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.add .addbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden !important;
display: flex;
justify-content: center;
align-items: center;
flex: 0;
}
.add i {
font-size: 38px;
z-index: 5;
}
.main-right {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.border-container {
position: relative;
margin-top: 15px;
padding: 10px;
border: 1px solid #54dcf2;
}
.border-container span.border-span {
display: block;
position: absolute;
width: 35px;
height: 35px;
}
.border-container span.top-left {
top: -4px;
left: -4px;
border-top: 3px solid #54dcf2;
border-left: 3px solid #54dcf2;
}
.border-container span.top-right {
top: -4px;
right: -4px;
border-top: 3px solid #54dcf2;
border-right: 3px solid #54dcf2;
}
.border-container span.bottom-left {
bottom: -4px;
left: -4px;
border-bottom: 3px solid #54dcf2;
border-left: 3px solid #54dcf2;
}
.border-container span.bottom-right {
bottom: -4px;
right: -4px;
border-bottom: 3px solid #54dcf2;
border-right: 3px solid #54dcf2;
}
.name-title {
font-size: 20px;
color: #00ffff;
}
#juniorservice {
height: 190px;
}
#edubalance {
height: 203px;
}
</style>
FTT.Board.VueUI/src/views/board/chartDemo1/header.vue 0 → 100644
View file @ 9399d136
<template>
<!--头部-->
<div class="header">
飞天兔数字工厂大数据展示
<!-- <a href="javascript:;" class="a-access">
<button class="button type1">
返回
</button>
</a> -->
</div>
</template>
<script>
export default {
name: "chartHeader",
data() {
return {
// key: value
}
},
methods: {
name() {
}
},
}
</script>
<style scoped="scoped">
.header {
height: 90px;
position: relative;
padding-top: 13px;
font-size: 36px;
color: #00ffff;
text-align: center;
background: url(../../../assets/image/chartHeaderBg.png) top center no-repeat;
box-sizing: border-box;
}
</style>
FTT.Board.VueUI/src/views/board/chartDemo1/index.vue 0 → 100644
View file @ 9399d136
<template>
<div class="chartDemo">
<el-container>
<el-header style="height: 90px;">
<chartHeader />
</el-header>
<el-main>
<el-row :gutter="20">
<el-col :span="7">
<div class="grid-content ">
<chartLeft />
</div>
</el-col>
<el-col :span="10">
<div class="grid-content ">
<chartMain :chartListMain="chartListMain"/>
</div>
</el-col>
<el-col :span="7">
<div class="grid-content ">
<chartRight :chartListRight="chartListRight"/>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
</template>
<script>
import chartHeader from "./header.vue"
import chartLeft from "./left.vue"
import chartRight from "./right.vue"
import chartMain from "./main.vue"
export default{
name: "chartDemo",
data() {
return {
chartListLeft:[],
chartListMain:[],
chartListRight:[],
}
},
components: {
chartHeader,
chartLeft,
chartRight,
chartMain
},
mounted(){
this.chartListLeft = JSON.parse(localStorage.getItem("chartListLeft"))
this.chartListMain = JSON.parse(localStorage.getItem("chartListMain"))
this.chartListRight = JSON.parse(localStorage.getItem("chartListRight"))
// this.chartListMain = this.$route.query.chartListMain;
// this.chartListRight = this.$route.query.chartListRight;
console.log("sss"+JSON.stringify(this.chartListLeft))
},
methods: {
name() {
}
},
}
</script>
<style>
div {
overflow: initial !important;
}
*{
box-sizing: border-box;
}
li{
list-style: none;
}
.chartDemo{
background: #040f3c;
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
FTT.Board.VueUI/src/views/board/chartDemo1/left.vue 0 → 100644
View file @ 9399d136
<template>
<div class="main-left">
<div class="border-container">
<div class="name-title">
===
</div>
<div id="radar1">
<component :is="left1" > </component>
<!-- <Edubalance /> -->
</div>
<Border />
</div>
<div class="border-container">
<div class="name-title">
===
</div>
<div id="graduateyear1">
<component :is="left2" > </component>
</div>
<ul class="three-pie clearfix">
<li>
<div id="sexrate1">
<component :is="left3" > </component>
</div>
</li>
<li>
<div id="householdrate1">
<component :is="left4" > </component>
</div>
</li>
</ul>
<Border />
</div>
</div>
</template>
<script>
import Border from "../chartDemo/border";
import Pie from '../../chart/echarts/pie';
import Bar from '../../chart/echarts/bar';
import chartLine from '../../chart/echarts/line';
import Radar from '../../chart/echarts/radar';
import Scatter from '../../chart/echarts/scatter';
import Graduateyear from '../../chart/echarts/graduateyear';
import Sexrate from '../../chart/echarts/sexrate';
import Householdrate from '../../chart/echarts/householdrate';
import Courserate from '../../chart/echarts/courserate';
import Professionrate from '../../chart/echarts/professionrate'
import Changedetail from '../../chart/echarts/changedetail'
import Juniorservice from '../../chart/echarts/juniorservice'
import Edubalance from '../../chart/echarts/edubalance'
export default {
components: {
Pie,
Border,
Bar,
chartLine,
Radar,
Scatter,
Graduateyear,
Sexrate,
Householdrate,
Courserate,
Professionrate,
Changedetail,
Juniorservice,
Edubalance
},
data() {
return {
chart: {
BackgroundColor: "#040f3c",
},
id:'id3',
chartListLeft:[],
left1:'',
left2:'',
left3:'',
left4:''
}
},
// props:[
// 'chartListLeft'
// ],
// props:{
// chartListLeft:Array,
// },
mounted() {
this.$nextTick(() => {
this.chartListLeft = JSON.parse(localStorage.getItem("chartListLeft"))
this.left1 = this.chartListLeft[0].chartTypeId;
this.left2 = this.chartListLeft[1].chartTypeId;
this.left3 = this.chartListLeft[2].chartTypeId;
this.left4 = this.chartListLeft[3].chartTypeId;
console.log("vvvvvvvvvvvvv"+this.left1)
});
},
methods: {
},
}
</script>
<style scoped>
.main-left {
float: left;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.border-container {
position: relative;
margin-top: 15px;
padding: 10px;
border: 1px solid #54dcf2;
}
.name-title {
font-size: 20px;
color: #00ffff;
}
#radar1 {
height: 275px;
}
#dormitorydetail1 {
height: 135px;
}
#graduateyear1 {
height: 192px;
}
.three-pie {
border-top: 1px solid #2c768a;
margin: -10px;
margin-top: 10px;
height: 266px;
}
.three-pie li {
float: left;
width: 50%;
border-right: 1px solid #2c768a;
box-sizing: border-box;
}
.three-pie li:last-child {
border-right: none;
}
#sexrate1,
#householdrate1 {
width:100%;
height: 266px;
}
</style>
FTT.Board.VueUI/src/views/board/chartDemo1/main.vue 0 → 100644
View file @ 9399d136
<template>
<div class="main-middle">
<div class="border-container">
<div id="mapadd1">
<component :is="main1" > </component>
</div>
<Border />
</div>
<div class="border-container">
<ul class="teacher-pie clearfix">
<li>
<div class="name-title">
=======
</div>
<div id="courserate1">
<component :is="main2" > </component>
</div>
</li>
<li>
<div class="name-title">
=======
</div>
<div id="professionrate1">
<component :is="main3" > </component>
</div>
</li>
</ul>
<div class="name-title">
===
</div>
<div id="changedetail1">
<component :is="main4" > </component>
</div>
<Border />
</div>
</div>
</template>
<script>
import Border from "../chartDemo/border";
import Pie from '../../chart/echarts/pie';
import Bar from '../../chart/echarts/bar';
import chartLine from '../../chart/echarts/line';
import Radar from '../../chart/echarts/radar';
import Scatter from '../../chart/echarts/scatter';
import Graduateyear from '../../chart/echarts/graduateyear';
import Sexrate from '../../chart/echarts/sexrate';
import Householdrate from '../../chart/echarts/householdrate';
import Courserate from '../../chart/echarts/courserate';
import Professionrate from '../../chart/echarts/professionrate'
import Changedetail from '../../chart/echarts/changedetail'
import Juniorservice from '../../chart/echarts/juniorservice'
import Edubalance from '../../chart/echarts/edubalance'
export default {
components: {
Pie,
Border,
Bar,
chartLine,
Radar,
Scatter,
Graduateyear,
Sexrate,
Householdrate,
Courserate,
Professionrate,
Changedetail,
Juniorservice,
Edubalance
},
data() {
return {
chart: {
BackgroundColor: "#040f3c",
},
id:'id3',
chartListMain:[],
main1:'',
main2:'',
main3:'',
main4:''
}
},
mounted() {
this.$nextTick(() => {
this.chartListMain = JSON.parse(localStorage.getItem("chartListMain"))
this.main1 = this.chartListMain[0].chartTypeId;
this.main2 = this.chartListMain[1].chartTypeId;
this.main3 = this.chartListMain[2].chartTypeId;
this.main4 = this.chartListMain[3].chartTypeId;
console.log("vvvvvvvvvvvvv"+this.main1)
});
},
methods: {
},
}
</script>
<style scoped>
.main-middle {
padding: 0 10px;
}
.border-container {
position: relative;
margin-top: 15px;
padding: 10px;
border: 1px solid #54dcf2;
}
.name-title {
font-size: 20px;
color: #00ffff;
}
#mapadd1 {
height: 304px;
}
.number-show {
position: absolute;
top: 20%;
right: 5%;
}
.number-show span.span-name {
font-size: 14px;
color: #fffd51;
}
.number-show span.span-number-show {
font-size: 18px;
color: #54b5b5;
font-style: italic;
}
.number-show li {
line-height: 25px;
}
#teacherrate1,
#courserate1,
#professionrate1 {
height: 200px;
}
#agelist1 {
height: 130px;
}
#changedetail1 {
height: 229px;
}
.teacher-pie li:last-child {
border-right: none;
}
.teacher-pie li .name-title {
padding-left: 10px;
padding-top: 10px;
}
.teacher-pie li {
float: left;
width: 50%;
border-right: 1px solid #2c768a;
box-sizing: border-box;
}
.teacher-pie {
border-bottom: 1px solid #2c768a;
margin: -10px;
margin-bottom: 0;
}
</style>
FTT.Board.VueUI/src/views/board/chartDemo1/right.vue 0 → 100644
View file @ 9399d136
<template>
<div class="main-right">
<div class="border-container">
<div class="name-title">===</div>
<div style=" height: 275px;">
<component :is="right1"></component>
</div>
<Border />
</div>
<div class="border-container">
<div class="name-title">===</div>
<div id="juniorservice1">
<component :is="right2"></component>
</div>
<Border />
</div>
<div class="border-container">
<div class="name-title">===</div>
<div id="edubalance1">
<component :is="right3"></component>
</div>
<Border />
</div>
</div>
</template>
<script>
import Border from "../chartDemo/border";
import Pie from "../../chart/echarts/pie";
import Bar from "../../chart/echarts/bar";
import chartLine from "../../chart/echarts/line";
import Radar from "../../chart/echarts/radar";
import Scatter from "../../chart/echarts/scatter";
import Graduateyear from "../../chart/echarts/graduateyear";
import Sexrate from "../../chart/echarts/sexrate";
import Householdrate from "../../chart/echarts/householdrate";
import Courserate from "../../chart/echarts/courserate";
import Professionrate from "../../chart/echarts/professionrate";
import Changedetail from "../../chart/echarts/changedetail";
import Juniorservice from "../../chart/echarts/juniorservice";
import Edubalance from "../../chart/echarts/edubalance";
export default {
components: {
Pie,
Border,
Bar,
chartLine,
Radar,
Scatter,
Graduateyear,
Sexrate,
Householdrate,
Courserate,
Professionrate,
Changedetail,
Juniorservice,
Edubalance
},
data() {
return {
chart: {
BackgroundColor: "#040f3c"
},
chartListRight: [],
right1: "",
right2: "",
right3: ""
};
},
mounted() {
this.$nextTick(() => {
this.chartListRight = JSON.parse(localStorage.getItem("chartListRight"));
this.right1 = this.chartListRight[0].chartTypeId;
this.right2 = this.chartListRight[1].chartTypeId;
this.right3 = this.chartListRight[2].chartTypeId;
console.log("vvvvvvvvvvvvv" + this.right1);
});
},
methods: {}
};
</script>
<style scoped>
.main-right {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.border-container {
position: relative;
margin-top: 15px;
padding: 10px;
border: 1px solid #54dcf2;
}
.name-title {
font-size: 20px;
color: #00ffff;
}
#juniorservice1 {
height: 190px;
}
#edubalance1 {
height: 203px;
}
</style>
FTT.Board.VueUI/src/views/board/chartDemoList/index.vue 0 → 100644
View file @ 9399d136
<template>
<div>
<el-row :gutter="20">
<el-col :span="4" v-for="(o) in 6" :key="o">
<el-card :body-style="{ padding: '0px' }">
<el-image :src="url" :fit="fit" :preview-src-list="srcList" lazy></el-image>
<!-- <img src="../../../assets/image/chartDemo1.png" class="image"> -->
<div style="padding: 14px;">
<span>车间图表</span>
<div class="bottom clearfix">
<time class="time">描述描述描述dsfddddddddddddd...</time>
<div style="height: 10px;"></div>
<el-button type="primary" style="float: right;" @click="goDemo(o)">编辑</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
fit: 'contain',
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
],
}
},
components: {
},
methods: {
goDemo(n) {
console.log("我的ID是："+n)
this.$router.push("chartdemo");
}
},
}
</script>
<style>
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
FTT.Board.VueUI/src/views/board/chartList/index.1.vue 0 → 100644
View file @ 9399d136
This diff is collapsed.
FTT.Board.VueUI/src/views/board/chartList/index.vue 0 → 100644
View file @ 9399d136
<template>
<div style="height:100%">
<el-container style="height: 100%; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246);padding: 10px;">
<el-card v-for="(item, index) in chartList" :key="item.id" style="margin-bottom: 20px;">
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image" >
<div style="padding: 14px 0 0;">
<span class="demonstration clearfix">{{item.name}}</span>
<div class=" clearfix">
<el-button type="primary" @click="checkCur(item,index)">添加</el-button>
</div>
</div>
</el-card>
<!-- <div class="demo-image">
<div class="block" v-for="fit in fits" :key="fit">
<span class="demonstration">{{ fit }}</span>
<el-button type="primary">添加</el-button>
<el-image :src="url" :fit="fit"></el-image>
</div>
</div> -->
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-button type="primary">确定</el-button>
</el-header>
<el-main>
<div style="width: 100%;height: 100%;background: pink;">
<VueDragResize :isActive="true" :w="200" :h="200"
v-for="(item) in charArr" :key="item.id"
v-on:resizing="resize" v-on:dragging="resize" :x="500" :y="180"
class="resize">
<div> {{item.name}}</div>
</VueDragResize>
</div>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import comBox from "@/config/comboxstore.js";
import Axios from "@/function/axios.js";
import VueDragResize from 'vue-drag-resize'
import qs from "qs";
export default {
name: "dragin",
components: {
VueDragResize,
},
data() {
return {
width: 0,
height: 0,
top: 100,
left: 100,
chartList: [{
name: '柱状图',
id: 1,
}, {
name: '折线图',
id: 2,
}, {
name: '雷达图',
id: 3,
}, {
name: '饼图',
id: 4,
}, {
name: '散点图',
id: 5,
}, {
name: '柱状图',
id: 6,
}, {
name: '柱状图',
id: 7,
}],
charArr: [
]
}
},
watch: {},
methods: {
checkCur(item, index) {
console.log("我选中了" + item.id)
this.charArr.push(item)
console.log(JSON.stringify(this.charArr))
},
resize(newRect) {
this.width = newRect.width;
this.height = newRect.height;
this.top = newRect.top;
this.left = newRect.left;
},
},
created() {
}
};
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
line-height: inherit;
}
.resize {
overflow: initial !important;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
FTT.Board.VueUI/src/views/board/index.1.vue 0 → 100644
View file @ 9399d136
<template>
<div v-if="ruleForm!=null">
<el-container
v-loading="loading"
style="height:100%;width:100%; "
:style="{background:ruleForm.BackgroundColor} "
>
<el-header
style="padding: 0"
:style="setHeadOrFoot('head')"
v-if="GetChartStore('head')!=null"
>
<com-head :boardstore="ruleForm" :chart="GetChartStore('head')" :Api="Api.charapi"></com-head>
</el-header>
<el-main style="padding: 0">
<el-carousel
indicator-position="none"
style="height:100%;width:100%"
class="carouselclass"
:autoplay="false"
arrow="never"
ref="carousel"
:initial-index='pageindex==0?0:pageindex-1'
>
<template>
<el-carousel-item
v-for="(item,index) in GetLayout().TagData"
:key="index"
class="test"
:name="'page'+index"
>
<template v-if="item.length>0">
<div
v-for="(rows,index1) in item"
:key="rows+'row'"
:style="{height:getRowHeight(item,index1)+'%'}"
>
<template v-if="item.length>0">
<template v-for="(column,index2) in rows">
<div
:key="index2+'column'"
class="columndiv"
:style="{width:getChartWidth(GetChartStore(column),rows),height:100+'%',borderColor:ruleForm.BorderColor==null?'red':ruleForm.BorderColor}"
>
<component
v-bind:is="GetChart(column)"
:boardstore="ruleForm"
:chart="GetChartStore(column)"
:Api="Api.charapi"
v-if="GetChartStore(column).IsShow"
></component>
</div>
</template>
</template>
</div>
</template>
</el-carousel-item>
</template>
</el-carousel>
</el-main>
<el-footer
style="padding: 0"
:style="setHeadOrFoot('foot')"
v-if="GetChartStore('foot')!=null"
>
<com-foot :boardstore="ruleForm" :chart="GetChartStore('foot')" :Api="Api.charapi"></com-foot>
</el-footer>
</el-container>
</div>
</template>
<script>
import comBox from "@/config/comboxstore.js";
import Axios from "@/function/axios.js";
import qs from "qs";
import comHead from "@/views/chart/head";
import comFoot from "@/views/chart/foot";
import Panle1 from "@/views/chart/Panle1";
import Panle2 from "@/views/chart/Panle2";
import Table1 from "@/views/chart/Table1";
import pie from "@/views/chart/echarts/pie/index";
export default {
name: "board",
components: {
comHead,
comFoot,
Panle1,
Panle2,
Table1,
pie
},
data() {
return {
Api: {
get: { url: "api/cfg_board/getboardinfo" },
charapi: { url: "api/chart/get" }
},
loading: false,
comboxstore: comBox,
ruleForm: null,
timer1: null,
pageindex: 0
};
},
watch: {
"ruleForm.PageRefreshTime": function(val, oldval) {
if (this.pageindex >0) {
// this._goIndex(this.pageindex);
return;
}
if (val != 0) {
if (val != oldval && oldval != null) {
clearInterval(this.timer1);
this.timer1 == null;
this._nexPage(val);
} else {
if (this.timer1 == null) {
this._nexPage(val);
}
}
}
}
},
mounted() {
var id = this.$route.query.BoardID;
var me = this; //声明一个变量指向vue实例this,保证作用域一致
this.timer = setInterval(function() {
me.Load(id); //修改数据date
}, 3000);
// this.$nextTick(() => {
// setInterval(() => {
// console.log("下一页");
// me.setActiveItem("page1");
// }, me.time);
// });
},
methods: {
Load(id) {
console.log("请求数据。。。")
var me = this;
Axios({
method: "get",
url: me.Api.get.url,
params: { MID: id }
}).then(res => {
if (res.success) {
me.ruleForm = res.rows[0];
} else {
me.$message.error(res.message);
}
});
},
//获取布局
GetLayout() {
var layout = this.comboxstore.LayoutComBox.GetOnlyElement(
"ID",
this.ruleForm.LayoutID
);
return layout;
},
GetChartStore(item) {
var chart = null;
switch (item) {
case "head":
chart = this.ruleForm.BoardDetail.GetFirstElement("ChartType", 1);
break;
case "foot":
chart = this.ruleForm.BoardDetail.GetFirstElement("ChartType", 2);
break;
default:
chart = this.ruleForm.BoardDetail.GetFirstElement(
"PositionIndex",
item
);
break;
}
return chart;
},
setHeadOrFoot(name) {
var char = this.GetChartStore(name);
if (char && char.IsShow) {
return {
width: char.Width == 0 ? "100%" : char.Width + "%",
height: char.Height == 0 ? "6%" : char.Height + "%",
background: char.BackgroundColor != null ? char.BackgroundColor : "",
textAlign: "center"
};
} else {
return {
display: "none"
};
}
},
GetChart(index) {
var chartstore = this.ruleForm.BoardDetail.GetFirstElement(
"PositionIndex",
index
);
if (chartstore == null) return;
var chart = this.comboxstore.ChartTypeCombox.GetOnlyElement(
"ID",
chartstore.ChartType
);
console.log(chart.Text)
return chart.Text;
},
getChartWidth(chart, rows) {
var countwidth = 0;
var count = rows.length;
for (let index = 0; index < rows.length; index++) {
var cloumn = rows[index];
var cha = this.ruleForm.BoardDetail.GetFirstElement(
"PositionIndex",
cloumn
);
if (cha != null) {
countwidth += cha.Width;
if (cha.Width == 0) {
count--;
}
}
}
var width = 0;
if (chart != undefined && chart.Width != 0) {
width = chart.Width + "%";
} else {
width = (100 - countwidth) / (rows.length - count) + "%";
}
return width;
},
getRowHeight(rows, rowindex) {
var rowsArr = [];
for (let index = 0; index < rows.length; index++) {
var maxheight = 0;
var row = rows[index];
for (let index1 = 0; index1 < row.length; index1++) {
const element = row[index1];
var cha = this.ruleForm.BoardDetail.GetFirstElement(
"PositionIndex",
element
);
if (
cha != null &&
cha.Height != 0 &&
cha.Height > maxheight &&
cha.IsShow
) {
maxheight = cha.Height;
}
}
var row = { key: index, height: maxheight };
rowsArr.push(row);
}
var row1 = rowsArr.filter(item => {
return item.height > 0;
});
var row2 = rowsArr.filter(item => {
return item.height == 0;
});
var heightcount = 0;
row1.forEach(item => {
heightcount += item.height;
});
var heightavg = (100 - heightcount) / row2.length;
if (row1.ElementExist("key", rowindex)) {
return row1.GetFirstElement("key", rowindex).height;
} else {
return heightavg;
}
},
_nexPage(nexPagetime) {
console.log("下一页")
var me = this;
if (this.ruleForm != null) {
this.timer1 = setInterval(() => {
me.$refs.carousel.next();
}, nexPagetime * 1000);
}
},
// _goIndex(index) {
// var me = this;
// this.$nextTick(() => {
// let pagename = "page" + (index - 1);
// debugger;
// // me.$refs.carousel.setActiveItem("page1");
// // me.$refs.carousel.next();
// me.$refs.carousel.activeIndex=index;
// });
// }
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); //在vue实例销毁钱，清除我们的定时器
}
if (this.timer1) {
clearInterval(this.timer1); //在vue实例销毁钱，清除我们的定时器
}
},
created() {
var boardid = this.$route.query.BoardID;
this.pageindex = this.$route.query.PageIndex;
this.Load(boardid);
}
};
</script>
<style>
.carouselclass div {
height: 100%;
width: 100%;
}
.columndiv {
box-sizing: border-box;
border: 1px solid;
float: left;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/bar/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--柱状图-->
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id"></div> -->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
name: "pie",
data() {
return {
width: 0,
height: 0,
id: "love"
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
console.log(this.boardstore);
console.log(this.chart);
},
//props: [ 'width', 'height','boardstore','chart','id'],
// props: ['chart', 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
myChart.setOption({
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
xAxis: [
{
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisTick: {
alignWithLabel: false,
show: false
},
splitLine: {
show: false
},
axisLine: {
//show:false,
lineStyle: {
color: "#fff"
}
}
}
],
yAxis: [
{
type: "value",
//show:'false',
axisLine: {
lineStyle: {
color: "#fff"
}
},
splitLine: {
show: false
}
}
],
series: [
{
name: "直接访问",
type: "bar",
barWidth: "30%",
data: [10, 52, 200, 334, 390, 330, 220],
label: {
normal: {
show: true,
position: "top",
color: "#fff"
}
}
},
{
name: "直接访问",
type: "bar",
barWidth: "30%",
color: "red",
data: [10, 52, 200, 334, 390, 330, 220],
label: {
normal: {
show: true,
position: "top",
color: "#fff"
}
}
}
]
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/changedetail/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--graduateyear-->
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id"></div> -->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
data() {
return {
id: "changedetail",
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
var total = {
name: "=="
};
myChart.setOption({
tooltip: {
trigger: 'axis',
formatter: '{b}</br>{a}: {c}</br>{a1}: {c1}'
},
toolbox: {
show:false,
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['',''],
show:false
},
grid:{
top:'18%',
right:'5%',
bottom:'8%',
left:'5%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['2021年','2022年','2023年','2024年','2025年'],
splitLine:{
show:false,
lineStyle:{
color: '#3c4452'
}
},
axisTick: {
show: false
},
axisLabel:{
textStyle:{
color:"#fff"
},
lineStyle:{
color: '#519cff'
},
alignWithLabel: true,
interval:0
}
}
],
yAxis: [
{
type: 'value',
name: '嘎嘎',
nameTextStyle:{
color:'#fff'
},
interval: 5,
max:50,
min: 0,
splitLine:{
show:true,
lineStyle:{
color: '#23303f'
}
},
axisLine: {
show:false,
lineStyle: {
color: '#115372'
}
},
axisTick: {
show: false
},
axisLabel:{
textStyle:{
color:"#fff"
},
alignWithLabel: true,
interval:0
}
},
{
min: 0,
max: 2.5,
interval: 0.5,
type: 'value',
name: '哈哈',
nameTextStyle:{
color:'#fff'
},
splitLine:{
show:true,
lineStyle:{
color: '#23303f'
}
},
axisLine: {
show:false,
lineStyle: {
color: '#115372'
}
},
axisTick: {
show: false
},
axisLabel:{
textStyle:{
color:"#fff"
},
alignWithLabel: true,
interval:0
}
}
],
color:"yellow",
series: [
{
name:'test1',
type:'bar',
data:[2, 4, 7, 23, 25],
boundaryGap: '45%',
barWidth:'40%',
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'#6bc0fb','#7fec9d','#fedd8b','#ffa597','#84e4dd'
];
return colorList[params.dataIndex]
},label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
}
},
{
name:'test2',
type:'line',
yAxisIndex: 1,
lineStyle: {
normal: {
color:'#c39705'
}
},
data:[1.0, 0.5, 0.8, 0.9, 0.6]
}
]
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/courserate/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--graduateyear-->
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id"></div> -->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
data() {
return {
id: "courserate",
data: [
{
name: "FK",
type: "pie",
radius: "45%",
color: [
"#27c2c1",
"#9ccb63",
"#fcd85a",
"#60c1de",
"#0084c8",
"#d8514b"
],
center: ["38%", "50%"],
data: [
{ value: 335, name: "test1" },
{ value: 310, name: "test2" },
{ value: 234, name: "test3" },
{ value: 135, name: "test4" },
{ value: 234, name: "test5" },
{ value: 234, name: "text6" }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
itemStyle: {
normal: {
label: {
show: true,
position: "outside",
formatter: "{b}"
}
},
labelLine: { show: true }
}
}
]
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
var total = {
name: "=="
};
myChart.setOption({
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
right: "0",
y: "middle",
textStyle: {
color: "#fff"
},
formatter: (name)=> {
var oa = this.data[0].data;
var num =
oa[0].value +
oa[1].value +
oa[2].value +
oa[3].value +
oa[4].value +
oa[5].value;
for (var i = 0; i < this.data[0].data.length; i++) {
if (name == oa[i].name) {
return name + " " + oa[i].value;
}
}
},
data: ["test1", "test2", "test3", "test4", "test5", "text6"]
},
series: this.data
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/edubalance/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--graduateyear-->
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id"></div> -->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
data() {
return {
id: "edubalance",
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
var total = {
name: "=="
};
myChart.setOption({
tooltip: {
trigger: 'axis',
formatter: '{b}</br>{a}: {c}</br>{a1}: {c1}</br>{a2}: {c2}</br>{a3}: {c3}'
},
toolbox: {
show:false,
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['test1','test2','test3','test4','test5'],
right:"15%",
textStyle:{
color:'#fff'
}
},
grid:{
top:'18%',
right:'5%',
bottom:'8%',
left:'5%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['工藤新一','工藤新一','工藤新一','工藤新一'],
splitLine:{
show:false,
lineStyle:{
color: '#3c4452'
}
},
axisTick: {
show: false
},
axisLabel:{
textStyle:{
color:"#fff"
},
lineStyle:{
color: '#519cff'
},
alignWithLabel: true,
interval:0,
}
}
],
yAxis: [
{
type: 'value',
nameTextStyle:{
color:'#fff'
},
interval: 5,
max:50,
min: 0,
splitLine:{
show:true,
lineStyle:{
color: '#23303f'
}
},
axisLine: {
show:false,
lineStyle: {
color: '#115372'
}
},
axisTick: {
show: false
},
axisLabel:{
textStyle:{
color:"#fff"
},
alignWithLabel: true,
interval:0
}
},
{
min: 0,
max: 100,
interval: 20,
type: 'value',
name: '所',
nameTextStyle:{
color:'#fff'
},
splitLine:{
show:true,
lineStyle:{
color: '#23303f'
}
},
axisLine: {
show:false,
lineStyle: {
color: '#115372'
}
},
axisTick: {
show: false
},
axisLabel:{
textStyle:{
color:"#fff"
},
alignWithLabel: true,
interval:0
}
}
],
color:"yellow",
series: [
{
name:'test1',
type:'bar',
data:[21, 14, 17, 12],
itemStyle: {
normal: {
color: '#76da91'
},label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
},
{
name:'test2',
type:'bar',
data:[12, 14, 17, 23],
itemStyle: {
normal: {
color: '#f8cb7f'},
label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
},
{
name:'test3',
type:'bar',
data:[12, 14, 17, 13],
itemStyle: {
normal: {
color: '#f89588'},
label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
},
{
name:'test4',
type:'bar',
data:[2, 4, 7, 3],
itemStyle: {
normal: {
color: '#7cd6cf'},
label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
},
{
name:'test5',
type:'line',
yAxisIndex: 1,
lineStyle: {
normal: {
color:'#c39705'
}
},
data:[30, 10, 90,75]
}
]
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/graduateyear/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--graduateyear-->
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id"></div> -->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
name: "radar",
data() {
return {
id: "graduateyear"
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
myChart.setOption({
title: {
text: "",
x: "center",
y: "top",
textStyle: {
color: "#fff",
fontSize: 13
}
},
tooltip: {
trigger: "axis"
},
grid: {
left: "3%",
right: "8%",
bottom: "5%",
top: "13%",
containLabel: true
},
color: ["#72b332", "#35a9e0"],
legend: {
data: ["test1", "test2"],
show: true,
right: "15%",
y: "0",
textStyle: {
color: "#999",
fontSize: "13"
}
},
toolbox: {
show: false,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: "category",
boundaryGap: false,
data: [
"2022年",
"2023年",
"2024年",
"2025年",
"2026年",
"2027年",
"2028年"
],
splitLine: {
show: true,
lineStyle: {
color: "#2d3b53"
}
},
axisLabel: {
textStyle: {
color: "#fff"
},
alignWithLabel: true,
interval: 0,
rotate: "15"
}
}
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#2d3b53"
}
},
axisLabel: {
textStyle: {
color: "#999"
}
}
}
],
series: [
{
name: "test1",
type: "line",
smooth: true,
symbol: "roundRect",
data: [1168, 1189, 1290, 1300, 1345, 1256, 1045]
},
{
name: "test2",
type: "line",
smooth: true,
symbol: "roundRect",
data: [1234, 1290, 1311, 1145, 1045, 900, 673]
}
]
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/householdrate/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--graduateyear-->
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id"></div> -->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
data() {
return {
id: "householdrate",
data: [
{
name: 'FK',
type: 'pie',
selectedMode: 'single',
radius: ['45%', '55%'],
center: ['50%', '40%'],
data: [
{value: 2629, name: 'test1'},
{value: 2507, name: 'test2'}
],
label: {
normal: {
show: false,
position: "outer",
align:'left',
textStyle: {
rotate:true
}
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
label:{
show: true,
formatter: '{b} {c}'
}
}
}
}
]
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
var total = {
name: "=="
};
myChart.setOption({
title: [{
text: total.name,
left: '48%',
top: '34%',
textAlign: 'center',
textBaseline: 'middle',
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize: 18
}
}, {
text: total.value,
left: '48%',
top: '44%',
textAlign: 'center',
textBaseline: 'middle',
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize: 18
}
}],
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color:['#4f9de7','#4acf79'],
legend: {
orient: 'vertical',
x:'center',
bottom:'5%',
selectedMode:false,
formatter:(name)=>{
var oa = this.data[0].data;
var num = oa[0].value + oa[1].value ;
for(var i = 0; i < this.data[0].data.length; i++){
if(name==oa[i].name){
return name + " "+oa[i].value+" "+ (oa[i].value / num * 100).toFixed(2) + '%';
}
}
},
data: ['test1','test2'],
show:true,
textStyle:{
color:'#fff',
fontWeight:'bold'
},
},
series : this.data
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/juniorservice/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--graduateyear-->
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id"></div> -->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
data() {
return {
id: "juniorservice",
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
var total = {
name: "=="
};
myChart.setOption({
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
color:['#eaff00','#22ac38'],
legend: {
right:'0',
data: ['test1', 'test2'],
textStyle:{
color:'#00ffff'
}
},
grid: {
left: '8%',
right: '4%',
bottom: '3%',
top:'10%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine:{
show:true,
lineStyle:{
color: '#1e2b43'
}
},
axisLine: {
show:false,
lineStyle: {
color: '#115372'
}
},
axisTick: {
show: false
},
axisLabel:{
textStyle:{
color:"#fff"
},
alignWithLabel: true,
interval:0
}
},
dataZoom: [{
type: 'slider',
yAxisIndex: 0,
filterMode: 'empty',
start: 0,
x:'0',
end: 60,
handleStyle:{
color:"#519cff",
backgroundColor:'#519cff'
},
textStyle:{
color:"#fff"},
borderColor:"#519cff"
}],
yAxis: {
type: 'category',
data: ['a','b','c',' d','e','f','g','h','i','j',' k','l','m','n'],
splitLine:{
show:false,
lineStyle:{
color: '#1e2b43'
}
},
axisTick: {
show: false
},
axisLine: {
show:true,
lineStyle: {
color: '#115372'
}
},
axisLabel:{
textStyle:{
color:"#419aff"
},
lineStyle:{
color: '#519cff'
},
alignWithLabel: true,
interval:0
}
},
series: [
{
name: 'test1',
type: 'bar',
stack: '比例',
label: {
normal: {
show: true,
position: 'insideRight',
textStyle:{
color:'#333'
}
}
},
data: [320, 302, 301, 334, 390, 330, 320,320, 302, 301, 334, 390, 330,123]
},
{
name: 'test2',
type: 'bar',
stack: '比例',
label: {
normal: {
show: true,
position: 'right',
textStyle:{
color:'#00f0ff'
}
}
},
data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230,243]
}
]
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/line/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--折线图-->
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id"></div> -->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
name: "radar",
data() {
return {
width: 0,
height: 0,
id: "chartLine",
data: [
{
name: "邮件营销",
type: "line",
stack: "总量",
data: [120, 132, 101, 134, 90, 230, 210],
label: {
normal: {
show: true,
position: "top",
color: "#fff"
}
},
itemStyle: {
color: "#fff"
}
},
{
name: "联盟广告",
type: "line",
stack: "总量",
data: [220, 182, 191, 234, 290, 330, 310],
label: {
normal: {
show: true,
position: "top"
}
}
},
{
name: "视频广告",
type: "line",
stack: "总量",
label: {
normal: {
show: true,
position: "top"
}
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: "直接访问",
type: "line",
stack: "总量",
label: {
normal: {
show: true,
position: "top"
}
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: "搜索引擎",
type: "line",
stack: "总量",
label: {
normal: {
show: true,
position: "top"
}
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
],
legendData: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
myChart.setOption({
title: {
text: "折线图堆叠",
show: false
},
tooltip: {
trigger: "axis"
},
legend: {
data: this.legendData,
textStyle: {
color: "#fff"
},
show: false
},
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
// toolbox: {//右上角显示下载按钮
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {
type: "category",
boundaryGap: false,
data: this.xData,
axisTick: {
alignWithLabel: false,
show: false
},
splitLine: {
show: false
},
axisLine: {
//show:false,
lineStyle: {
color: "#fff"
}
}
},
yAxis: {
type: "value",
axisTick: {
alignWithLabel: false,
show: false
},
splitLine: {
show: false
},
axisLine: {
//show:false,
lineStyle: {
color: "#fff"
}
}
},
series: this.data
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/pie/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--------饼图------>
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id" ></div> -->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
name: "pie",
data() {
return {
width: 0,
height: 0,
id: "pie"
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
console.log(this.boardstore);
console.log(this.chart);
},
//props: [ 'width', 'height','boardstore','chart','id'],
// props: ['chart', 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
myChart.setOption({
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
//图例
orient: "vertical",
x: "left",
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
show: false
},
series: [
{
name: "访问来源",
type: "pie",
radius: ["20%", "30%"],
avoidLabelOverlap: true,
label: {
formatter: "{b}:{c}({d})"
},
data: [
{
value: 335,
name: "直接访问"
},
{
value: 310,
name: "邮件营销"
},
{
value: 234,
name: "联盟广告"
},
{
value: 135,
name: "视频广告"
},
{
value: 1548,
name: "搜索引擎"
}
]
}
]
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/professionrate/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--graduateyear-->
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id"></div> -->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
data() {
return {
id: "professionrate",
data: [
{
name: "FK",
type: "pie",
radius: "60%",
center: ["35%", "50%"],
data: [
{ value: 335, name: "test1" },
{ value: 310, name: "test2" },
{ value: 234, name: "test3" }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
itemStyle: {
normal: {
label: {
show: true,
position: "outside",
formatter: " {b}"
}
},
labelLine: { show: true }
}
}
]
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
var total = {
name: "=="
};
myChart.setOption({
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
right: "0",
y: "middle",
textStyle: {
color: "#fff"
},
data: ["test1", "test2", "test3"],
formatter: (name)=> {
var oa = this.data[0].data;
var num = oa[0].value + oa[1].value + oa[2].value;
for (var i = 0; i < this.data[0].data.length; i++) {
if (name == oa[i].name) {
return name + " " + oa[i].value;
}
}
}
},
series: this.data
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/radar/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--------雷达图------>
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id"></div>
-->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
name: "radar1",
data() {
return {
width: 0,
height: 0,
id: "radar1"
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
},
//props: [ 'width', 'height','boardstore','chart','id'],
// props: ["chart", "id"],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
myChart.setOption({
// backgroundColor: '#161627',
// title: {
// text: '基础雷达图',
// left: 'center',
// textStyle: {
// color: '#eee'
// }
// },
tooltip: {},
legend: {
data: ["预算分配", "实际开销"],
bottom: 5,
itemGap: 20,
textStyle: {
color: "#fff",
fontSize: 14
},
selectedMode: "single"
},
radar: {
shape: "circle",
name: {
textStyle: {
color: "rgb(238, 197, 102)"
}
},
radius: " 50%",
indicator: [
{
name: "销售",
max: 6500
},
{
name: "管理",
max: 16000
},
{
name: "信息技术",
max: 30000
},
{
name: "客服",
max: 38000
},
{
name: "研发",
max: 52000
},
{
name: "市场（Marketing）",
max: 25000
}
],
splitArea: {
show: false
},
splitLine: {
lineStyle: {
color: [
"rgba(238, 197, 102, 0.1)",
"rgba(238, 197, 102, 0.2)",
"rgba(238, 197, 102, 0.4)",
"rgba(238, 197, 102, 0.6)",
"rgba(238, 197, 102, 0.8)",
"rgba(238, 197, 102, 1)"
].reverse()
}
},
axisLine: {
lineStyle: {
color: "rgba(238, 197, 102, 0.5)"
}
}
},
series: [
{
name: "预算 vs 开销（Budget vs spending）",
type: "radar",
areaStyle: {
normal: {
opacity: 0.05
}
},
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: "预算分配（Allocated Budget）",
label: {
normal: {
show: true,
formatter: function(params) {
return params.value;
}
}
},
itemStyle: {
normal: {
color: "#F9713C"
}
}
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: "实际开销（Actual Spending）",
label: {
normal: {
show: true,
formatter: function(params) {
return params.value;
}
}
},
itemStyle: {
normal: {
color: "#B3E4A1"
}
}
}
]
}
]
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/scatter/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--散点图-->
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id"></div> -->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
name: "radar",
data() {
return {
width: 0,
height: 0,
id: "scatter",
data: [
[
[28604, 77, 17096869, "Australia", 1990],
[31163, 77.4, 27662440, "Canada", 1990],
[1516, 68, 1154605773, "China", 1990],
[13670, 74.7, 10582082, "Cuba", 1990],
[28599, 75, 4986705, "Finland", 1990],
[29476, 77.1, 56943299, "France", 1990],
[31476, 75.4, 78958237, "Germany", 1990],
[28666, 78.1, 254830, "Iceland", 1990],
[1777, 57.7, 870601776, "India", 1990],
[29550, 79.1, 122249285, "Japan", 1990],
[2076, 67.9, 20194354, "North Korea", 1990],
[12087, 72, 42972254, "South Korea", 1990],
[24021, 75.4, 3397534, "New Zealand", 1990],
[43296, 76.8, 4240375, "Norway", 1990],
[10088, 70.8, 38195258, "Poland", 1990],
[19349, 69.6, 147568552, "Russia", 1990],
[10670, 67.3, 53994605, "Turkey", 1990],
[26424, 75.7, 57110117, "United Kingdom", 1990],
[37062, 75.4, 252847810, "United States", 1990]
],
[
[44056, 81.8, 23968973, "Australia", 2015],
[43294, 81.7, 35939927, "Canada", 2015],
[13334, 76.9, 1376048943, "China", 2015],
[21291, 78.5, 11389562, "Cuba", 2015],
[38923, 80.8, 5503457, "Finland", 2015],
[37599, 81.9, 64395345, "France", 2015],
[44053, 81.1, 80688545, "Germany", 2015],
[42182, 82.8, 329425, "Iceland", 2015],
[5903, 66.8, 1311050527, "India", 2015],
[36162, 83.5, 126573481, "Japan", 2015],
[1390, 71.4, 25155317, "North Korea", 2015],
[34644, 80.7, 50293439, "South Korea", 2015],
[34186, 80.6, 4528526, "New Zealand", 2015],
[64304, 81.6, 5210967, "Norway", 2015],
[24787, 77.3, 38611794, "Poland", 2015],
[23038, 73.13, 143456918, "Russia", 2015],
[19360, 76.5, 78665830, "Turkey", 2015],
[38225, 81.4, 64715810, "United Kingdom", 2015],
[53354, 79.1, 321773631, "United States", 2015]
]
]
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
},
//props: [ 'width', 'height','boardstore','chart','id'],
// props: ['chart', 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
myChart.setOption({
// backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
// offset: 0,
// color: '#f7f8fa'
// }, {
// offset: 1,
// color: '#cdd0d5'
// }]),
title: {
text: "1990 与 2015 年各国家人均寿命与 GDP",
show: false
},
legend: {
show: false,
right: 10,
data: ["1990", "2015"]
},
xAxis: {
axisTick: {
alignWithLabel: false,
show: false
},
splitLine: {
show: false
},
axisLine: {
//show:false,
lineStyle: {
color: "#fff"
}
}
},
yAxis: {
axisTick: {
alignWithLabel: false,
show: false
},
splitLine: {
show: false
},
axisLine: {
//show:false,
lineStyle: {
color: "#fff"
}
},
scale: true
},
series: [
{
name: "1990",
data: this.data[0],
type: "scatter",
symbolSize: function(data) {
return Math.sqrt(data[2]) / 5e2;
},
label: {
show: true,
position: "top",
color: "red",
emphasis: {
show: true,
formatter: function(param) {
return param.data[3];
},
position: "top"
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: "rgba(120, 36, 50, 0.5)",
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0,
color: "rgb(251, 118, 123)"
},
{
offset: 1,
color: "rgb(204, 46, 72)"
}
])
}
}
},
{
name: "2015",
data: this.data[1],
type: "scatter",
symbolSize: function(data) {
return Math.sqrt(data[2]) / 5e2;
},
label: {
show: true,
position: "top",
color: "#60cbdc",
formatter: function(param) {
return param.data[3] + "-" + param.data[4];
},
emphasis: {
show: true,
formatter: function(param) {
return param.data[3];
},
position: "top"
}
},
itemStyle: {
normal: {
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)"
},
{
offset: 1,
color: "rgb(25, 183, 207)"
}
])
}
}
}
]
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/chart/echarts/sexrate/index.vue 0 → 100644
View file @ 9399d136
<template>
<!--graduateyear-->
<div class="main" :id="id" :style="{'width':100+'%','height':100+'%'}"></div>
<!-- <div class="main" :id="id"></div> -->
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
data() {
return {
id: "sexrate",
data: [
{
name: "PK",
type: "pie",
selectedMode: "single",
radius: ["45%", "55%"],
center: ["50%", "40%"],
data: [
{ value: 2629, name: "test1" },
{ value: 2507, name: "test2" }
],
label: {
normal: {
show: false,
position: "outer",
align: "left",
textStyle: {
rotate: true
}
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
},
normal: {
label: {
show: true,
formatter: "{b} {c}"
}
}
}
}
]
};
},
mounted() {
console.log(this.width, this.height);
this.$nextTick(() => {
this.setCharcts();
});
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
var total = {
name: "=="
};
myChart.setOption({
title: [
{
text: total.name,
left: "48%",
top: "34%",
textAlign: "center",
textBaseline: "middle",
textStyle: {
color: "#fff",
fontWeight: "normal",
fontSize: 18
}
},
{
text: total.value,
left: "48%",
top: "44%",
textAlign: "center",
textBaseline: "middle",
textStyle: {
color: "#fff",
fontWeight: "normal",
fontSize: 18
}
}
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color: ["#70a3ff", "#ff7f4e"],
legend: {
orient: "vertical",
x: "center",
bottom: "5%",
selectedMode: false,
formatter: (name) =>{
var oa = this.data[0].data;
var num = oa[0].value + oa[1].value;
for (var i = 0; i < this.data[0].data.length; i++) {
if (name == oa[i].name) {
return (
name +
" " +
oa[i].value +
" " +
((oa[i].value / num) * 100).toFixed(2) +
"%"
);
}
}
},
data: ["test1", "test2"],
show: true,
textStyle: {
color: "#fff",
fontWeight: "bold"
}
},
series: this.data
});
}
},
created() {}
};
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
}
canvas {
width: 80%;
height: 100%;
}
</style>
FTT.Board.VueUI/src/views/test/index.vue 0 → 100644
View file @ 9399d136
<template>
<div class="content">
<div class="line">
<piechart :id= 'id1' :width='width' :chart="chart" />
</div>
<div class="line">
<piechart :id= 'id2' :width='width' :chart="chart" />
</div>
<div class="line">
<piechart :id= 'id3' :width='width' :chart="chart" />
</div>
</div>
</template>
<script>
import piechart from '../chart/echarts/pie/index.vue'
export default{
data(){
return{
id1:"pie1",
id2:"pie2",
id3:"pie3",
width:'100',
chart:{
BackgroundColor:'#000'
}
}
},
components:{
piechart
},
mounted() {
},
methods:{
}
}
</script>
<style scoped="scoped">
.content{
display: flex;
width: 100%;
height: 100%;
justify-content: space-between;
}
.content .line{
display: flex;
justify-content: center;
align-content: center;
border: #0000EE 2px solid;
width: 33.33%;
height:100%;
}
</style>
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