uniapp echarts ucharts 图表问题

最新推荐文章于 2024-07-19 17:39:08 发布

dogel

最新推荐文章于 2024-07-19 17:39:08 发布

阅读量2k

点赞数

分类专栏： uni-app 文章标签： js vue echarts ucharts renderjs

本文链接：https://blog.csdn.net/dogel/article/details/116192657

版权

本文详细解析了在uniapp中如何使用Echarts图表，包括简单介绍view、普通script和模块化script的内容及作用，重点阐述了Echarts的渲染过程，以及在实际项目中应注意的事项，如设置图表高度、数据更新等。同时，提供了多图表更新的示例代码，帮助开发者更好地理解和应用Echarts。

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

最近项目需要用到图表统计数据，

uniapp 提供的方法有两种：一种是简单一些的ucharts图表，在uniapp的插件市场可以找到，方法简单，可以在线配置，然后吧对应的配置项复制下来即可使用，但是整体是一个简化版echarts，功能并不齐全，本次项目使用的是另外一种 echarts，直接把示例页面代码复制进来。

本篇主要是讲解各部分代码的实际作用，以便使用出现问题时能更简单的找到问题所在。

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
		<button @click="changeOption">更新数据</button>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: {
					title: {
						text: 'ECharts 入门示例'
					},
					tooltip: {},
					legen