为什么我引用wxCharts以后skyline不显图表,切换webview就可以显示了
// pages/Charts/Charts.js
const wxCharts = require("../../utils/wxcharts.js")
Page({
/**
* 页面的初始数据
*/
data: {
chartDatas: {
money7: [6.4, 0, 0, 0, 18.71, 5.6, 0],
day7: ["13日", "14日", "15日", "16日", "17日", "18日", "19日"]
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
new wxCharts({
canvasId: 'linec', type: 'line',
categories: this.data.chartDatas.day7,
animation: true,
series: [{
name: '洗涤费',
// 线条的颜色
color: '#FF8A06',
data: this.data.chartDatas.money7,
format: function (val) {
return val.toFixed(1) + '';
}
}],
dataPointShape: true,
xAxis: {
fontColor: '#7D7D7F',
// 不显示x轴 刻度点
disableGrid: true,
},
yAxis: {
// y轴文字颜色,display:true不显示
fontColor: '#FF8A06',
// 不显示y轴
disabled: true
},
// 非通用配置
extra: {
legendTextColor: '#c427b1',
lineWidth: 10,
// 线条形状:curve 圆滑
lineStyle: 'curve'
},
// dataPointShape:false,
legend: false,
width: 400, height: 300,
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
.chart{
height: 600rpx;
width: 700rpx;
}
<!--pages/Charts/Charts.wxml-->
<view>
<canvas canvas-id="linec" class="chart"></canvas>
</view>
应该是 wxcharts 的兼容有问题,wxcharts 的地址可以发一下
https://github.com/ecomfe/echarts-for-weixin
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar",
"ec-canvas": "../../ec-canvas/ec-canvas"
},
"renderer": "webview"
}
我给echarts-for-weixin提了个PR,兼容了skyline模式,可以参考下,https://github.com/ecomfe/echarts-for-weixin/pull/937
如果有人用uniapp,可以试下我封装的插件:https://ext.dcloud.net.cn/plugin?id=15140
// pages/ceshi/ceshi.js import * as echarts from '../../ec-canvas/echarts'; function getOption() { return { grid: { containLabel: true }, tooltip: { show: true, trigger: 'axis' }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // show: false }, 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] }] }; } Page({ /** * 页面的初始数据 */ data: { ec: { onInit: function (canvas, width, height, dpr) { const barChart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(barChart); barChart.setOption(getOption()); return barChart; } } } })