添加新实例图

pages/index/index.vue

@@ -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>