在uniapp中使用echarts，通过document或者ref去渲染元素，打包后在手机app中echarts不会显示。所以需要使用ucharts
下载安装：npm i @qiun/ucharts
然后再组件中引用：import uCharts from '../../uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';var uChartsInstance = {};
页面组件就使用：<canvas canvas-id="chart" id="chart" style="width: 100%;height:95%;" />
我的写法是按照ucharts中的原生的方法进行的；
官网是：uCharts官网 - 秋云uCharts跨平台图表库 可以进去看下实例；
这个是柱状图的一个数据实例；我们将接口返回的数据，也写成这种格式进行传递
setTimeout(() => {
let resp = {
categories: res.data.name,
series: [{
name: "",
data: arr
}, ]
};
console.info(resp, 'resp')
this.ungetOption('chart', resp);
}, 500);
ungetOption(id, data) {
const ctx = uni.createCanvasContext(id, this);
uChartsInstanceid = new uCharts({
type: "column",
context: ctx,
padding: 15, 30, 0, 5,
fontSize: 12,
width: this.cWidth,
height: this.cHeight,
categories: data.categories,
series: data.series,
animation: true,
background: "#FFFFFF",
color: "#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc",
padding: 15, 15, 0, 5,
enableScroll: false,
legend: {},
dataLabel: false,
categoriesStyle: {
fontSize: '7px', // 设置X轴文字大小
},
xAxis: {
disableGrid: true,
rotateLabel: true,
},
yAxis: {
data: [{
min: 0
}]
},
extra: {
column: {
type: "group",
width: 30,
activeBgColor: "#000000",
activeBgOpacity: 0.08
}
}
});
},