Ext-用散点图（chart）分析相关性

叁歲伎倆 2022-06-14 09:40 213阅读 0赞

代码：

Ext.define('V5.auditoper.quekeyword.view.QuekeyScatter', {
        extend: 'Ext.chart.Chart',
        theme: 'Green',  //颜色主题
        animate : true,
        //图例
        legend: {
           position: 'right'
        },
        xtype: 'quekeyscatter',
        store: Ext.create('Ext.data.Store', {
                fields: ['temperature1','temperature2', 'date'], data: [
                        { temperature1: 38, temperature2: 38, date: 2},
                        { temperature1: 45, temperature2: 44, date: 5},
                        { temperature1: 58, temperature2: 48, date: 7},
                        { temperature1: 63, temperature2: 54, date: 10},
                        { temperature1: 57, temperature2: 60, date: 13},
                        { temperature1: 68, temperature2: 68, date: 17},
                        { temperature1: 41, temperature2: 74, date: 20}
                    ] }), axes: [
            {
                title: 'A指标',
                type: 'Numeric',
                position: 'left',
                fields: ['temperature1','temperature2'], minimum: 0, maximum: 100 }, { title: 'B指标', type: 'Numeric', position: 'bottom', fields: ['date'], minimum: 0, maximum: 23 } ], series: [
            {
                type: 'scatter',//图表类型（line:折线图，scatter:散点图，column:柱状图）
                xField: 'date',
                highlight: true,   //高亮
                yField: 'temperature1',
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                },
                //悬浮提示
                tips: {
                  trackMouse: true,
                  width: 100,
                  height: 28,
                  renderer: function(storeItem, item) {
                    this.setTitle('距离值：'+storeItem.get('date'));
                  }
                },
                listeners : {
                    itemclick : function(o) { 
                        alert(o.index);
                    }
                }
            },
            {
                type: 'line',
                smooth: true,
                xField: 'date',
                yField: 'temperature2',
                markerConfig: {
                    type: 'circle',
                    size: 2,
                    radius: 1,
                    'stroke-width': 0,
                    'fill': '#000'
                }
            }
        ] });

效果如图：  
![效果如图][SouthEast]

[SouthEast]: /images/20220614/3a23025b79b04292821c75ba83ce72e4.png