微信小程序中使用Echarts小结

在使用之前 ,还是请详细阅读官网文档

https://www.echartsjs.com/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

官方文档还是讲的比较详细，在json、wxml中引入,基本上就完成了前期配置，下面就是在js中，如何创建自定义设置并动态渲染echart图表了

在js中引入

import * as echarts from '../../ec-canvas/echarts';设定

设定4个全局变量（根据使用情况自行定义，我这就随便定义了）

let chart;
let time = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, , 23, 24, 25, 26, 27, 28, 29, 30];
let views = [];
let buyNum = [];

接下来就是创建图表数据方法（我这是使用折线图）注：我的是放在page外面的，也可根据自己喜好

function onInit(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  chart.showLoading();//这里是缓冲动画
  var option = {
    tooltip: {
      trigger: 'none'//这里是图表中点击指示点后的提示框，现在我已禁止，开启为axis字段
    },
    color: ['#00A1D6', '#F5C500'],//这是自定义副标颜色
    legend: {
      left:"left",//这是副标位置，更多查看官网
      data: ['浏览量', '购买量']//这是副标
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true//这里设置图表距容器距离，也可设定为具体值，boolean状态为当数据过多时是否溢出容器
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        interval: 2,//设定刻度距离，距离2显示一个刻度
        textStyle: {
          fontsize: '10rpx'，设置字体大小，颜色等
        }
      },
      data: time
    },//这里为x坐标
    yAxis: {
      min: 0,//y坐标最小值
      max: 500,//y坐标最大值，也可不设值，它会根据数值大小自行判定
      type: "value"
    },//这里为y坐标
    series: [{
      name: '浏览量',//这里为副标所对应的折线
      type: 'line',
      stack: '总量',
      symbol:'none',//是否取消指示点
      smooth:true,//是否平滑显示
      data: views,//这为动态赋值，下面为附上怎么传
      itemStyle: {//这是自定义样式，想更多样式参考官网API
        normal: {
          lineStyle: {
            color: '#00A1D6'//这里为自定义折线颜色
          }
        }
      },
    },
    {
      name: '购买量',
      type: 'line',
      stack: '总量',
      data: buyNum,
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#F5C500'
          }
        }
      },
    }
    ]
  };
  chart.setOption(option);
  chart.hideLoading();//这是消除加载动画
  return chart;
}

好了现在我们基本上配置好了

现在就在page中引入了

data: {
    ecLine: {
      onInit: onInit
    },
}

下面是动态渲染数据(放在请求下面，根据实际情况)

agencyIndex().then(res => {
     1.取出自己需要的数据
     2.赋值给全局变量  time、views 、buyNum
     3.动态赋值（我这直接粘贴了，也可直接在这设置样式，上面主要作用为初始化图表）

 chart.setOption({
        series: [{
          name: '浏览量',
          type: 'line',
          stack: '总量',
          symbol: 'none',
          smooth: true,
          data: views,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#00A1D6'
              }
            }
          },
        },
        {
          name: '购买量',
          type: 'line',
          stack: '总量',
          symbol: 'none',
          smooth: true,
          data: buyNum,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#F5C500'
              }
            }
          },
        }
        ]

      });

})

　完结过后，发现一个大大的惊喜，两条数据折线，数据不一样，但是线条却重合了（反正我的是这种情况）

解决办法：在series中stack字段要设为不一样的，比如我的代码

chart.setOption({
        series: [{
          name: '浏览量',
          type: 'line',
          stack: '浏览总量',
          symbol: 'none',
          smooth: true,
          data: views,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#00A1D6'
              }
            }
          },
        },
        {
          name: '购买量',
          type: 'line',
          stack: '购买总量',
          symbol: 'none',
          smooth: true,
          data: buyNum,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#F5C500'
              }
            }
          },
        }
        ]

      });

　　这样解决啦！

微信小程序中使用Echarts小结

猜你喜欢