uniapp使用echarts做数据统计遇到的问题

uniapp怎么引入echarts？

uniapp是不能直接使用echarts来做数据统计的，需要引入renderjs-echarts-demo插件，只支持H5和APP[https://ext.dcloud.net.cn/search?q=renderjs-echarts-demo]

使用hbuilder导入插件之后就可以看出只有echarts.js是有用的，只需要将这个js文件放入自己的static文件夹就可以了。

在template写入对应的组件，prop就是对应的参数配置，将参数配置定义在data中。

<view  :prop="daily_option" :change:prop="echarts.updateDailyChart" id="daily" class="echarts"></view>

创建一个vue页面, 添加多一个script，module=“echarts” lang=“renderjs”

<script module="echarts" lang="renderjs">
	
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts();
				
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {

			initEcharts() {
				var that=this;
				setTimeout(function(){
				     that.$nextTick(function(){ 
				      let daily_chart = echarts.init(document.getElementById('daily'));
				      daily_chart.setOption(that.daily_option);
				  
				     })
					 window.onresize =  function  () {
					 	 daily_chart.resize();
					 }
					
				    },500)
			},
			updateDailyChart(newValue, oldValue, ownerInstance, instance) {
				//监听 service 层数据变更
				 let daily_chart = echarts.init(document.getElementById('daily'));
				 daily_chart.setOption(newValue);	
			}	
		}
	}
</script>

使用echarts遇到的问题

1. 动态数据的渲染： 以这样的方式赋值进去that.daily_option.title.text="{a|今日走访}{c|\n}"+today;
2. **在真机测试的时候不显示：**在初始化的时候给一个500ms的延迟， setTimeout(function(){
   that.$nextTick(function(){
   },500)
3. 数据的更改功能： :change:prop="echarts.updateDailyChart"就是数据更改需要做的操作；
   这样echarts图表就出来了