projects/mescc/develop #24
@@ -45,6 +45,7 @@
|
|||||||
"@riophae/vue-treeselect": "0.4.0",
|
"@riophae/vue-treeselect": "0.4.0",
|
||||||
"axios": "^1.6.8",
|
"axios": "^1.6.8",
|
||||||
"clipboard": "2.0.8",
|
"clipboard": "2.0.8",
|
||||||
|
"code-brick-zj": "^1.1.0",
|
||||||
"core-js": "^3.26.0",
|
"core-js": "^3.26.0",
|
||||||
"crypto-js": "^4.0.0",
|
"crypto-js": "^4.0.0",
|
||||||
"echarts": "5.4.0",
|
"echarts": "5.4.0",
|
||||||
|
|||||||
11
src/main.js
11
src/main.js
@@ -1,3 +1,10 @@
|
|||||||
|
/*
|
||||||
|
* @Author: zhp
|
||||||
|
* @Date: 2024-04-12 11:13:06
|
||||||
|
* @LastEditTime: 2024-04-12 16:20:31
|
||||||
|
* @LastEditors: zhp
|
||||||
|
* @Description:
|
||||||
|
*/
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import Element from 'element-ui'
|
import Element from 'element-ui'
|
||||||
|
|
||||||
@@ -23,7 +30,7 @@ import RightToolbar from "@/components/RightToolbar"
|
|||||||
// import hljs from 'highlight.js'
|
// import hljs from 'highlight.js'
|
||||||
// import 'highlight.js/styles/github-gist.css'
|
// import 'highlight.js/styles/github-gist.css'
|
||||||
import { DICT_TYPE, getDictDataLabel, getDictDatas, getDictDatas2 } from "@/utils/dict";
|
import { DICT_TYPE, getDictDataLabel, getDictDatas, getDictDatas2 } from "@/utils/dict";
|
||||||
|
import CodeBrickZj from 'code-brick-zj';
|
||||||
import './theme/index.css'; // 自定义主题包 - code-brick-zj
|
import './theme/index.css'; // 自定义主题包 - code-brick-zj
|
||||||
|
|
||||||
// 全局方法挂载
|
// 全局方法挂载
|
||||||
@@ -50,7 +57,7 @@ import VueMeta from 'vue-meta'
|
|||||||
Vue.use(directive)
|
Vue.use(directive)
|
||||||
Vue.use(plugins)
|
Vue.use(plugins)
|
||||||
Vue.use(VueMeta)
|
Vue.use(VueMeta)
|
||||||
|
Vue.use(CodeBrickZj);
|
||||||
// Form Generator 组件需要使用到 tinymce
|
// Form Generator 组件需要使用到 tinymce
|
||||||
import Tinymce from '@/components/tinymce/index.vue'
|
import Tinymce from '@/components/tinymce/index.vue'
|
||||||
Vue.component('tinymce', Tinymce)
|
Vue.component('tinymce', Tinymce)
|
||||||
|
|||||||
7
src/views/report/report/reportChart.vue
Normal file
7
src/views/report/report/reportChart.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zhp
|
||||||
|
* @Date: 2024-04-12 10:10:26
|
||||||
|
* @LastEditTime: 2024-04-12 10:10:26
|
||||||
|
* @LastEditors: zhp
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
358
src/views/report/yearData/index.vue
Normal file
358
src/views/report/yearData/index.vue
Normal file
@@ -0,0 +1,358 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zhp
|
||||||
|
* @Date: 2024-01-24 15:15:24
|
||||||
|
* @LastEditTime: 2024-04-12 16:50:32
|
||||||
|
* @LastEditors: zhp
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div>
|
||||||
|
<!-- <el-alert title="自定义 close-text" type="warning" close-text="知道了">
|
||||||
|
</el-alert> -->
|
||||||
|
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
|
||||||
|
<el-form-item label="时间维度" prop="reportTime">
|
||||||
|
<el-select v-model="timeSelect" placeholder="请选择">
|
||||||
|
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-show="timeSelect === 'month'" label="时间范围" prop="reportTime">
|
||||||
|
<el-date-picker v-model="listQuery.reportTime" type="monthrange" range-separator="至" start-placeholder="开始月份"
|
||||||
|
end-placeholder="结束月份">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="timeSelect === 'year'" label="时间范围" prop="reportTime">
|
||||||
|
<el-date-picker v-model="listQuery.reportTime" type="year" @change="changeTime"
|
||||||
|
:picker-options="{firstDayOfWeek: 1}" :format="'yyyy 年' + '\u3000' + startTimeStamp + '-' + endTimeStamp"
|
||||||
|
placeholder="选择年">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="工厂名称" prop="factoryId">
|
||||||
|
<el-select v-model="listQuery.factoryId" placeholder="请选择工厂名称">
|
||||||
|
<el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="玻璃类型" prop="type">
|
||||||
|
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
|
||||||
|
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" size="small" @click="getDataList">查询</el-button>
|
||||||
|
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-row style="height: 400px;">
|
||||||
|
<line-chart class="chart" ref="lineChart" style="height: 400px;width: 50%;margin-top: 50px;"></line-chart>
|
||||||
|
</el-row>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData">
|
||||||
|
</base-table>
|
||||||
|
<!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
|
||||||
|
:type="listQuery.reportType" @refreshDataList="getDataList" /> -->
|
||||||
|
<!-- <pagination
|
||||||
|
:limit.sync="listQuery.pageSize"
|
||||||
|
:page.sync="listQuery.pageNo"
|
||||||
|
:total="listQuery.total"
|
||||||
|
@pagination="getDataList" /> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import { parseTime } from '../../core/mixins/code-filter';
|
||||||
|
// import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
|
||||||
|
// import inputTable from './inputTable.vue';
|
||||||
|
import lineChart from './lineChart';
|
||||||
|
import moment from 'moment'
|
||||||
|
// import FileSaver from 'file-saver'
|
||||||
|
// import * as XLSX from 'xlsx'
|
||||||
|
export default {
|
||||||
|
components: { lineChart },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
listQuery: {
|
||||||
|
pageSize: 10,
|
||||||
|
pageNo: 1,
|
||||||
|
factoryId: null,
|
||||||
|
total: 0,
|
||||||
|
type: null,
|
||||||
|
// reportType: 2,
|
||||||
|
reportTime: []
|
||||||
|
},
|
||||||
|
urlOptions: {
|
||||||
|
// getDataListURL: getGlassPage,
|
||||||
|
// exportURL: exportGlasscExcel
|
||||||
|
},
|
||||||
|
timeList: [
|
||||||
|
{
|
||||||
|
value: 'month',
|
||||||
|
label:'月'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'year',
|
||||||
|
label: '年'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
factoryList: [
|
||||||
|
{
|
||||||
|
name: '测试',
|
||||||
|
id:1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
typeList: [
|
||||||
|
{
|
||||||
|
name: '芯片',
|
||||||
|
id:0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '标准组件',
|
||||||
|
id: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'BIPV产品',
|
||||||
|
id: 2,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableProps: [
|
||||||
|
// {
|
||||||
|
// prop: 'createTime',
|
||||||
|
// label: '添加时间',
|
||||||
|
// fixed: true,
|
||||||
|
// width: 180,
|
||||||
|
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
prop: 'userName',
|
||||||
|
label: '科目',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'nickName',
|
||||||
|
label: '类别',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'datas',
|
||||||
|
label: '数值',
|
||||||
|
// subcomponent: row
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'unit',
|
||||||
|
label: '单位',
|
||||||
|
// subcomponent: row
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'remark',
|
||||||
|
label: '备注',
|
||||||
|
// subcomponent: row
|
||||||
|
}
|
||||||
|
],
|
||||||
|
timeSelect:'month',
|
||||||
|
startTimeStamp:null, //开始时间
|
||||||
|
endTimeStamp:null, //结束时间
|
||||||
|
date:'凯盛玻璃控股成员企业2024生产数据',
|
||||||
|
// reportTime: '',
|
||||||
|
startTimeStamp: '',
|
||||||
|
endTimeStamp: '',
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
userName: 'userName',
|
||||||
|
nickName: '用户名',
|
||||||
|
datas:'111111'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
userName: 'userName',
|
||||||
|
nickName: '用户名',
|
||||||
|
datas: '111111'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
userName: 'userName',
|
||||||
|
nickName: '用户名',
|
||||||
|
datas: '111111'
|
||||||
|
// subcomponent: row
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// proLineList: [],
|
||||||
|
// all: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getDict()
|
||||||
|
// this.getCurrentYearFirst()
|
||||||
|
// this.getDataList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// handleTime() {
|
||||||
|
// this.$forceUpdate()
|
||||||
|
// // this.$nextTick(() => [
|
||||||
|
|
||||||
|
// // ])
|
||||||
|
// },
|
||||||
|
// getCurrentYearFirst() {
|
||||||
|
// let date = new Date();
|
||||||
|
// date.setDate(1);
|
||||||
|
// date.setMonth(0);
|
||||||
|
// this.reportTime = date;
|
||||||
|
// this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()); //开始时间
|
||||||
|
// this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间
|
||||||
|
// this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
|
||||||
|
// this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100
|
||||||
|
// },
|
||||||
|
changeTime(val) {
|
||||||
|
if (val) {
|
||||||
|
// let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别
|
||||||
|
// this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()); //开始时间
|
||||||
|
// this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间
|
||||||
|
// this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
|
||||||
|
// this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
|
||||||
|
} else {
|
||||||
|
this.listQuery.reportTime = []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async getDict() {
|
||||||
|
this.$refs.lineChart.initChart()
|
||||||
|
// 产线列表
|
||||||
|
// const res = await getCorePLList();
|
||||||
|
// this.proLineList = res.data;
|
||||||
|
},
|
||||||
|
// 获取数据列表
|
||||||
|
multipliedByHundred(str) {
|
||||||
|
console.log(str);
|
||||||
|
// console.log(str)
|
||||||
|
if ( str != 0) {
|
||||||
|
let floatVal = parseFloat(str);
|
||||||
|
if (isNaN(floatVal)) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
floatVal = Math.round(str * 10000) / 100;
|
||||||
|
let strVal = floatVal.toString();
|
||||||
|
let searchVal = strVal.indexOf('.');
|
||||||
|
if (searchVal < 0) {
|
||||||
|
searchVal = strVal.length;
|
||||||
|
strVal += '.';
|
||||||
|
}
|
||||||
|
while (strVal.length <= searchVal + 2) {
|
||||||
|
strVal += '0';
|
||||||
|
}
|
||||||
|
return parseFloat(strVal);
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
async getDataList() {
|
||||||
|
},
|
||||||
|
add0(m) {
|
||||||
|
return m < 10 ? '0' + m : m
|
||||||
|
},
|
||||||
|
format(shijianchuo) {
|
||||||
|
//shijianchuo是整数，否则要parseInt转换
|
||||||
|
var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
// console.log(time)
|
||||||
|
// var y = time.getFullYear();
|
||||||
|
// var m = time.getMonth() + 1;
|
||||||
|
// var d = time.getDate();
|
||||||
|
// var h = time.getHours();
|
||||||
|
// var mm = time.getMinutes();
|
||||||
|
// var s = time.getSeconds();
|
||||||
|
return time
|
||||||
|
},
|
||||||
|
changeTime(val) {
|
||||||
|
if (val) {
|
||||||
|
// console.log(val)
|
||||||
|
// console.log(val.setHours(7, 0, 0))
|
||||||
|
// console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000)
|
||||||
|
// let time = this.format(val.setHours(7, 0, 0))
|
||||||
|
this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
|
||||||
|
this.startTimeStamp = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
|
||||||
|
// console.log(this.listQuery.reportTime);
|
||||||
|
this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
|
||||||
|
this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
|
||||||
|
console.log(this.listQuery.reportTime);
|
||||||
|
} else {
|
||||||
|
this.listQuery.reportTime = []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//时间戳转为yy-mm-dd hh:mm:ss
|
||||||
|
timeFun(unixtimestamp) {
|
||||||
|
var unixtimestamp = new Date(unixtimestamp);
|
||||||
|
var year = 1900 + unixtimestamp.getYear();
|
||||||
|
var month = "0" + (unixtimestamp.getMonth() + 1);
|
||||||
|
var date = "0" + unixtimestamp.getDate();
|
||||||
|
return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
|
||||||
|
},
|
||||||
|
buttonClick(val) {
|
||||||
|
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
|
||||||
|
switch (val.btnName) {
|
||||||
|
case 'search':
|
||||||
|
this.listQuery.pageNo = 1;
|
||||||
|
this.listQuery.pageSize = 10;
|
||||||
|
this.getDataList();
|
||||||
|
break;
|
||||||
|
case 'export':
|
||||||
|
this.handleExport();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
// 处理查询参数
|
||||||
|
// var xlsxParam = { raw: true };
|
||||||
|
// /* 从表生成工作簿对象 */
|
||||||
|
// import('xlsx').then(excel => {
|
||||||
|
// var wb = excel.utils.table_to_book(
|
||||||
|
// document.querySelector("#exportTable"),
|
||||||
|
// xlsxParam
|
||||||
|
// );
|
||||||
|
// /* 获取二进制字符串作为输出 */
|
||||||
|
// var wbout = excel.write(wb, {
|
||||||
|
// bookType: "xlsx",
|
||||||
|
// bookSST: true,
|
||||||
|
// type: "array",
|
||||||
|
// });
|
||||||
|
// try {
|
||||||
|
// FileSaver.saveAs(
|
||||||
|
// //Blob 对象表示一个不可变、原始数据的类文件对象。
|
||||||
|
// //Blob 表示的不一定是JavaScript原生格式的数据。
|
||||||
|
// //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
|
||||||
|
// //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
|
||||||
|
// new Blob([wbout], { type: "application/octet-stream" }),
|
||||||
|
// //设置导出文件名称
|
||||||
|
// "许昌安彩日原片生产汇总.xlsx"
|
||||||
|
// );
|
||||||
|
// } catch (e) {
|
||||||
|
// if (typeof console !== "undefined") console.log(e, wbout);
|
||||||
|
// }
|
||||||
|
// return wbout;
|
||||||
|
// //do something......
|
||||||
|
// })
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* .blueTip { */
|
||||||
|
/* padding-bottom: 10px; */
|
||||||
|
/* } */
|
||||||
|
.blueTip::before{
|
||||||
|
display: inline-block;
|
||||||
|
content: '';
|
||||||
|
width: 4px;
|
||||||
|
height: 18px;
|
||||||
|
background: #0B58FF;
|
||||||
|
border-radius: 1px;
|
||||||
|
margin-right: 8PX;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
.chart{
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
162
src/views/report/yearData/lineChart.vue
Normal file
162
src/views/report/yearData/lineChart.vue
Normal file
@@ -0,0 +1,162 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2022-01-21 14:43:06
|
||||||
|
* @LastEditors: zhp
|
||||||
|
* @LastEditTime: 2024-04-12 16:50:42
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
|
||||||
|
<div :id="id" :class="className" :style="{ height: '400px', width: width }" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import 'echarts/theme/macarons' // echarts theme
|
||||||
|
// import resize from './mixins/resize'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'OverviewBar',
|
||||||
|
// mixins: [resize],
|
||||||
|
props: {
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
default: 'OverviewLine'
|
||||||
|
},
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
beilv: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '300px'
|
||||||
|
},
|
||||||
|
legendPosition: {
|
||||||
|
type: String,
|
||||||
|
default: 'center'
|
||||||
|
},
|
||||||
|
showLegend: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
legendData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// this.initChart()
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
console.log(1111)
|
||||||
|
this.chart = echarts.init(document.getElementById(this.id))
|
||||||
|
this.chart.setOption({
|
||||||
|
title: {
|
||||||
|
text: '',
|
||||||
|
// subtext: 'Fake Data'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['Rainfall', 'Evaporation']
|
||||||
|
},
|
||||||
|
// toolbox: {
|
||||||
|
// show: true,
|
||||||
|
// feature: {
|
||||||
|
// dataView: { show: true, readOnly: false },
|
||||||
|
// magicType: { show: true, type: ['line', 'bar'] },
|
||||||
|
// restore: { show: true },
|
||||||
|
// saveAsImage: { show: true }
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
// prettier-ignore
|
||||||
|
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
top: '100px',
|
||||||
|
left: "3%",
|
||||||
|
right: "10%",
|
||||||
|
bottom: "3%",
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Rainfall',
|
||||||
|
type: 'bar',
|
||||||
|
data: [
|
||||||
|
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||||
|
],
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: 'Max' },
|
||||||
|
{ type: 'min', name: 'Min' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
data: [{ type: 'average', name: 'Avg' }]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Evaporation',
|
||||||
|
type: 'bar',
|
||||||
|
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
|
||||||
|
],
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
|
||||||
|
{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
data: [{ type: 'average', name: 'Avg' }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.chart {
|
||||||
|
margin-top: -3em
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user