代码拉取完成，页面将自动刷新
准备将这个案例，引入到 uni-app ， 打包成 安卓app
https://echarts.apache.org/examples/zh/editor.html?c=bar3d-dataset&gl=1
发现报错
使用了如下社区插件： https://ext.dcloud.net.cn/plugin?id=4899
应该跟插件关系不大，报错信息来源于底层
Hbuilder X : 3.99 版本
新创建的一个 vue3工程
npm i 安装如下版本的依赖
"echarts": "^5.4.1",
"echarts-gl": "^2.0.9"
pages/index/index.vue
<template>
<view class="content">
<view style="width:750rpx; height:750rpx"><l-echart ref="chartRef"></l-echart></view>
</view>
</template>
<script>
import {test1} from './mock.js'
import {test1Options} from './data.js'
import * as echarts from 'echarts/core';
import {
DatasetComponent,
TooltipComponent,
VisualMapComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { Bar3DChart } from 'echarts-gl/charts';
import { Grid3DComponent } from 'echarts-gl/components';
echarts.use([
DatasetComponent,
TooltipComponent,
VisualMapComponent,
Grid3DComponent,
Bar3DChart,
CanvasRenderer
]);
// 数据
test1Options.dataset.source = test1
export default {
mounted() {
this.f2()
},
methods: {
f2() {
this.$refs['chartRef'].init(echarts, chart => {
chart.setOption(test1Options);
});
},
}
}
</script>
数据的话， 就从 echarts官方文档里面 拿下来的，本地创建一个 data.js ，引入了一下
https://echarts.apache.org/examples/zh/editor.html?c=bar3d-dataset&gl=1 官方地址
export const test1 = [
...
]
options 数据
export const test1Options = {
grid3D: {},
tooltip: {},
xAxis3D: {
type: 'category'
},
yAxis3D: {
type: 'category'
},
zAxis3D: {},
visualMap: {
max: 1e8,
dimension: 'Population'
},
dataset: {
dimensions: [
'Income',
'Life Expectancy',
'Population',
'Country',
{ name: 'Year', type: 'ordinal' }
],
source: []
},
series: [
{
type: 'bar3D',
// symbolSize: symbolSize,
shading: 'lambert',
encode: {
x: 'Year',
y: 'Country',
z: 'Life Expectancy',
tooltip: [0, 1, 2, 3, 4]
}
}
]
};
先计划运行在h5端，调试一下，看是否支持，如果不支持，可能app应该也不支持
http://localhost:5173/@fs/D:/HBuilderX.3.4.15.20220610/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5/dist/uni-h5.es.js
这种情况，应该是 uni-app 官方的bug吧， 有点不太确定