uniapp 使用echarts做折线图条形图。

发布时间:2024年01月24日

在这里插入图片描述
在这里插入图片描述

提前10天把中烟活动做完了,以为能打酱油到除夕那天,结果又要做什么数据看板,方便烟草领导过年查看数据,还只给5天时间,真实压榨剥削啊,下辈子再也不‘拍黄片’了,不!下份工作我就转前端了,php我再也不写了。

1.安装echarts 依赖 npm install echarts

2.引用 import * as echarts from ‘echarts’;

3.上代码

				<canvas :style="{width: '100%', height: '500rpx'}" id="mychart" canvas-id="mychart"
					:canvas-type="canvasType"></canvas>

			chart() {


				const ctx = document.getElementById('mychart');
				const chart = echarts.init(ctx);
				chart.setOption({
					grid: {
						// 设置图表距离顶部,左侧,右侧和底部的高度
						top: '50rpx',
						left: '50rpx',
						right: '50rpx',
						bottom: '50rpx',

					},
					color: ["#2363FF", "#03C6D4", "#6B49F5"],
					title: {
						left: "center",
						text: this.ChartDatatext,
					},
					tooltip: {
						width: '100%',
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					legend: {
						bottom: 0,
						itemWidth: 15,
						itemHeight: 8,
						itemGap: 40,
						data: ['小盒扫码数', '条盒扫码数', '总扫码数']
					},
					xAxis: [{
						type: 'category',
						data: this.tongdate,
						axisPointer: {
							type: 'shadow'
						}
					}],
					yAxis: [{
							type: 'value',
							name: '',
							min: 0,
							//max: 0,
							max: function(value) {
								return Math.ceil(value.max * 1.2);
							},
							interval: 1000,
							axisLabel: {
								formatter: '{value}'
							}
						},

					],
					series: [{
							name: '小盒扫码数',
							type: 'bar',
							data: this.box
						},
						{
							name: '条盒扫码数',
							type: 'bar',
							data: this.bar
						},
						{
							name: '总扫码数',
							type: 'line',
							data: this.all
						}
					]
				})

			},
文章来源:https://blog.csdn.net/qq_34716929/article/details/135825152
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。