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

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

提前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
						}
					]
				})

			},

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-25 12:58:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-25 12:58:03       101 阅读
  3. 在Django里面运行非项目文件

    2024-01-25 12:58:03       82 阅读
  4. Python语言-面向对象

    2024-01-25 12:58:03       91 阅读

热门阅读

  1. 看完「繁花」我悟了:认真赚钱,终成大佬

    2024-01-25 12:58:03       62 阅读
  2. Git搭建

    Git搭建

    2024-01-25 12:58:03      52 阅读
  3. 《设计模式的艺术》笔记 - 状态模式

    2024-01-25 12:58:03       44 阅读
  4. C++高级编程——STL:list容器、set容器和map容器

    2024-01-25 12:58:03       43 阅读
  5. SpringMVC知识点简单规整

    2024-01-25 12:58:03       52 阅读
  6. Swiper轮播图后端接口实现

    2024-01-25 12:58:03       46 阅读
  7. LFU算法

    LFU算法

    2024-01-25 12:58:03      54 阅读
  8. 聊聊PowerJob的MapProcessor

    2024-01-25 12:58:03       40 阅读
  9. 设计模式三(原型模式)

    2024-01-25 12:58:03       61 阅读
  10. Android studio 之 对话框

    2024-01-25 12:58:03       54 阅读