关于小程序使用echarts遇到的小问题

关于小程序使用echarts遇到的小问题

由于需求原因，小程序上需要用到折柱混合的图表，所以经过各种搜索之后决定用echarts来进行图表制作。
效果图如下：
一下是使用过程：
1.首先下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
2.下载完成后打开文件夹。把里面的ec-canvas文件夹拖到小程序中去，目录结构是
目录结构是这样的，
3.开始小程序里面的配置：首先在index.json中：
{
“usingComponents”: {
“ec-canvas”:"…/…/ec-canvas/ec-canvas"
}
}
然后在index.wxml中使用：
<view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view>
最后在idnex.js文件中：先import * as echarts from ‘…/…/ec-canvas/echarts’;导入
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);

var option = option = {
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘cross’,
crossStyle: {
color: ‘#999’
}
}
},
grid:{
x: 60,
x2: 60,
y2: 24
},
legend: {
data: [‘蒸发量’, ‘降水量’, ‘平均温度’]
},
xAxis: [
{
type: ‘category’,
data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ‘10月’, ‘11月’, ‘12月’],
axisPointer: {
type: ‘shadow’
}
}
],
yAxis: [
{
type: ‘value’,
name: ‘水量’,
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: ‘{value} ml’
}
},
{
type: ‘value’,
name: ‘温度’,
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: ‘{value} °C’
}
}
],
series: [
{
name: ‘蒸发量’,
type: ‘bar’,
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: ‘降水量’,
type: ‘bar’,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: ‘平均温度’,
type: ‘line’,
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
});
然后在index.wxss中：
.container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
ec-canvas {
width: 100%;
height: 50%;
}
宽高必须要有 不然不显示，
最后说一个小问题，index.js文件中的
grid:{
x: 60,
x2: 60,
y2: 24
},
如果不写的话他会有一个默认值 在机型ipone x 中会显示不全 如图：

加上代码之后效果就是第一张图。
具体的效果就需要你自己去设置了