一、初步使用
微信小程序使用echarts，一般都是使用github上的开源项目echarts-for-weixin(github.com/ecomfe/echa…](p3-juejin.byteimg.com/tos-cn-i-k3…) 然后在json文件中引入该组件：
{
"usingComponents": {
"ec-canvas":"../../components/ec-canvas/ec-canvas"
},
"navigationBarTitleText": "土壤墒情传感器"
}
然后在wxml文件中：
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" ></ec-canvas>
这样就创建了一个类似div的东西 接下来再js文件中初始化：
let option1 = {
color:['#95F204','#04D919','#FFFF00','#F59A23','#02A7F0'],
grid: {
top: '20%',
},
tooltip: {
trigger: 'axis',
formatter: '{b}\n{a0}:{c0}\n{a1}:{c1}\n{a2}:{c2}\n{a3}:{c3}\n{a4}:{c4}',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
confine: true
},
angleAxis: {
boundaryGap:false,
data: ['北','东北','东','东南','南','西南','西','西北']
},
radiusAxis: {
z:3,
// show:false,
minInterval:20,
name:'频率(次)',
nameGap :25
},
polar: {
radius:125,
},
xAxis:{
},
yAxis:{
},
series: [{
type: 'bar',
data: [],
coordinateSystem: 'polar',
name: '小于0.2m/s',
stack: 'a'
},
{
type: 'bar',
data: [],
coordinateSystem: 'polar',
name: '0.2-0.5m/s',
stack: 'a'
},
{
type: 'bar',
data: [],
coordinateSystem: 'polar',
name: '0.5-2m/s',
stack: 'a'
},
{
type: 'bar',
data: [],
coordinateSystem: 'polar',
name: '2-5m/s',
stack: 'a'
},
{
type: 'bar',
data: [],
coordinateSystem: 'polar',
name: '大于5m/s',
stack: 'a'
}
],
legend: {
width:'80%',
left:'10%',
bottom:5,
show: true,
data: ['小于0.2m/s', '0.2-0.5m/s', '0.5-2m/s','2-5m/s','大于5m/s']
}
};
function initChart(canvas, width, height, dpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
// 折线图
chart.setOption(option);
return chart;
}
Page{
data:{
ec: {
onInit: initChart
},
}
}
这样就得到了一个初始化的统计图：
二、遇到的问题
2.1 图形有时初始化出不来的问题
本来按照教程所做，将option定义在了initChart函数中，这样做再大多数情况下可以出来，但是是有出不来的情况，后来探索着将option放在initChart函数外面，这样不会有出不来的问题，更重要的是效率大大提高，基本实现了秒刷，特此记录
2.2 echarts的图形总是绘制在最上面的问题
有时在用遮罩层等时，会出现echarts绘制在遮罩层上面的问题，尝试调整了z-index，z,zlevel等都无效，后来得知这是echarts在微信小程序中的一个bug,已在最新的echarts中解决，因此只需要将ec-canvas中的echarts.js用最新版本的替换就可以
替换之后在模拟器上依然是显示在最上层，但是在手机中问题已经解决
2.3 echarts的tooltip问题
echarts的tooltip在使用默认的提示的时候出不来名称，因此只能使用formatter的格式化方法，用函数或者
tooltip: {
trigger: 'axis',
formatter:'{b}\n{a0}:{c0}\n{a1}:{c1}\n{a2}:{c2}\n{a3}:{c3}'
},
这样的方式，但是问题就在于前面的点没法出来
看了一下在echarts中的marker展现的方式是再formatter的函数中param.marker就可以出现点，
tooltip: {
trigger: 'axis',
formatter:(param)=>{
return param.marker+'.....'
}
},
但是在微信小程序中是无效的，tooltip的点在echarts中是使用richtext的方式渲染，这个因为影响不大，没有深入研究，后面有机会再解决
