java_project
/
hy-vue
4
0
Fork 0
Code Issues Pull Requests Activity
Browse Source

修改页面2

dev
caoyizhong 3 years ago
parent
992113abfe
commit
529fd56c53
2 changed files with 429 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      src/views/dashboard/Analysis.vue
  2. 434
      src/views/dashboard/NewHomePage.vue

16
src/views/dashboard/Analysis.vue
Unescape View File

@ -7,14 +7,14 @@
<NewHomePage v-if="indexStyle == 1"/>
<index-bdc v-if="indexStyle==2"></index-bdc>
<index-task v-if="indexStyle==3"></index-task>
<div style="width: 100%;text-align: right;margin-top: 20px">
请选择首页样式：
<a-radio-group v-model="indexStyle">
<a-radio :value="1">统计图表</a-radio>
<a-radio :value="2">统计图表2</a-radio>
<a-radio :value="3">任务表格</a-radio>
</a-radio-group>
</div>
<!-- <div style="width: 100%;text-align: right;margin-top: 20px">-->
<!-- 请选择首页样式：-->
<!-- <a-radio-group v-model="indexStyle">-->
<!-- <a-radio :value="1">统计图表</a-radio>-->
<!-- <a-radio :value="2">统计图表2</a-radio>-->
<!-- <a-radio :value="3">任务表格</a-radio>-->
<!-- </a-radio-group>-->
<!-- </div>-->
</div>
</template>

434
src/views/dashboard/NewHomePage.vue
Unescape View File

@ -4,16 +4,15 @@
<div style="display: flex;align-items: center;justify-content: stretch;width: 100%;height: 50%">
<div style="width: 50%;padding-left: 10%;height: 100%">
<a-card title="公司制度" style="width: 100%;height: 100%">
<template #extra><a href="#">more</a></template>
<p>card content</p>
<p>card content</p>
<p>card content</p>
<template #extra><a-button type="primary">more</a-button></template>
<p>物资管理实施细则</p>
<a-divider style="border: 1px solid #000000"/>
</a-card>
</div>
<div style="width: 50%;padding-left: 10%;height: 100%">
<a-card title="站内消息" style="width: 100%;height: 100%">
<template #extra><a href="#">more</a></template>
<template #extra><a-button type="primary">more</a-button></template>
<p>card content</p>
<p>card content</p>
<p>card content</p>
@ -21,18 +20,17 @@
</div>
</div>
<div style="width: 100%;margin-top: 5%;margin-left: 5%;height: 50%">
<a-card title="Default size card" style="width: 100%;height: 90%">
<template #extra><a href="#">more</a></template>
<p>card content</p>
<p>card content</p>
<p>card content</p>
<a-card title="数据图表" style="width: 100%;height: 90%">
<template #extra><a-button type="primary">more</a-button></template>
<div id="zhu" style="width: 24%;height: 260px;display:inline-block; "></div>
<div id="zhu1" style="width: 24%;height: 260px;display:inline-block; margin-left: 1%"></div>
<div id="zhu2" style="width: 24%;height: 260px;display:inline-block;margin-left: 1% "></div>
<div id="zhu3" style="width: 24%;height: 260px;display:inline-block;margin-left: 1% "></div>
</a-card>
</div>
</div>
<div>
</div>
@ -42,8 +40,418 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: "NewHomePage"
name: "NewHomePage",
data(){
},
mounted() {
this.echartsZhu();
},
methods:{
echartsZhu(){
let app = {};
// let chartDom = ;
let myChart = echarts.init(document.getElementById('zhu'));
let myChart1 = echarts.init(document.getElementById('zhu1'));
let myChart2 = echarts.init(document.getElementById('zhu2'));
let myChart3 = echarts.init(document.getElementById('zhu3'));
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['数据一', '数据二']
},
// toolbox: {
// show: true,
// orient: 'vertical',
// left: 'right',
// top: 'center',
// feature: {
// mark: { show: true },
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar', 'stack'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
grid: {
x: 45,//左边
y: 45,// 上边
x2: 55, //右边
y2: 75, //下边
borderWidth: 1,
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['一月', '二月', '三月', '四月', '五月']
}
],
yAxis: [
{
type: 'value',
// scale:'true',
}
],
series: [
{
name: '数据一',
type: 'bar',
barGap: 0,
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
// showBackground: true,
data: [120, 132, 101, 134, 190],
itemStyle: {
//这里是颜色
color: '#1567cd'
}
},
{
name: '数据二',
type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
// showBackground: true,
data: [98, 77, 101, 99, 40],
itemStyle: {
//这里是颜色
color: '#5ab9d7'
}
}
]
};
// let option1 = {
// // title: {
// // text: 'Stacked Line'
// // },
// tooltip: {
// trigger: 'axis',
// showContent: false
// },
// legend: {
// data: ['数据一', '数据二']
// },
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
// // toolbox: {
// // feature: {
// // saveAsImage: {}
// // }
// // },
// xAxis: {
// type: 'category',
// boundaryGap: false,
// data: ['一月', '二月', '三月', '四月', '五月']
// },
// yAxis: {
// type: 'value',
// //y轴区域内【x轴平行线】
// splitLine: {
// show: true,
// lineStyle:{
// type:'dashed',
// color: "#4f4f9d",
// }
// },
// },
// series: [
// {
// name: '数据一',
// type: 'line',
// // smooth: true,
// stack: 'Total',
// data: [120, 132, 101, 1134, 190, 230, 1210]
// },
// {
// name: '数据二',
// // smooth: true,
// type: 'line',
// stack: 'Total',
// data: [1120, 132, 101, 34, 90, 30, 120]
// }
// ]
// };
const colors = ['#5470C6', '#EE6666'];
let option1 = {
color: colors,
tooltip: {
// trigger: 'none',
// axisPointer: {
// type: 'cross'
// }
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
// data: ['数据一', '数据二']
},
grid: {
top: 70,
bottom: 50
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[1]
}
},
axisPointer: {
// label: {
// formatter: function (params) {
// return (
// '数据 ' +
// params.value +
// (params.seriesData.length ? '：' + params.seriesData[0].data : '')
// );
// }
// }
},
// prettier-ignore
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[0]
}
},
axisPointer: {
// label: {
// formatter: function (params) {
// return (
// '数据 ' +
// params.value +
// (params.seriesData.length ? '：' + params.seriesData[0].data : '')
// );
// }
// }
},
// prettier-ignore
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
}
],
// xAxis: [
// {
// type: 'category',
// axisTick: {
// alignWithLabel: true
// },
// axisLine: {
// onZero: false,
// lineStyle: {
// color: colors[1]
// }
// },
// axisPointer: {
// // label: {
// // formatter: function (params) {
// // return (
// // '数据 ' +
// // params.value +
// // (params.seriesData.length ? '：' + params.seriesData[0].data : '')
// // );
// // }
// // }
// },
// // prettier-ignore
// data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
// },
// {
// type: 'category',
// axisTick: {
// alignWithLabel: true
// },
// axisLine: {
// onZero: false,
// lineStyle: {
// color: colors[0]
// }
// },
// axisPointer: {
// // label: {
// // formatter: function (params) {
// // return (
// // '数据 ' +
// // params.value +
// // (params.seriesData.length ? '：' + params.seriesData[0].data : '')
// // );
// // }
// // }
// },
// // prettier-ignore
// data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
// }
// ],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '数据一',
type: 'line',
xAxisIndex: 1,
// smooth: true,
emphasis: {
focus: 'series'
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: '数据二',
type: 'line',
// smooth: true,
emphasis: {
focus: 'series'
},
data: [
3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
]
}
]
};
let option2 = {
// title: {
// text: 'Referer of a Website',
// subtext: 'Fake Data',
// left: 'center'
// },
tooltip: {
trigger: 'item', ////item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
},
legend: {
// orient: 'vertical',
left: 'center'
},
series: [
{
name: '',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '项目1' },
{ value: 735, name: '项目2' },
{ value: 580, name: '项目3' },
{ value: 484, name: '项目4' },
{ value: 300, name: '项目5' }
],
itemStyle:{
normal:{
label:{
show: true,
formatter: '{c}'
},
labelLine :{show:true}
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
let option3 = {
// title: {
// text: 'Basic Radar Chart'
// },
legend: {
data: ['数据一', '数据二']
},
tooltip: {
trigger: 'item', ////item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
},
grid: {
x: 45,//左边
y: 45,// 上边
x2: 55, //右边
y2: 75, //下边
borderWidth: 1,
},
radar: {
// shape: 'circle',
indicator: [
{ name: '一月', max: 6500 },
{ name: '二月', max: 16000 },
{ name: '三月', max: 30000 },
{ name: '四月', max: 38000 },
{ name: '五月', max: 52000 },
{ name: '六月', max: 25000 }
]
},
series: [
{
name: '',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '数据一'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '数据二'
}
]
}
]
};
myChart.setOption(option)// 给生成的echarts实例进行传递配置项option
myChart1.setOption(option1)// 给生成的echarts实例进行传递配置项option
myChart2.setOption(option2)// 给生成的echarts实例进行传递配置项option
myChart3.setOption(option3)// 给生成的echarts实例进行传递配置项option
},
}
}
</script>

Write Preview
Loading…
Cancel
Save