之前没有怎么做过小程序，最近公司需要刚上来就做图表，这对于我来说是一个挑战。
在没做之前觉得没什么，但是后来有一个很大的bug。就是在做Tab切换的时候，我发现页面不管是上下还是左右滑动的时候图表会悬浮在上面，不会随着页面进行移动。
结果发现swiper和scroll-view标签下面不能用canvas，这才明白。然后就改用了普通的标签。
这里用的show、hidden隐藏显示
结果如下：切换完之后第二页的图表进行了压缩。看了一下尺寸也没有错啊，到现在也没搞明白怎么回事。于是就换了另一种方式wx:if进行显示和隐藏。把wxml里面注释的内容解开就可以了。把另一个用hidden进行切换的进行注释。
JS：
import * as echarts from ‘../../ec-canvas/echarts’;
const app = getApp();
function initChart(canvas,width,height){
const chart = echarts.init(canvas,null,{
width:width,
height:height
});
canvas.setChart(chart);
var option = {
color: [“#37A2DA”, “#67E0E3”, “#9FE6B8”],
legend: {
data: [‘A’, ‘B’, ‘C’],
top: 10,
left: ‘center’,
backgroundColor: ‘red’,
z: 100
},
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]
}, {
name: ‘B’,
type: ‘line’,
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}, {
name: ‘C’,
type: ‘line’,
smooth: true,
data: [10, 30, 31, 50, 40, 20, 10]
}]
};
chart.setOption(option);
return chart;
}
function initChart1(canvas, width, height) {
const chart1 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart1);
var option = {
color: [‘#37a2da’, ‘#32c5e9’, ‘#67e0e3’],
tooltip: {
trigger: ‘axis’,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow’ // 默认为直线，可选为：’line’ | ‘shadow’
}
},
legend: {
data: [‘热度’, ‘正面’, ‘负面’]
},
grid: {
left: 15,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
xAxis: [
{
type: ‘value’,
axisLine: {
lineStyle: {
color: ‘#999’
}
},
axisLabel: {
color: ‘#666’
}
}
],
yAxis: [
{
type: ‘category’,
axisTick: { show: false },
data: [‘汽车之家’, ‘今日头条’, ‘百度贴吧’, ‘一点资讯’, ‘微信’, ‘微博’, ‘知乎’],
axisLine: {
lineStyle: {
color: ‘#999’
}
},
axisLabel: {
color: ‘#666’
}
}
],
series: [
{
name: ‘热度’,
type: ‘bar’,
label: {
normal: {
show: true,
position: ‘inside’
}
},
data: [300, 270, 340, 344, 300, 320, 310],
itemStyle: {
// emphasis: {
// color: ‘#37a2da’
// }
}
},
{
name: ‘正面’,
type: ‘bar’,
stack: ‘总量’,
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220],
itemStyle: {
// emphasis: {
// color: ‘#32c5e9’
// }
}
},
{
name: ‘负面’,
type: ‘bar’,
stack: ‘总量’,
label: {
normal: {
show: true,
position: ‘left’
}
},
data: [-20, -32, -21, -34, -90, -130, -110],
itemStyle: {
// emphasis: {
// color: ‘#67e0e3’
// }
}
}
]
};
chart1.setOption(option);
return chart1;
}
Page({
data:{
ec: {
onInit: initChart
},
ecA: {
onInit: initChart1
},
clickTab:true,
clickTab1:false,
},
clickTab: function(e){
var that = this;
that.setData({
clickTab: true,
clickTab1: false
})
},
clickTab1: function (e) {
console.log(1111111);
var that = this;
that.setData({
clickTab: false,
clickTab1: true
})
}
})
这样的话就可以正常显示了