|
@@ -1,16 +1,16 @@
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<div>
|
|
- <div id="echarts"></div>
|
|
|
|
|
|
+ <jt-echarts style="width: 320rem;height: 200rem;margin:10rem;" :chartData="option"></jt-echarts>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import * as echarts from "echarts";
|
|
|
|
|
|
+ // import * as echarts from "echarts";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
-
|
|
|
|
|
|
+ option: {}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {},
|
|
created() {},
|
|
@@ -20,10 +20,10 @@
|
|
methods: {
|
|
methods: {
|
|
|
|
|
|
typeCharts0() {
|
|
typeCharts0() {
|
|
- let option = this.getOption();
|
|
|
|
- var chartDom = document.getElementById('echarts');
|
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
|
- myChart.setOption(option, true);
|
|
|
|
|
|
+ this.option = this.getOption();
|
|
|
|
+ // var chartDom = document.getElementById('echarts');
|
|
|
|
+ // var myChart = echarts.init(chartDom);
|
|
|
|
+ // myChart.setOption(option, true);
|
|
},
|
|
},
|
|
getOption(data) {
|
|
getOption(data) {
|
|
let option = {
|
|
let option = {
|
|
@@ -42,13 +42,13 @@
|
|
fontSize: 12,
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
data: [{
|
|
data: [{
|
|
- name: '上月(kw/h)',
|
|
|
|
|
|
+ name: '上年(kw/h)',
|
|
textStyle: {
|
|
textStyle: {
|
|
color: "#2B80FF "
|
|
color: "#2B80FF "
|
|
}
|
|
}
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- name: '本月(kw/h)',
|
|
|
|
|
|
+ name: '本年(kw/h)',
|
|
textStyle: {
|
|
textStyle: {
|
|
color: "#3DF3C4"
|
|
color: "#3DF3C4"
|
|
}
|
|
}
|
|
@@ -76,24 +76,39 @@
|
|
xAxis: {
|
|
xAxis: {
|
|
type: 'category',
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
boundaryGap: false,
|
|
- data: ['一月', '二月', '三月', '四月', '五月', '六月']
|
|
|
|
|
|
+ data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
|
|
|
+ axisLabel: {
|
|
|
|
+ //x轴文字的配置
|
|
|
|
+ show: true,
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: "rgba(255,225,255,1)",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
},
|
|
},
|
|
yAxis: {
|
|
yAxis: {
|
|
- type: 'value'
|
|
|
|
|
|
+ type: 'value',
|
|
|
|
+ axisLabel: {
|
|
|
|
+ //x轴文字的配置
|
|
|
|
+ show: true,
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: "rgba(255,225,255,1)",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
},
|
|
},
|
|
series: [{
|
|
series: [{
|
|
- name: '上月(kw/h)',
|
|
|
|
|
|
+ name: '上年(kw/h)',
|
|
type: 'line',
|
|
type: 'line',
|
|
// stack: 'Total',
|
|
// stack: 'Total',
|
|
data: [1000, 1500, 1300, 1700, 1600, 1200]
|
|
data: [1000, 1500, 1300, 1700, 1600, 1200]
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- name: '本月(kw/h)',
|
|
|
|
|
|
+ name: '本年(kw/h)',
|
|
type: 'line',
|
|
type: 'line',
|
|
// stack: 'Total',
|
|
// stack: 'Total',
|
|
data: [1200, 1800, 1400, 1350, 1100, 1500]
|
|
data: [1200, 1800, 1400, 1350, 1100, 1500]
|
|
},
|
|
},
|
|
- ]
|
|
|
|
|
|
+ ],
|
|
|
|
+
|
|
};
|
|
};
|
|
return option;
|
|
return option;
|
|
}
|
|
}
|