Extjs3.3. 中用 Echarts

浅浅的花香味﹌ 2022-08-05 07:25 332阅读 0赞

Extjs3.3. 中用 Echarts。

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

![SouthEast][]

![SouthEast 1][]

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: '平均值'}
                        ]
                    }
                }]
            });
        }
    });

文件引用：

使用：

//图表显示面板
        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);

[SouthEast]: /images/20220805/fc6eea9968bc4fa8a0e7f6aed91c25e3.png
[SouthEast 1]: /images/20220805/273a5a52f12a4e06861dd8ebc587d7f5.png