Ext整合显示echarts示例

  echarts图标如何显示在extjs的panel对象中。

Ext整合显示echarts示例

  Ext整合显示echarts源代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext中整合echarts示例</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script src="echarts-2.0.4/doc/asset/js/esl/esl.js"></script>
<script type="text/javascript">
    var fileLocation = 'echarts-2.0.4/doc/example/www/js/echarts';//注意调整路径
    require.config({ paths: { echarts: fileLocation, 'echarts/chart/bar': fileLocation } });;
    Ext.onReady(function(){
        Ext.create('Ext.panel.Panel', {
            width: 500, height: 300, border: true, renderTo: document.body,
            listeners: {
                afterlayout: function (pl, layout, opts) {
                    require(['echarts', 'echarts/chart/bar'], requireCallback);
                    function requireCallback(echarts) {
                        myChart = echarts.init(pl.body.dom, 'macarons');
                        myChart.setOption({
                            title: { text: 'Ext中整合echarts示例' },
                            xAxis: [{ type: 'category', splitLine: { show: false }, data: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品数'] }],
                            yAxis: [{ type: 'value' }],
                            series: [
                                {
                                    name: '辅助', type: 'bar', stack: '总量',
                                    itemStyle: { normal: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' }, emphasis: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' } },
                                    data: [0, 1700, 1400, 1200, 300, 0]
                                },
                                {
                                    name: '生活费', type: 'bar', stack: '总量', itemStyle: { normal: { label: { show: true, position: 'inside' } } },
                                    data: [2900, 1200, 300, 200, 900, 300]
                                }
                            ]
                        })
                    }
                }
            }
        });
    })
  </script>
</head>
<body>
</body>
</html>

 


原创文章,转载请注明出处:Ext整合显示echarts示例

评论(0)Web开发网
阅读(2066)喜欢(0)不喜欢(0)extjs开发技巧