|
|
@@ -6,18 +6,24 @@
|
|
|
<view class="chart" v-if="kxData.length">
|
|
|
<cusEcharts :option="kxOption"></cusEcharts>
|
|
|
</view>
|
|
|
+ <view class="chart" v-if="kxData2.length">
|
|
|
+ <cusEcharts :option="kxOption2"></cusEcharts>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from "echarts";
|
|
|
+ import aqiData from '@/static/js/aqi-beijing.js'
|
|
|
export default {
|
|
|
data(){
|
|
|
return {
|
|
|
testData:[],
|
|
|
testOption:null,
|
|
|
kxData:[],
|
|
|
- kxOption:null
|
|
|
+ kxOption:null,
|
|
|
+ kxData2:[],
|
|
|
+ kxOption2:null
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -27,6 +33,7 @@
|
|
|
init(){
|
|
|
this.initTestChart();
|
|
|
this.initKxChart();
|
|
|
+ this.initKxChart2();
|
|
|
},
|
|
|
initTestChart(){
|
|
|
this.testData = [150, 230, 224, 218, 135, 147, 260];
|
|
|
@@ -385,6 +392,106 @@
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
+ initKxChart2(){
|
|
|
+ this.kxData2 = [0];
|
|
|
+ let data = aqiData;
|
|
|
+ this.kxOption2 = {
|
|
|
+ title: {
|
|
|
+ text: 'Beijing AQI',
|
|
|
+ left: '1%'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '10%',
|
|
|
+ right: '150px',
|
|
|
+ bottom: '20%'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: data.map(function (item) {
|
|
|
+ return item[0];
|
|
|
+ })
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ startValue: '2014-06-01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'inside'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ visualMap: {
|
|
|
+ top: 50,
|
|
|
+ right: 10,
|
|
|
+ pieces: [
|
|
|
+ {
|
|
|
+ gt: 0,
|
|
|
+ lte: 50,
|
|
|
+ color: '#93CE07'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gt: 50,
|
|
|
+ lte: 100,
|
|
|
+ color: '#FBDB0F'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gt: 100,
|
|
|
+ lte: 150,
|
|
|
+ color: '#FC7D02'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gt: 150,
|
|
|
+ lte: 200,
|
|
|
+ color: '#FD0100'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gt: 200,
|
|
|
+ lte: 300,
|
|
|
+ color: '#AA069F'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ gt: 300,
|
|
|
+ color: '#AC3B2A'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ outOfRange: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: {
|
|
|
+ name: 'Beijing AQI',
|
|
|
+ type: 'line',
|
|
|
+ data: data.map(function (item) {
|
|
|
+ return item[1];
|
|
|
+ }),
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#333'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ yAxis: 50
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yAxis: 300
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
