echarts的uniapp

前言

<template>
	<canvas canvas-id="canvasId" id="canvasId" class="w-500 h-500"/>
</template>
<script>
	import echarts from './charts.js';
	export default {
		data() {
			return {
				chartsWidth: 500,
				chartsHeight: 500,
			}
		}
	},
	onReady() {
		this.chartsWidth = uni.upx2px(500);
		this.chartsHeight = uni.upx2px(500);
		this.getData();//请求数据
	},
</script>

柱状图

getData() {
	let dataInfo = {
		categories:[2020,2021,2022,2023,2024],
		series:[
			{
				name:'名称',
				data:[100,200,300]
			}
		]
	}
	this.drawCharts('canvasId', dataInfo);
},
drawCharts(id, dataInfo) {
	const ctx = uni.createCanvasContext(id, this);
	new echarts({
		type: "column",//柱状图类型，'group'分组柱状图,'stack'堆叠柱状图,'meter'温度计式图
		context: ctx,
		width: this.chartsWidth,//图表宽度
		height: this.chartsHeight,//图表高度
		categories: dataInfo.categories,//显示X数据
		series: dataInfo.series,//显示Y数据
		dataLabel: false,// 是否显示图表区域内数据点上方的数据文案
		animation: true,// 是否动画展示图表
		background: "#FFFFFF",
		color: ["#404EF3", "#EE6666", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 5],// 图表边距
		enableScroll: false,
		legend: {
			show:true,//是否显示底部文字说明
			fontColor: "#FFFFFF",
       	 	position: "top",
          	float: "right",
          	fontSize: 12,
		},
		xAxis: {
			disabled: false, // 不绘制X轴 默认false
          	disableGrid: true, // 不绘制纵向网格
			axisLineColor: "#0746a3", // 坐标轴轴线颜色
          	calibration: false, // 坐标轴刻度线
          	fontColor: "#FFFFFF", // 字体颜色
          	fontSize: 13, // 字体大小
          	rotateLabel: false, //【旋转】数据点（刻度点）文字
          	rotateAngle: 45, //开启上面旋转功能后，文字旋转的角度，取值范围(-90至90)
          	// labelCount: 7,//数据点文字（刻度点）单屏幕限制显示的数量
          	// scrollShow: false, // 是否显示滚动条，配合拖拽滚动使用（即仅在启用【基本配置】的 enableScroll 时有效）
		},
		yAxis: {
			disabled: false, //不绘制Y轴
         	disableGrid: false, //不绘制横向向网格(即默认绘制网格)
         	gridType: "dash", // 横向向网格线型，可选值：'solid'实线,'dash'虚线
         	dashLength: 8, //横向网格为虚线时，单段虚线长度
         	gridColor: "#0f5681",
         	showTitle: true,
         	data: [
           		// 多Y轴配置
           		{
	             	axisLineColor: "#0746a3", // 坐标轴轴线颜色，默认#CCCCCC
	              	calibration: false, // 刻度线是否显示
	              	fontColor: "#FFFFFF", // 数据点（刻度点）字体颜色，默认#666666
	              	fontSize: 13, // 数据点（刻度点）字体大小
	              	textAlign: "right", //数据点（刻度点）相对轴线的对齐方式，可选值：'left','right','center'
	              	title: "单位(人)", // 当前Y轴标题（需要上面showTitle设置为true）
	              	titleFontSize: 13, // 标题字体大小
	              	titleOffsetY: -5, // 标题纵向偏移距离，负数为向上偏移，正数向下偏移
	              	titleOffsetX: 0, // 标题横向偏移距离，负数为向左偏移，正数向右偏移
	              	titleFontColor: "#FFFFFF", //标题字体颜色，默认#666666
	              	unit: "", //Y轴刻度值后附加单位
	              	min: 0, // 当前Y轴起始值（默认数据中的最小值）
            	},
          	],
		},
		extra: {
			column: {
				type: "group",//柱状图类型，'group'分组柱状图,'stack'堆叠柱状图,'meter'温度计式图
				width: 30,//柱状图每个柱子的图形宽度
				activeBgColor: "#FFFFFF",//当前点击柱状图的背景颜色
				activeBgOpacity: 1,// 当前点击柱状图的背景颜色透明度
				linearType: "custom",//渐变类型，可选值："none"关闭渐变,"opacity"透明渐变,"custom"自定义颜色
				seriesGap: 5,//多series每个柱子之间的间距
				categoryGap: 2,//每个category点位（X轴点）柱子组之间的间距
				linearOpacity: 0.5,//透明渐变的透明度（值范围0到1，值越小越透明）
				barBorderCircle: true,// 启用分组柱状图半圆边框
				customColor: [
					"#6AE7FD",
					"#404EF3"
				]
			}
		}
	});
},