小程序中使用echarts

小程序中使用echarts

之前没有在小程序中使用 查了一些资料终于做出来了 代码如下

下载

首先，下载 GitHub 上面的 ecomfe/echarts-for-weixin 项目。
在项目中的page文件引入ec-canvas文件

在需要的页面引入组件

在wxml写入 因为我这里是使用之前老版的canvas 这里要加入force-use-old-canvas=“true” 不然页面会报错

之后就在js里面实现代码啦先在js中引入 自定义一个变量 方便后面定义
这边我使用后台的数据进行实时更新的

在data数据里面定义ec数据 数据不要写死 在请求到数据之后再自定义数据

  ec: {
      onInit: function (canvas, width, height) {
        barec = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(barec);
        return barec;

      }
    }

这边是我在后台拿到数据之后对canvas进行的自定义操作
考虑到几个不同的状态显示 就定义在一个函数里面啦

 setOptions: function (data) {
    let counts = data
    setTimeout(() => {   // 在渲染的时候会出现setOption为null的情况 暂时还没找到方法 就使用了                      定时器曲线救国 o(╥﹏╥)o
      barec.setOption({
        color: ['#BC261D'],
        tooltip: {
          show: false
        },
        grid: {
          top: '11.32%',
          bottom: '15%',
          left: '12%',
          right: '4%'
        },
        xAxis: {
             data: ["未访问", "已访问", "已签到", "已点赞",],  //这边是X轴线上的数据值 我这边是直接写死的  动态的话直接在counts  里面拿就行
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#F8DFDE',
            },
          },
          axisLabel: {
            textStyle: { //改变刻度字体样式
              color: '#161616'
            }
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: { type: 'dashed', color: "#F8DFDE" }
          },
          axisLabel: {     // 轴文字
            textStyle: {
              color: '#828282',
              fontSize: 12,
            },

          },
          max: 300,  // 最大值
          min: 0, // 最小值
          splitNumber: 5,
          axisTick: { //y轴刻度线
            show: false
          },
          axisLine: { //y轴
            show: false
          },
        },
        series: [{
          type: 'bar',
         data: [ 20, 50 ,60 ,90 ],  //  这变是柱状态的数值显示 同X轴
          barWidth: 24,  //柱形宽度
          label: {
            normal: {  // 显示数值
              show: true,
              position: 'top',
            }
          }
        }]
      })
    }, 150);
  },

这就是最终完成的效果图啦 第一次写有什么不好的请各位大佬多多指教