1

pages/plan/index.vue

@@ -0,0 +1,509 @@
+<template>
+	<view class="page">
+		<view class="chart" v-if="testData.length">
+			<cusEcharts :option="testOption"></cusEcharts>
+		</view>
+		<view class="chart" v-if="kxData.length">
+			<cusEcharts :option="kxOption"></cusEcharts>
+		</view>
+		<view class="chart" v-if="kxData2.length">
+			<cusEcharts :option="kxOption2"></cusEcharts>
+		</view>
+		<tabbar :tabbarIndex="1"></tabbar>
+	</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,
+				kxData2:[],
+				kxOption2:null
+			}
+		},
+		mounted() {
+			this.init();
+		},
+		methods:{
+			init(){
+				this.initTestChart();
+				this.initKxChart();
+				this.initKxChart2();
+			},
+			initTestChart(){
+				this.testData = [150, 230, 224, 218, 135, 147, 260];
+				this.testOption = {
+				  xAxis: {
+					type: 'category',
+					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+				  },
+				  yAxis: {
+					type: 'value'
+				  },
+				  series: [
+					{
+					  data: this.testData,
+					  type: 'line'
+					}
+				  ]
+				};
+			},
+			initKxChart(){
+				this.kxData = [270,220,350,210,280,400];
+				const offsetX = 4;
+				const offsetY = 2;
+				// 绘制左侧面
+				const CubeLeft = echarts.graphic.extendShape({
+					shape: {
+						x: 0,
+						y: 0,
+					},
+					buildPath: function (ctx, shape) {
+						// 会canvas的应该都能看得懂，shape是从custom传入的
+						const xAxisPoint = shape.xAxisPoint;
+						const c0 = [shape.x, shape.y];
+						const c1 = [shape.x - offsetX, shape.y - offsetY];
+						const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+						const c3 = [xAxisPoint[0], xAxisPoint[1]];
+						ctx
+							.moveTo(c0[0], c0[1])
+							.lineTo(c1[0], c1[1])
+							.lineTo(c2[0], c2[1])
+							.lineTo(c3[0], c3[1])
+							.closePath();
+					},
+				});
+				// 绘制右侧面
+				const CubeRight = echarts.graphic.extendShape({
+					shape: {
+						x: 0,
+						y: 0,
+					},
+					buildPath: function (ctx, shape) {
+						const xAxisPoint = shape.xAxisPoint;
+						const c1 = [shape.x, shape.y];
+						const c2 = [xAxisPoint[0], xAxisPoint[1]];
+						const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+						const c4 = [shape.x + offsetX, shape.y - offsetY];
+						ctx
+							.moveTo(c1[0], c1[1])
+							.lineTo(c2[0], c2[1])
+							.lineTo(c3[0], c3[1])
+							.lineTo(c4[0], c4[1])
+							.closePath();
+					},
+				});
+				// 绘制顶面
+				const CubeTop = echarts.graphic.extendShape({
+					shape: {
+						x: 0,
+						y: 0,
+					},
+					buildPath: function (ctx, shape) {
+						const c1 = [shape.x, shape.y];
+						const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+						const c3 = [shape.x, shape.y - offsetX];
+						const c4 = [shape.x - offsetX, shape.y - offsetY];
+						ctx
+							.moveTo(c1[0], c1[1])
+							.lineTo(c2[0], c2[1])
+							.lineTo(c3[0], c3[1])
+							.lineTo(c4[0], c4[1])
+							.closePath();
+					},
+				});
+
+				// 注册三个面图形
+				echarts.graphic.registerShape("CubeLeft", CubeLeft);
+				echarts.graphic.registerShape("CubeRight", CubeRight);
+				echarts.graphic.registerShape("CubeTop", CubeTop);
+
+				this.kxOption = {
+					tooltip: {
+						trigger: 'axis',
+						backgroundColor: 'rgba(13,5,30,.6)',
+						borderWidth: 1,
+						borderColor: '#4ddd8f',
+						padding: 5,
+						textStyle: {
+							color: '#fff'
+						}
+					},
+					legend: {
+						right: 170,
+						top: 15,
+						textStyle: {
+							fontSize: 12,
+							color: '#A7BFDE'
+						},
+						itemWidth: 6,
+						itemHeight: 8
+					},
+					grid: {
+						left: '4%',
+						right: '3%',
+						top: '25%',
+						bottom: '8%',
+						containLabel: true,
+					},
+					xAxis: {
+						type: 'category',
+						data: ['3月', '4月', '5月', '6月', '7月', '8月'],
+						axisPointer: {
+							type: 'shadow'
+						},
+						axisTick: {
+							show: true,
+							length: 4,
+							lineStyle: {
+								color: 'rgba(199,211,229,0.5)'
+							}
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(199,211,229,0.5)'
+							}
+						},
+						axisLabel: {
+							color: '#c7d3e5'
+						}
+					},
+					yAxis: {
+						name:'（单位）',
+						type: 'value',
+						nameTextStyle: {
+							fontSize: 12,
+							color: '#C6D7F1',
+							fontWeight: 400,
+						},
+						nameGap: 25,
+						axisLine: {
+							show: false,
+							lineStyle: {
+								width: 1,
+								color: '#545454'
+							}
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: 'rgba(199,211,229,0.3)',
+								width: 1,
+								type: 'dashed'
+							}
+						},
+						axisTick: {
+							show: false
+						},
+						axisLabel: {
+							fontSize: 12,
+							color: '#c7d3e5'
+						}
+					},
+					series: [
+						{
+							name: "国内",
+							type: "custom",
+							renderItem: (params, api) => {
+								const location = api.coord([api.value(0), api.value(1)]);
+								const xAxisPoint = api.coord([api.value(0), 0]);
+								const distance = 7;
+								return {
+									type: "group",
+									children: [{
+											type: "CubeLeft",
+											shape: {
+												api,
+												xValue: api.value(0),
+												yValue: api.value(1),
+												x: location[0] + distance,
+												y: location[1],
+												xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
+											},
+											style: {
+												fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+														offset: 0,
+														color: '#0B5FA9',
+													},
+													{
+														offset: 1,
+														color: 'rgba(11,95,169,0)'
+													}
+												]),
+											},
+										},
+										{
+											type: "CubeRight",
+											shape: {
+												api,
+												xValue: api.value(0),
+												yValue: api.value(1),
+												x: location[0] + distance,
+												y: location[1],
+												xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
+											},
+											style: {
+												fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+														offset: 0,
+														color: '#088BFF',
+													},
+													{
+														offset: 1,
+														color: 'rgba(8,139,255,0)'
+													}
+												]),
+											},
+										},
+										{
+											type: "CubeTop",
+											shape: {
+												api,
+												xValue: api.value(0),
+												yValue: api.value(1),
+												x: location[0] + distance,
+												y: location[1],
+												xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
+											},
+											style: {
+												fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+														offset: 0,
+														color: '#61B5FF',
+													},
+													{
+														offset: 1,
+														color: '#61B5FF'
+													}
+												]),
+											},
+										},
+									],
+								};
+							},
+							itemStyle: {
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: "#00BFF4",
+									},
+									{
+										offset: 1,
+										color: "#A5E2FF",
+									},
+								]),
+							},
+							data: [410,330,210,210,480,190],
+						},
+						{
+							name: "出口",
+							type: "custom",
+							renderItem: (params, api) => {
+								const location = api.coord([api.value(0), api.value(1)]);
+								const xAxisPoint = api.coord([api.value(0), 0]);
+								const distance = 7;
+								return {
+									type: "group",
+									children: [{
+											type: "CubeLeft",
+											shape: {
+												api,
+												xValue: api.value(0),
+												yValue: api.value(1),
+												x: location[0] - distance,
+												y: location[1],
+												xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+											},
+											style: {
+												fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+														offset: 0,
+														color: '#28A9A2',
+													},
+													{
+														offset: 1,
+														color: 'rgba(40,169,162,0)'
+													}
+												]),
+											},
+										},
+										{
+											type: "CubeRight",
+											shape: {
+												api,
+												xValue: api.value(0),
+												yValue: api.value(1),
+												x: location[0] - distance,
+												y: location[1],
+												xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+											},
+											style: {
+												fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+														offset: 0,
+														color: '#35FFF4',
+													},
+													{
+														offset: 1,
+														color: 'rgba(53,255,244,0)'
+													}
+												]),
+											},
+										},
+										{
+											type: "CubeTop",
+											shape: {
+												api,
+												xValue: api.value(0),
+												yValue: api.value(1),
+												x: location[0] - distance,
+												y: location[1],
+												xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+											},
+											style: {
+												fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+														offset: 0,
+														color: '#7EFFF8',
+													},
+													{
+														offset: 1,
+														color: '#7EFFF8'
+													}
+												]),
+											},
+										},
+									],
+								};
+							},
+							itemStyle: {
+								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: "#6AAAFF",
+									},
+									{
+										offset: 1,
+										color: "#046EFE",
+									},
+								]),
+							},
+							data: this.kxData,
+						}
+					],
+				};
+			},
+			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>
+
+<style scoped lang="less">
+	.chart{
+		width: 100%;
+		height: 300px;
+		margin-top: 50px;
+		&:first-child{
+			margin-top: 0;
+		}
+	}
+</style>