文章目录
- 方案一：
- 优点
- 缺点
- 方案二：
- 优点
- 缺点
在我们uniapp开发中,难免会使用到 echarts 图标，这些图表在我们浏览器端编译没有任何问题，但是一旦编译到手机端app就会出现白屏问题，报错是没有
document显而易见，手机端是没有dom节点的，为了解决这个问题，提供了两种解决方案，各有优劣
方案一：
使用 HBuilder X 导入插件在页面直接使用就行，
| 方案一插件地址 | https://ext.dcloud.net.cn/plugin?id=8017 |
|---|---|
| 完整代码 |
页面使用：
<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.能够像在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.因为使用了 原生的方法，所以兼容性相对方案一来说相对好点，其中的 dataZoom 属性正常生效
2.不需要安装任何插件，直接导入页面替换 option 使用就行
缺点
正因为使用原生方法，所以导致使用起来麻烦点，没有方案一中那样，直接配置就行
