uniapp 小程序模拟器 lime-charts的一些坑

Koreyoshi·

已于 2023-03-22 11:25:16 修改

阅读量1.2k

点赞数

文章标签： uni-app 小程序 echarts

于 2023-03-22 09:52:05 首次发布

原文链接：https://blog.csdn.net/Dwa_ww/article/details/119216997

版权

在uni-app中使用lime-charts集成eCharts时遇到了图表层级问题，不随页面滚动，真机调试时报错H.createEventisnotafunction，以及eCharts压缩版的兼容性问题。解决方案包括修改图表层级，使用旧版压缩后的echarts.js，并注意tooltip和series的特定限制。文章提供了问题的详细描述和解决方法。

摘要由CSDN通过智能技术生成

在 uni-app 中使用 lime-charts 生成微信小程序的一些坑

插件地址：https://ext.dcloud.net.cn/plugin?id=4899

插件目录：
在这里插入图片描述

代码.vue文件

<template>
	<view style="width:100%;height:200px">
			<l-echart ref="chart" @finished="init"></l-echart>
	</view>

</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {}
		},
		computed: {
			option() {
				return {
					legend: {
						data: ['热度', '正面', '负面']
					},
					grid: {
						left: 20,
						right: 20,
						bottom: 15,
						top: 40,
						containLabel: true
					},
					xAxis: [{
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666'
						}
					}],
					yAxis: [{
						type: 'category',
						axisTick: {
							show: false
						},
						data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666'
						}
					}],
					series: [{
							name: '热度',
							type: 'bar',
							label: {
								normal: {
									show: true,
									position: 'inside'
								}
							},
							data: [300, 270, 340, 344, 300, 320, 310],
						},
						{
							name: '正面',
							type: 'bar',
							stack: '总量',
							label: {
								normal: {
									show: true
								}
							},
							data: [120, 102, 141, 174, 190, 250, 220]
						},
						{
							name: '负面',
							type: 'bar',
							stack: '总量',
							label: {
								normal: {
									show: true,
									position: 'left'
								}
							},
							data: [-20, -32, -21, -34, -90, -130, -110]
						}
					]
				}

			},
		},
		methods: {
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chart.init(echarts);
				chart.setOption(this.option)
			}
		}
	}
</script>

遇到的问题：

1. 在模拟器上会发现 eCharts 图表层级太高，不跟随页面滚动等问题
2. 这个问题在发布后 真机打开是不存在的，
3. eCharts 图表不支持模拟器上的真机调试功能，会出现报错信息
   真机调试报错 TypeError: H.createEvent is not a function
4. 使用压缩版 echarts
   需将压缩后的 js 文件 放入 `uni_modules\lime-echart\components\l-echart\` 中
   并将文件名改为 echarts.js 即可
   压缩的时候需要注意，目前百度echarts 支持的版本使用的旧版的，5.0以下的，我使用的是 4.7.0
   可能问题：压缩如果使用的最新版本，可能会有报错
   5. 之后正常使用即可

使用百度echarts

1. tooltip： 不支持 html 模板渲染，只支持字符串，
1. 支持属性：trigger、backgroundColor 、padding、textStyle：color、formatter:  不支持 html 模板渲染，只支持字符串，
2. 不支持属性：borderColor、borderWidth、extraCssText
2. series：不支持areaStyle：color

原文链接：https://blog.csdn.net/Dwa_ww/article/details/119216997