extjs-扩展:百度echarts引入

本节介绍如何将百度的echarts引入extjs项目,echarts官网

先上个图,看一下效果

图片描述

思路

echarts正常情况下是以一个div作为渲染容器的,而且这个div必须指定高度初始化。在extjs里,适合干这件事的组件,就是panel面板了。可以在面板boxready事件中将echarts渲染到对应dom节点。

封装一个echart扩展:app/luter/ux/EchartsPanel.js

Ext.define('luter.ux.EchartsPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.echartspanel',
    liquidLayout: true,
    cls: 'chart-body',
    initComponent: function () {
        var me = this;
        if (!me.height) {
            showFailMesg({
                msg: '请正确配置图表参数:height'
            })
        }
        if (!me.option) {
            showFailMesg({
                msg: '请正确配置图表参数:option'
            })
        }
        me.on("boxready", function () {//boxready后,获取到panel的dom元素,把echarts渲染上去。
            me.echarts = echarts.init(me.getEl().dom);
            if (me.option) {
                me.echarts.setOption(me.option);
            }
        });
        me.callParent();
        //同时绑定panel的resize事件,对charts图进行大小适配
        me.on("resize", function (ta, width, height, ow, oh, e) {
            me.echarts.resize(ow - 10, oh - 5);
        });
    }
});

 

例子:

{
                xtype: 'echartspanel', 
                height: 300,//初始化高度
                option: {//charts的配置,来自百度echarts官网例子,具体参考百度官方的说明,
                    title: {
                        x: 'right',
                        text: '用户来源类型',
                        subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} 
{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] } ] } }```

最后,记得在app.html里面引入echarts的js文件,如下:

 
以下无正文

你可能感兴趣的:(javascript,extjs,echarts)