小程序 引入Apache ECharts

作为组件使用ECharts

目录如下

 

1.下载 echarts

下载地址

在创建项目之后，可以将下载的 ecomfe/echarts-for-weixin 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 ec-canvas 目录到新建的项目下，然后做相应的调整。

2.创建组件目录

在项目中创建componentes/chart目录，并初始化文件index.js、index.json、index.wxml和index.wxss。

index.js 代码如下。

import * as echarts from '../../ec-canvas/echarts'
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        chartLineId: {
            type: String,
        },
        canvasId: {
            type: String
        },
        height: {
            type: String
        },
        options: {
            type: Object
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true, // 延迟加载
        },
    },
    lifetimes: {
        ready() {
            this[this.data.chartLineId] = this.selectComponent('#' + this.data.chartLineId);
            this.getData();
        },
        detached(e) {
            this[this.data.chartLineId] = null
            this[this.data.canvasId] = null
        },
    },

    /**
     * 组件的方法列表
     */
    methods: {
        getData() {
            this.initChart();
        },
        initChart() {
            this[this.data.chartLineId].init((canvas, width, height, dpr) => {
                const chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // new
                })
                chart.setOption(this.getOption())
                return chart
            })
        },
        getOption() {
            var option = this.data.options;
            return option;
        },
    }
})

index.json

{
    "component": true,
    "usingComponents": {
        "ec-canvas": "../../ec-canvas/ec-canvas"
    }
}

index.wxml

<view style="height: 100% ; width:100%">
    <ec-canvas id="{{ chartLineId }}" canvas-id="{{ canvasId }}" ec="{{ec}}" options="{{options}}"></ec-canvas>
</view>

index.wxss

本案例未涉及样式修改

3.父类页面使用组件

在使用改组件的*.wxml加入，

 <chart options="{{ options }}" canvasId="{{aa}}" chartLineId="{{bb}}" height="300px"></chart>

参数中options是包含样式数据，数据可以参考echarts 官方文档

实例如下

        var bb ='mychart-dom-line',
        var options = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '0%',
                    left: 'center'
                },
                series: [{
                    name: '快递柜',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [{
                            value: 1048,
                            name: '待取件'
                        },
                        {
                            value: 735,
                            name: '空闲'
                        },
                    ]
                }]
            };

并在*.json 引入组件

{
	"usingComponents": {
		"chart": "../../componentes/chart"
	},
	"enablePullDownRefresh": true,
	"navigationBarTitleText": "快递"
}

样式如下 

 

页面直接使用ECharts

1.下载 echarts

下载地址

在创建项目之后，可以将下载的 ecomfe/echarts-for-weixin 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 ec-canvas 目录到新建的项目下，然后做相应的调整。

下载源码后可以在小程序开发工具中运行，选择相应的组件样式进行修改

2.创建页面

在项目中创建pages/chart目录，并初始化文件index.js、index.json、index.wxml和index.wxss。

index.js 代码如下。

import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		ec: {
			// 延迟加载
			lazyLoad: true
		},
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		this.lineComponent = this.selectComponent('#mychart-dom-line');
		this.initChart();

	},
	/**
	 * 初始化echarts数据
	 */
	initChart: function () {
		this.lineComponent.init((canvas, width, height, dpr) => {
			const chart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: dpr // new
			});
			canvas.setChart(chart);
			var option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '5%',
					left: 'center'
				},
				series: [{
					name: '快递柜',
					type: 'pie',
					radius: ['40%', '70%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '40',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [{
							value: 1048,
							name: '待取件'
						},
						{
							value: 735,
							name: '空闲'
						},
					]
				}]
			}
			chart.setOption(option);
			return chart;
		});
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function () {},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function () {},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function () {},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function () {},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () {},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function () {},
	
})

index.json

{
	"usingComponents": {
		"echarts": "../../ec-canvas/ec-canvas"
	},
	"navigationBarTitleText": "快递柜"
}

index.wxml

<view style="width: 100%;height: 400px;">
     <echarts id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></echarts>
</view>