项目变更日志

版本 1.0.0 - 2024-11-12

• 初始版本。

---

使用说明

1. 将 压缩文件解压出 cool-charts 将文件夹移动到 cool-uni/uni_modules中 。
2. 页面 uni_modules/cool-charts/pages/demo 是图表示例

组件说明

1. 该组件是从【秋云图表】 修改而来。
2. 该组件去掉了echarts的依赖，使用vue3重构。
3. cool-chatrs 只使用 canvas 2D 方式渲染。
4. cool-chatrs 重构了uCharts的部分代码，使得二次开发更方便。
5. cool-chatrs 是轻量的图表组件，默认使用分包，如果还是过大，可以直接在pages.json中使用占位引用

{
            "path": "index",
                    "style": {
                        "navigationBarTitleText": "占位引用",
                        "componentPlaceholder": {
                            "cool-charts": "view"
                        }
                    }        
}

注意事项

• 在功能的强大上比uCharts少了点，原因是一些不常用的配置在该组件中已经去掉了。
• 目前只测试了 微信小程序、H5，其他的没有测试过，不过应该能适配全端，因为是纯 canvas api 绘制的图表，如果其他端表现异常 可观察下是否获取到canvas的绘图上下文 。
• 更多示例配置可在cool-charts\utils\config.ts 中查看

使用示例代码

		<view class="" style="min-height: 500rpx">
				<cool-charts
					type="area"
					:opts="data.terminalOpts"
					:chartData="data.terminalChartData"
				/>
			</view>

const data = reactive<{ [key: string]: any }>({
	terminalChartData: {
	categories: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'],
		series: [
			{
				name: "终端数量",
				legendShape: "circle",
				color: "#4B98FE",
				pointShape: "none",
				data: [154,584,144,1255,125,25,12,3665,452],
			},
		],
       },
	terminalOpts: {
		color: [
			"#4B98FE",
			"#00D05E",
			"#FFAC00",
			"#FB6A67",
			"#957BFE",
			"#00B9FE",
			"#FE871B",
			"#00C8B0",
			"#F674D6",
		],
		padding: [15, 15, 0, 15],
		dataLabel: false,
		xAxis: {
			disableGrid: true,
		},
		yAxis: {
			gridColor: "rgba(230,230,230,0.6)",
			disabled: false,
			disableGrid: false,
			gridType: "dash",
			dashLength: "4",
			data: [
				{
					axisLineColor: "#FFFFFF",
				},
			],
		},
		legend: {
			show: true,
			position: "top",
			float: "right",
		},
		extra: {
			area: {
				type: "curve",
				opacity: 0.9,
				addLine: true,
				width: 2,
				gradient: true,
			},
		},
	},
})