孙肖宁

微信小程序中使用Echarts
我们首先下载echarts微信版,下载地址为:https://github.com/ecomfe/echarts-...
扫描右侧二维码阅读全文
27
2019/09

微信小程序中使用Echarts

我们首先下载echarts微信版,下载地址为:https://github.com/ecomfe/echarts-for-weixin,然后我们把下载好的文件放在我们的小程序中,小编是建立了一个libs用来存储这些引用的库。

  • json文件中的配置:
"usingComponents": {
        "ec-canvas": "/libs/ec-canvas/ec-canvas"
}
  • js中引用
let echarts = require('../../libs/ec-canvas/echarts.js');
  • wxml中使用
<view style="width: 720rpx; height: 720rpx;">
      <ec-canvas  id="ec-accessdata" canvas-id="ec-accessdata" ec="{{echarts.addatatrend.option}}"></ec-canvas>
</view>
  • 使用
    我们在data中定义echarts的初始化数据:
echarts: {
            userdatafenbu: {
                option: {
                    lazyLoad: true,
                },
                form: {
                    year: new Date().getFullYear()
                }
            },
            addatatrend: {
                option: {
                    lazyLoad: true
                },
            }

        }
option : {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

在函数里使用

let that = this;
let ec = that.selectComponent('#ec-accessdata');
                if (!ec) {
                    return;
                }
                ec.init(function(canvas, width, height) {
                    // 获取组件的 canvas、width、height 后的回调函数
                    // 在这里初始化图表
                    const chart = echarts.init(canvas, 'wonderland', {
                        width: width,
                        height: height
                    });
                    chart.setOption(that.data.option);
                    // 注意这里一定要返回 chart 实例,否则会影响事件处理等
                    return chart;
                });
Last modification:September 27th, 2019 at 07:47 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment