129.《uniapp在移动端app使用echarts白屏问题解决方案》_uniapp charts白屏

在我们uniapp开发中,难免会使用到 echarts 图标，这些图表在我们浏览器端编译没有任何问题，但是一旦编译到手机端app就会出现白屏问题，报错是没有 document 显而易见，手机端是没有dom节点的，为了解决这个问题，提供了两种解决方案，各有优劣

方案一：

使用 HBuilder X 导入插件在页面直接使用就行，

页面使用：

<template>
  <view class="container">
    <view class="container-wrap">
      <echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      option: {},
    };
  },
  onReady() {
    this.option = {
      title: {
        text: "测试下面legend的红色区域不应被裁剪s",
        left: "center",
      },
      legend: {
        data: ["A", "B", "C"],
        top: 50,
        left: "center",
        backgroundColor: "red",
        z: 100,
      },
      grid: {
        containLabel: true,
      },
      tooltip: {
        show: true,
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        interval: 0,
        data: [
          "周一",
          "周二",
          "周三",
          "周四",
          "周五",
          "周六",
          "周日",
          "11",
          "22",
          "33",
          "44",
          "55",
          "66",
          "77",
          "周一",
          "周二",
          "周三",
          "周四",
          "周五",
          "周六",
          "周日",
          "11",
          "22",
          "33",
          "44",
          "55",
          "66",
          "77",
        ],
        // show: false
      },
      dataZoom: [
        {
          type: "inside", //slider表示有滑动块的，inside表示内置的
          show: true,
          xAxisIndex: 0,
          start: 50,
          end: 100,
        },
      ],
      yAxis: {
        x: "center",
        type: "value",
        splitLine: {
          lineStyle: {
            type: "dashed",
          },
        },
        // show: false
      },
      series: [
        {
          name: "A",
          type: "line",
          smooth: true,
          data: [
            18, 36, 65, 30, 78, 40, 33, 18, 36, 65, 30, 78, 40, 33, 18, 36, 65,
            30, 78, 40, 33, 18, 36, 65, 30, 78, 40, 33,
          ],
        },
      ],
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

优点

1.能够像在pc端使用 echarts 一样，任意配置，没有额外的学习成本

2.使用简单 uniapp 插件市场提供了插件开箱即用

缺点

echarts中 dataZoom属性在移动端失效，无法在移动端拖拽，在sersor中使用渐变色 new 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: {},
					legend: {
						data: ['销量']
					},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				}
			}
		},
		onLoad() {

		},
		methods: {
			changeOption() {
				const data = this.option.series[0].data
				// 随机更新示例数据
				data.forEach((item, index) => {
					data.splice(index, 1, Math.random() * 40)
				})
			},
			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/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		margin-top: 100px;
		width: 100%;
		height: 300px;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

优点

1.因为使用了 原生的方法，所以兼容性相对方案一来说相对好点，其中的 dataZoom 属性正常生效

2.不需要安装任何插件，直接导入页面替换 option 使用就行

缺点

正因为使用原生方法，所以导致使用起来麻烦点，没有方案一中那样，直接配置就行