extjs集成echart

最新推荐文章于 2021-04-02 05:30:41 发布

_1kb

最新推荐文章于 2021-04-02 05:30:41 发布

阅读量1.9k

点赞数 1

分类专栏：技术分享文章标签： extjs echart

本文链接：https://blog.csdn.net/yy891136/article/details/72663336

版权

技术分享专栏收录该内容

2 篇文章 0 订阅

订阅专栏

理由

extjs 功能虽然强大，但是图表的方面，单一并且繁琐，一般很难满足需求。
echart 图表较多，使用群体多，便于学习，易于使用。

导入echart

<script type="text/javascript" src="js/echarts-min.js"></script>

使用echart

在创建echart之前需要先创建 Ext.Panel

    var panel_chart = new Ext.Panel({
            width : 220,
            height : 400,
            html : ' <div id="chart_panel" ></div>'
        }

现在可以开始创建 echart

    var option = {
            legend : {
                orient : 'vertical',
                data : ["part1","part2"]
            },
            series : [{
                        type : 'pie',
                        center : ['50%', '60%'],
                        data : [{"name":"part1","value":5},{"name":"part2","value":10}]
                    }]
        };
    var chart = echarts.init(document.getElementById('chart_panel'));
    chart.setOption(option);