在wepy框架中使用echarts（图表）

看了网上不少文章，发现还真不好搞，看半天一脸懵逼...如下比较好的文章推荐下

https://blog.csdn.net/juzipidemimi/article/details/81807110

https://github.com/ecomfe/echarts-for-weixin/issues/7

https://blog.csdn.net/yaoxiewan6617/article/details/79420524

 

如果以上文章你都没搞定的话，请跟我一起来，具体代码如下：

1、在官方中下载完整的代码，原生的小程序代码

https://github.com/ecomfe/echarts-for-weixin

2、然后、由于原码中的echarts.js文件比较大，再着项目中不太可能用到所有的图表，因此请进行选择性的生产该文件，生成的页面链接为：http://echarts.baidu.com/builder.html

3、创建组件src/components/ec-canvas/echar.wpy

<style type="css">
.ec-canvas {
  width: 100%;
  height: 100%;
}
</style>
<template>
<canvas class="ec-canvas" canvas-id="ec-canvas"  test-id="confint" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
</canvas>
</template>
<script>
import wepy from 'wepy'
import WxCanvas from '@/utils/ec-canvas/wx-canvas'
import * as echarts from '@/utils/ec-canvas/echarts'

let ctx
export default class echart extends wepy.component {
  props = {
    ec: {},
    confint: String
  };

  data = {
    canvasId: 'ec-canvas'
  };

  onLoad () {
    if (!this.data.ec) {
      console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" ' +
                'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>')
      return
    }
    if (!this.data.ec.lazyLoad) {
      this.init()
    }
  };
  initChart (canvas, width, height, option) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    })
    canvas.setChart(chart)
    chart.setOption(this.ec.option)
    return chart
  };
  init (callback) {
    const version = wepy.getSystemInfoSync().SDKVersion.split('.').map(n => parseInt(n, 10))
    const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9) ||
            (version[0] === 1 && version[1] === 9 && version[2] >= 91)
    if (!isValid) {
      console.error('微信基础库版本过低，需大于等于 1.9.91。' +
                '参见：https://github.com/ecomfe/echarts-for-weixin' +
                '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82')
      return
    }
    ctx = wepy.createCanvasContext(this.data.canvasId, this)

    const canvas = new WxCanvas(ctx, this.data.canvasId)

    echarts.setCanvasCreator(() => {
      return canvas
    })

    var query = wepy.createSelectorQuery()
    query.select('.ec-canvas').boundingClientRect(res => {
      if (typeof callback === 'function') {
        this.chart = callback(canvas, res.width, res.height)
      } else if (this.data.ec) {
        this.chart = this.initChart(canvas, res.width, res.height)
      }
    }).exec()
  };
  methods = {
    canvasToTempFilePath (opt) {
      if (!opt.canvasId) {
        opt.canvasId = this.data.canvasId
      }

      ctx.draw(true, () => {
        wepy.canvasToTempFilePath(opt, this)
      })
    },

    touchStart (e) {
      if (!this.data.ec.disableTouch && this.chart && e.touches.length > 0) {
        var touch = e.touches[0]
        this.chart._zr.handler.dispatch('mousedown', {
          zrX: touch.x,
          zrY: touch.y
        })
        this.chart._zr.handler.dispatch('mousemove', {
          zrX: touch.x,
          zrY: touch.y
        })
      }
    },

    touchMove (e) {
      if (!this.data.ec.disableTouch && this.chart && e.touches.length > 0) {
        var touch = e.touches[0]
        this.chart._zr.handler.dispatch('mousemove', {
          zrX: touch.x,
          zrY: touch.y
        })
      }
    },

    touchEnd (e) {
      if (!this.data.ec.disableTouch && this.chart) {
        const touch = e.changedTouches ? e.changedTouches[0] : {}
        this.chart._zr.handler.dispatch('mouseup', {
          zrX: touch.x,
          zrY: touch.y
        })
        this.chart._zr.handler.dispatch('click', {
          zrX: touch.x,
          zrY: touch.y
        })
      }
    }
  }
};
</script>

4、在对应的文件路径中存入公共js，具体路径请跟进自己的目录结构来处理，我的是这样的

src/utils/ec-canvas

 

5、创建demo类

src/pages/chardemo/bar.wpy

<style type="css">
.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;
}
</style>
<template>
    <view class="container" >
        <echar  :ec="ec" />
    </view>
</template>
<script>
import wepy from 'wepy'
import echar from '@/components/ec-canvas/echar'

export default class bar extends wepy.page {
  config = {
    'navigationBarTitleText': '条状图示例'
  };

  components = {
    echar: echar
  }

  data = {
    ec: {
      option: {
        color: ['#37a2da', '#32c5e9', '#67e0e3'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          confine: true
        },
        legend: {
          data: ['热度', '正面', '负面']
        },
        grid: {
          left: 20,
          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'
              // }
            }
          }
        ]
      }
    }
  }

  methods = {

  }
  onShow () {

  }
  onLoad () {

  }
}
</script>

其他的demo基本是类似的，只是中间的option参数进行替换即可。

目前一个页面显示多个图表的还未能实现，如果有朋友实现了，请不吝留言交流，谢谢！