uniapp通过renderjs引入echarts

功能

uniapp页面中有多个图表需要渲染，uchart不能满足需要，所以引入echarts

<view :prop="options" :change:prop="echarts.updateEcharts" id="id"></view>

<script>

export default {
  props: {
    option: {
      type: Object,
      default: {},
    },
    // 动态传id
    id: {
      type: String,
      dafault: "echarts",
    },
  },
  watch: {
    option: {
      handler(newValue, oldValue) {
        this.option = newValue;
      },
      immediate: true,
      deep: true, // 深度监听
    },
  },
  methods: {
    onViewClick(options) {
      console.log(options);
    },
  },
};
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {

			if (typeof window.echarts === 'function') {
				this.initEcharts();
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				
				// 注意!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/js/echart/echarts.js';//你的项目中echarts.js的路径
				script.onload = this.initEcharts.bind(this);
				document.head.appendChild(script);
			}

		},
		methods: {

			initEcharts: function() {
				myChart = echarts.init(document.getElementById(this.id));
				
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.options);
			},

			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 注意！！！！！！！！！！！！！！！！！！！
				// 如果是页面内有多个图表的话，
				// 可能会出现传进来的id以及myChart 的id不一致，导致数据渲染错误
				// 这时候需要重新对myChart赋值
				
				// 可以在这打印一下myChart 和this.id
				// ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
				myChart = echarts.init(document.getElementById(this.id));
				// ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
				
				// 监听 service 层数据变更
				if (myChart !== "") {
					myChart.setOption(newValue, true)  //如果需要频繁的更新数据且更新图表，建议加上true
				}
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>