Skip to content

C
country-energy-ecological-construction
Commit 4719fc08 authored by 范加坤's avatar 范加坤
Browse files
Options

echart组件

parent 3f822f0a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 568 additions and 244 deletions
package-lock.json
View file @ 4719fc08
This diff is collapsed.
package.json
View file @ 4719fc08
......@@ -15,7 +15,10 @@
"mapbox-gl": "1.13.1",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
"vuex": "^3.4.0",
"echarts": "^5.1.1",
"echarts-gl": "^2.0.4",
"element-resize-detector": "^1.2.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
......
src/assets/css/index.less
View file @ 4719fc08
......@@ -32,7 +32,58 @@ i {
border-color: @font-color !important;
}
}
.el-picker-panel {
box-shadow: 0 2px 12px 0 rgba(0, 100, 200, 0.9)!important;
background: rgba(0, 100, 200, 0.45)!important;
border-color: @main-color;
color: @font-color!important;
.el-picker-panel__icon-btn {
color: @active-color!important;
}
.el-date-picker__header-label {
color: inherit;
font-size: 1.7vh!important;
}
table {
td {
.cell {
font-size: 1.3vh!important;
color: inherit;
}
}
td.current {
color: @active-color!important;
}
}
}
.el-picker-panel__body {
background: rgba(0, 100, 200, 0.45)!important;
}
.el-date-picker {
color: #fff!important;
}
.el-input__inner__picker {
cursor: pointer!important;
position: relative!important;
padding: 0!important;
font-size: 36px!important;
color: @font-light-color!important;
font-family: timeFont!important;
height: 100%!important;
line-height: 45px!important;
box-shadow: 0 0px 8px 0 rgba(0, 100, 200, 0.9)!important;
padding: 0 25px!important;
border: 0.1vh solid @main-color!important;
border-radius: 25px!important;
&:hover {
border-color: #fff!important;
}
}
.el-button.active {
background-color: @active-color !important;
border-color: @font-color !important;
......@@ -274,65 +325,9 @@ i {
color: @main-color;
}
// 边框修饰性样式
.border {
position: absolute;
width: 1.8vh;
height: 1.8vh;
background-color: transparent;
border: 0.3vh solid @border-decora-color;
border-radius: 0.2vh;
}
.border-left-top {
border-bottom: none;
border-right: none;
left: 0;
top: 0;
}
.border-right-top {
border-bottom: none;
border-left: none;
right: 0;
top: 0;
}
.border-left-bottom {
border-top: none;
border-right: none;
left: 0;
bottom: 0;
}
.border-right-bottom {
border-top: none;
border-left: none;
right: 0;
bottom: 0;
}
// 各模块简单基本样式
.part {
height: 100%;
padding: 1.2vh;
box-sizing: border-box;
position: relative;
background: @linear-color;
.title {
text-align: left;
padding-top: 0.5vh;
padding-left: 0.5vh;
font-size: 1.8vh;
color: #8fccff;
i {
color: #aedaff;
margin-right: 0.2vh;
}
}
}
// 地区选择列表
.el-tag {
......
src/components/DateWidget/DateWidget.vue
View file @ 4719fc08
......@@ -8,6 +8,7 @@
value-format="yyyy"
:clearable="false"
@change="clearPlay"
:picker-options="pickerOptions"
></el-date-picker>
<label class="el-input__inner__picker" @click="showDatePicker">
{{ curTime }}
......@@ -23,32 +24,55 @@
export default {
data() {
return {
dateLevel: 'year',
curTime: '',
play: false
curTime: '2009',
play: false,
range: ['2008', '2013'],
pickerOptions: {
disabledDate(time) {
return (
new Date('2008').getTime() > time.getTime() ||
new Date('2015').getTime() < time.getTime()
)
}
}
}
},
methods: {
showDatePicker() {
console.log('asdfsadf')
console.log(this.$refs.datePicker.focus)
this.$refs.datePicker.focus()
console.log(this.$refs.datePicker)
},
// 清除播放事件
clearPlay(e) {
console.log(e)
clearPlay() {
this.play = false
// clearInterval(this.timer)
clearInterval(this.timer)
},
timePlay() {
console.log('ss')
this.play = !this.play
if (this.play) {
this.timer = setInterval(() => {
console.log(this.curTime)
if (Number(this.curTime) < Number(this.range[1])) {
this.curTime++
} else {
this.clearPlay()
}
}, 1000)
} else {
this.clearPlay()
}
}
}
}
</script>
<style lang="less" scoped>
@import url('../../assets/css/public.less');
<style lang="less">
// @import url('../../assets/css/public.less');
/deep/.el-picker-panel__body {
background: rgba(0, 100, 200, 0.45);
}
.time-info {
cursor: pointer;
flex-direction: row;
......@@ -67,54 +91,6 @@ export default {
bottom: 0;
width: 0;
}
/deep/.el-date-picker {
color: #fff;
}
.el-input__inner__picker {
cursor: pointer;
position: relative;
padding: 0;
font-size: 36px;
color: @font-light-color;
font-family: timeFont;
height: 100%;
line-height: 45px;
box-shadow: 0 0px 8px 0 rgba(0, 100, 200, 0.9);
padding: 0 25px;
border: 0.1vh solid @main-color;
border-radius: 25px;
&:hover {
border-color: #fff;
}
}
/deep/.el-picker-panel {
box-shadow: 0 2px 12px 0 rgba(0, 100, 200, 0.9);
background: rgba(0, 100, 200, 0.45);
border-color: @main-color;
color: @font-color;
.el-picker-panel__icon-btn {
color: @active-color;
}
.el-date-picker__header-label {
color: inherit;
font-size: 1.7vh;
}
table {
td {
.cell {
font-size: 1.3vh;
color: inherit;
}
}
td.current {
color: @active-color;
}
}
}
i {
cursor: pointer;
......
src/components/Echart/Echarts.vue 0 → 100644
View file @ 4719fc08
<template>
<div class="chart" ref="chart"></div>
</template>
<script>
// import echarts from "echarts";
import * as echarts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
name: "Echarts2D",
props: {
options: {
type: Object,
default: () => {},
},
},
data() {
return {
chart: null,
functionStack: [],
canDo: false,
};
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chart);
let erd = elementResizeDetectorMaker();
erd.listenTo(this.$refs.chart, () => {
this.chart.resize();
});
this.functionStack.forEach((e) => {
e.func(e.param);
});
this.canDo = true;
},
reloadChart() {
this.$nextTick(() => {
if (this.canDo) {
this.chart.setOption(this.options);
} else {
this.chart.setOption(this.options);
}
});
},
},
watch: {
options: {
handler() {
this.reloadChart();
},
deep: true,
},
},
async mounted() {
await this.initChart();
let that = this;
// 扩大echarts点击面的大小，即点击灰色面也可以触发
that.chart.getZr().on("click", function (params) {
const pointInPixel = [params.offsetX, params.offsetY];
if (that.chart.containPixel("grid", pointInPixel)) {
/*此处添加具体执行代码*/
const pointInGrid = that.chart.convertFromPixel(
{ seriesIndex: 0 },
pointInPixel
);
//X轴序号
const xIndex = pointInGrid[0];
//获取当前图表的option
const op = that.chart.getOption();
let name = "";
//获得图表中我们想要的数据 判断数据在x轴还是y轴
if (op.xAxis[0].type === "category") {
name = op.xAxis[0].data[xIndex];
} else {
name = op.yAxis[0].data[xIndex];
}
that.$emit("barClick", { name, data: params });
}
});
this.reloadChart();
},
};
</script>
<style scoped>
.chart {
width: 100%;
height: 100%;
}
</style>
src/components/PartInfo/PartInfo.vue 0 → 100644
View file @ 4719fc08
<template>
<div class="part info">
<label class="title" for="title">
<i class="el-icon-s-flag"></i>
{{ param.title }}
</label>
<label class="main" for="pm">
{{ param.value }}
<!-- <label class="sub">吨</label> -->
</label>
<div class="border border-left-top"></div>
<div class="border border-right-top"></div>
<div class="border border-left-bottom"></div>
<div class="border border-right-bottom"></div>
</div>
</template>
<script>
export default {
props: {
param: {
type: Object
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
src/components/PartWrap/PartWrap.vue 0 → 100644
View file @ 4719fc08
<template>
<div class="part info">
<label class="title" for="title">
<i class="el-icon-s-flag"></i>
sdf
</label>
<div>
<slot></slot>
</div>
<div class="border border-left-top"></div>
<div class="border border-right-top"></div>
<div class="border border-left-bottom"></div>
<div class="border border-right-bottom"></div>
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
// 各模块简单基本样式
.part {
height: 100%;
padding: 1.2vh;
box-sizing: border-box;
position: relative;
background: @linear-color;
.title {
text-align: left;
padding-top: 0.5vh;
padding-left: 0.5vh;
font-size: 1.8vh;
color: #8fccff;
i {
color: #aedaff;
margin-right: 0.2vh;
}
}
}
// 边框修饰性样式
.border {
position: absolute;
width: 1.8vh;
height: 1.8vh;
background-color: transparent;
border: 0.3vh solid @border-decora-color;
border-radius: 0.2vh;
}
.border-left-top {
border-bottom: none;
border-right: none;
left: 0;
top: 0;
}
.border-right-top {
border-bottom: none;
border-left: none;
right: 0;
top: 0;
}
.border-left-bottom {
border-top: none;
border-right: none;
left: 0;
bottom: 0;
}
.border-right-bottom {
border-top: none;
border-left: none;
right: 0;
bottom: 0;
}
.info {
display: flex;
flex-direction: column;
padding: 1.5vh 0.5vh;
position: relative;
// width: 15vw;
margin-bottom: 1vh;
label {
text-align: center;
line-height: 90px;
height: 90px;
.sub {
font-size: 14px;
}
}
label.title {
// width: 100%;
// font-size: 1.4vh;
padding-left: 10px;
height: 2vh;
line-height: 1.8vh;
color: @main-color;
text-align: left;
padding-top: 0.5vh;
// padding-left: 0.5vh;
font-size: 1.8vh;
color: #8fccff;
}
label.main {
text-align: left;
margin-left: 32px;
color: @font-light-color;
font-family: timeFont;
font-size: 47px;
}
}
</style>
src/pages/methaneUpgrade/index.vue
View file @ 4719fc08
......@@ -2,34 +2,80 @@
<!-- 农村沼气转型升级 -->
<div class="contain">
<DateWidget class="date-widget" />
<!-- <PartInfo class="part-info" :param="{ title: 'adf', value: 'adf' }" /> -->
<div v-show="false" style="width: 100%; height: 400px">
<Echart ref="echart3" :options="echart3_option" />
</div>
<div class="echartqq">
<PartWrap
><div style="width: 600px; height: 400px">
<Echart ref="echart3" :options="echart3_option" /></div
></PartWrap>
</div>
<div>
<PartWrap><div style="width: 100; height: 100px">asdf</div></PartWrap>
</div>
</div>
</template>
<script>
import DateWidget from "../../components/DateWidget/DateWidget.vue"
import DateWidget from '../../components/DateWidget/DateWidget.vue'
// import PartInfo from '../../components/PartInfo/PartInfo.vue'
import Echart from '../../components/Echart/Echarts.vue'
import PartWrap from '../../components/PartWrap/PartWrap.vue'
export default {
name: 'MethaneUpgrade',
data() {
return {
dateLevel: 'year',
curTime: '',
play: false
play: false,
echart3_option: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
}
},
components: {
DateWidget
DateWidget,
// PartInfo,
Echart,
PartWrap
},
methods: {
}
methods: {}
}
</script>
<style lang="less" scoped>
// @import url('../../assets/css/public.less');
.date-widget{
position: absolute;
top: 12vh;
.contain {
width: 100%;
height: 100%;
position: relative;
.date-widget {
position: absolute;
top: 12vh;
}
// .part-info {
// position: absolute;
// top: 32vh;
// }
.echartqq {
position: absolute;
bottom: 3vh;
left: 3vh;
z-index: 21;
}
}
</style>
\ No newline at end of file
src/views/Home.vue
View file @ 4719fc08
......@@ -10,10 +10,7 @@
<div class="a-menu" @click="$router.push('/methane_upgrade')">
沼气
</div>
<div
class="a-menu"
@click="$router.push('/biomass_energy_warm')"
>
<div class="a-menu" @click="$router.push('/biomass_energy_warm')">
生物
</div>
<div
......@@ -56,10 +53,14 @@ export default {
</script>
<style scoped lang="less">
@import url('../assets/css/public.less');
// @import url('../assets/css/public.less');
.body {
width: 100%;
height: 100%;
.content-cont {
width: 100%;
height: 100%;
}
.contain {
position: relative;
.header {
......@@ -102,8 +103,8 @@ export default {
align-items: center;
margin-right: 40px;
.a-menu {
width:50px ;
height:50px ;
width: 50px;
height: 50px;
background-color: @main-color;
margin-right: 20px;
border-radius: 50%;
......
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