适配uniapp的图表插件——Lime UI

一款基于 uniapp 的多端兼容组件,支持nvue,详情可参考 官方地址

  • 使用注意事项:
  • 插件用到了 css 预编译器 stylus 要先安装
  • 对 echarts 内部的方法和样式做过改动,只是使其兼容uniapp
  • 件使用了 webview 支持 nvue

安装

在uniapp 插件市场 找到 百度图表 导入即可

使用方式

1、通过ref获取节点组件内部 init 方法生成图表

<l-echart ref="chart">l-echart>
this.$refs.chart.init(config => {...code})

2、通过ref获取节点组件内部 setChart 方法并 设置 is-enable(启用初始化) 生成图表

<l-echart ref="chart" is-enable>l-echart>
this.$refs.chart.setChart(chart => {...code})

3、通过props 的 onInit

<l-echart :onInit="onInit">l-echart>
data() {
	return {
		onInit: config => {
			...code
		}
	}
}

4、通过 props 的 ec

<l-echart :ec="ec">l-echart>
data() {
	return {
		ec: {
			option: {
				...code
			}
		}
	}
}

你可能感兴趣的:(Uniapp,uni-app)