smartFactory/pages/index/index.vue

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