|
|
@@ -10,7 +10,7 @@
|
|
|
<dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="d-flex chartStyle">
|
|
|
+ <div class="d-flex chartStyle" @click="openchart1">
|
|
|
<!--渐变折线图-->
|
|
|
<div id="oneGTGyChart" style="width:100%;height:2rem;"></div>
|
|
|
</div>
|
|
|
@@ -27,6 +27,9 @@
|
|
|
<div id="fourGTGyChart" style="width:100%;height:2rem;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <el-dialog :visible.sync="openchart" @open="open" width="1600px" append-to-body>
|
|
|
+ <div id="oneGTGyChart1" style="width:100%;height:600px;"></div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -46,6 +49,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ openchart: false,
|
|
|
config: {
|
|
|
lineWidth: 30,
|
|
|
activeRadius: "80%",
|
|
|
@@ -121,6 +125,14 @@ export default {
|
|
|
this.initFourChart();
|
|
|
},
|
|
|
methods: {
|
|
|
+ open(){
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initOneChart1()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openchart1(){
|
|
|
+ this.openchart = true
|
|
|
+ },
|
|
|
changeTiming() {
|
|
|
setInterval(() => {
|
|
|
this.changeNumber();
|
|
|
@@ -183,6 +195,58 @@ export default {
|
|
|
]
|
|
|
})
|
|
|
},
|
|
|
+ initOneChart1() {
|
|
|
+ console.log("====")
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ this.chart1 = this.echarts.init(document.getElementById('oneGTGyChart1'))
|
|
|
+ const dateDay = [];
|
|
|
+ const dateNum = [];
|
|
|
+ for (let i = 0; i < this.monthData.length; i++) {
|
|
|
+ dateDay[i] = this.monthData[i].dateDay
|
|
|
+ dateNum[i] = this.monthData[i].gtg1Lv
|
|
|
+ }
|
|
|
+ this.chart1.setOption({
|
|
|
+ /* 周围边距 */
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '3%',
|
|
|
+ bottom: '1%',
|
|
|
+ top: '13%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
|
|
|
+ data:dateDay
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 23, 147, 123],
|
|
|
+ data:dateNum,
|
|
|
+ type: 'line',
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgb(78,109,60)'
|
|
|
+ },
|
|
|
+ symbol: "none",
|
|
|
+ areaStyle: {
|
|
|
+ color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgb(207,243,68)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgb(119,189,74)'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ },
|
|
|
initTwoChart() {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
this.chart = this.echarts.init(document.getElementById('twoGTGyChart'))
|
