94 lines
2.6 KiB
JavaScript
94 lines
2.6 KiB
JavaScript
import * as echarts from '../../component/ec-canvas/echarts';
|
||
|
||
|
||
function initChart(canvas, width, height, dpr) {
|
||
const chart = echarts.init(canvas, null, {
|
||
width: width,
|
||
height: height,
|
||
devicePixelRatio: dpr // 将此选项设置为 2，可以在高分辨率屏幕上绘制更清晰的图表
|
||
});
|
||
canvas.setChart(chart);
|
||
const option = {
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['16:41', '22:41', '04:41', '10:41', '16:41']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
data: ['0ml','560ml']
|
||
},
|
||
series: [{
|
||
data: [150, 230, 224, 218, 135, 147, 260],
|
||
type: 'bar',
|
||
barWidth: 15,
|
||
itemStyle: { //柱状颜色和圆角
|
||
color: {
|
||
x:0,
|
||
y:1,
|
||
colorStops:[{
|
||
offset: 0,
|
||
color: '#FFBBAC',
|
||
},{
|
||
offset: 1,
|
||
color: '#FF512A'
|
||
}]
|
||
},
|
||
barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
|
||
},
|
||
}]
|
||
};
|
||
chart.setOption(option);
|
||
return chart;
|
||
}
|
||
|
||
|
||
Page({
|
||
data: {
|
||
imagePath: '',
|
||
ec: {
|
||
onInit:initChart
|
||
},
|
||
},
|
||
onReady() {
|
||
},
|
||
onLoad(){
|
||
let that = this
|
||
setTimeout(()=>{
|
||
const ecComponent = that.selectComponent("#mychart-dom-bar")
|
||
// 将 canvas 内容转换为临时图片文件
|
||
ecComponent.canvasToTempFilePath({
|
||
// canvasId: 'mychart-dom-bar',
|
||
success: (result) => {
|
||
this.base64({
|
||
url:result.tempFilePath,
|
||
type:'png',
|
||
}).then((res)=>{
|
||
that.setData({
|
||
imagePath:res
|
||
})
|
||
})
|
||
|
||
// console.log('转换成功，图片路径：', result.tempFilePath);
|
||
},
|
||
fail: (err) => {
|
||
console.error('转换失败:', err);
|
||
}
|
||
});
|
||
},2000)
|
||
},
|
||
base64({ url, type }) {
|
||
return new Promise((resolve, reject) => {
|
||
wx.getFileSystemManager().readFile({
|
||
filePath: url, //选择图片返回的相对路径
|
||
encoding: 'base64', //编码格式
|
||
success: res => {
|
||
resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
|
||
},
|
||
fail: res => reject(res.errMsg)
|
||
})
|
||
})
|
||
},
|
||
|
||
});
|
||
|