Extjs3.3. 中用 Echarts

来源：互联网发布：多益网络搬迁后新地址编辑：程序博客网时间：2024/06/05 20:25

Extjs3.3. 中用 Echarts。

将Echarts写成一个组件方便以后的调用。

EChartsComponent.js

/** * Created by wzs on 2015/5/27. */Ext.ns('Ext.ux.chart');Ext.ux.chart.echarts = Ext.extend(Ext.BoxComponent ,{    border: false,    height: 100,//不能省略，虽然没用    //修改/刷新数据    modifydata: function(exAxisdata,eseriesdata){        var me = this;        me.exAxisdata.length = 0;        me.eseriesdata.length = 0;        me.exAxisdata = exAxisdata;        me.eseriesdata = eseriesdata;        me.echarts.clear();        me.echeartOption(me);    },    //初始化box组件    initComponent:function() {        var me = this;        if(!me.height){            throw new Error('图表组件需要设置高度!');        }        me.on("resize", function (me, mewidth, meheight) {            me.getEl().dom.style.height = meheight + 'px';            me.echarts = echarts.init(me.getEl().dom);            me.echeartOption(me);        });    },    //初始化echarts图表    echeartOption: function(me){        me.echarts.setOption({            /*标题*/            title: {                text: me.etext,                subtext: me.esubtext            },            /*提示框，鼠标悬浮交互时的信息提示*/            tooltip: {                trigger: me.etrigger || 'axis'            },            /*图例，每个图表最多仅有一个图例*/            legend: {                data: me.elegendata            },            /*工具箱，每个图表最多仅有一个工具箱*/            toolbox : {                show : true,                feature : me.efeature || {                    mark : {show: false},                    dataView : {show: false, readOnly: false},                    magicType : {show: true, type: ['line', 'bar']},                    restore : {show: false}                }            },            /*是否启用拖拽重计算特性，默认关闭*/            calculable : me.ecalculable || false,            /*直角坐标系中横轴数组*/            xAxis : me.exAxis || [{                data: me.exAxisdata,                type : me.exAxistype || 'category'            }],            /*直角坐标系中纵轴数组*/            yAxis : me.eyAxis || {                type : 'value'            },            /*驱动图表生成的数据内容数组*/            series : me.eseries || [{                name: me.eseriesname,                type:'bar',                data: me.eseriesdata,                markPoint : {                    data : [                        {type : 'max', name: '最大值'},                        {type : 'min', name: '最小值'}                    ]                },                markLine : {                    data : [                        {type : 'average', name: '平均值'}                    ]                }            }]        });    }});

文件引用：

<script type="text/javascript" src="${ctxs}/scripts/ext${ExtJsVer}/ux/echarts/echarts-all.js?ver=${version}"></script><script type="text/javascript" src="${ctxs}/scripts/ext${ExtJsVer}/ux/echarts/EChartsComponent.js?ver=${version}"></script>

使用：

//图表显示面板    var echartspanel = new Ext.ux.chart.echarts({        region: 'center',        etext: '标题1',        esubtext: '数据虚构',        elegendata:['车流量（万辆）'],        exAxisdata : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],        eseriesname:'车流量（万辆）',        eseriesdata: [122.0, 184.9, 87.0, 103.2, 125.6, 76.7, 135.6, 162.2, 82.6, 150.0, 116.4, 73.3]    });

数据修改（例）：

var exAxisdata = ['第一季度','第二季度','第三季度','第四季度'];                        var eseriesdata = [1212,1832,1114,1354];                        echartspanel.modifydata(exAxisdata,eseriesdata);

0 0