Echarts简介

最新推荐文章于 2022-08-11 16:28:31 发布

追着蜗牛打

最新推荐文章于 2022-08-11 16:28:31 发布

阅读量1.9w

点赞数 3

分类专栏： Java 文章标签：图表

本文链接：https://blog.csdn.net/u010191243/article/details/51287978

版权

Java 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

原来做项目的过程中，无法避免的要用到图表服务，但实现出来的效果大都不是很美观。这次在国网开发，我们用到了一个新的开源图表设计工具-Echarts。

Echarts有着与众不同的特点和惊艳全场的视觉效果，展示效果详情参见Echarts官网的实例，众亲自行百度“Echarts”即可。

下面说说它的特点：

1、开源软件，并且我们提供了非常炫酷的图形界面，特色是地图，另外还提供了柱状图、折线图、饼图、气泡图及四象限图等；

2，使用简单，在官网中为我们封装了js，只要会引用就会得到完美的展示效果；

3，种类多，echarts实现简单，各类图形都有；相应的模板，还有丰富的API及文档说明，非常详细；

4，兼容性好，基于html5，有着良好的动画渲染效果。

我们公司目前还是使用的Echarts2版本，虽然v3已经很成熟了，但受限于之前的开发，保证展示效果尽量统一。

来看一个简单的实例，我们来实现一个炫酷的饼图效果：

首先，引入相应的js文件：

<head>  
    <meta charset="utf-8">  
    <title>Charts demo</title>  
     <script src="js/esl.js"></script>  
</head>  
<body>  
</body>

接着，为饼图准备div容器，画好HTML页面。

<head>  
    <meta charset="utf-8">  
    <title>Charts demo</title>  
     <script src="js/esl.js"></script>  
</head>  
<body>  
     
    <div id="picturePlace"></div>  

</body>

继续，在模块中导入js文件。

<head>  
    <meta charset="utf-8">  
    <title>Charts demo</title>  
     <script src="js/esl.js"></script>  
</head>  
<body>  
    <div id="picturePlace"></div>  
     <script type="text/javascript">  
        // 路径配置  
        require.config({  
            paths:{   
                'echarts' : 'js/echarts',  
                'echarts/chart/pie' : 'js/echarts'  
            }  
        });  
    </script>  

</body>

4、添加显示数据

<head>  
    <meta charset="utf-8">  
    <title>Charts demo</title>  
     <script src="js/esl.js"></script>  
</head>  
<body>  
    <div id="picturePlace"></div>  
     <script type="text/javascript">  
        // 路径配置  
        require.config({  
            paths:{   
                'echarts' : 'js/echarts',  
                'echarts/chart/pie' : 'js/echarts'  
            }  
        });  
          
         // 使用  
        require(  
            [  
                'echarts',  
                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载  
            ],  
            function (ec) {  
                // 基于准备好的dom，初始化echarts图表  
                var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>));   
                  
                option = {  
                        title : {  
                            text: '某站点用户访问来源',  
                            subtext: '纯属虚构',  
                            x:'center'  
                        },  
                        tooltip : {  
                            trigger: 'item',  
                            formatter: "{a} <br/>{b} : {c} ({d}%)"  
                        },  
                        legend: {  
                            orient : 'vertical',  
                            x : 'left',  
                            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']  
                        },  
                        toolbox: {  
                            show : true,  
                            feature : {  
                                mark : {show: true},  
                                dataView : {show: true, readOnly: false},  
                                restore : {show: true},  
                                saveAsImage : {show: true}  
                            }  
                        },  
                        calculable : true,  
                        series : [  
                            {  
                                name:'访问来源',  
                                type:'pie',  
                                radius : '55%',  
                                center: ['50%', '60%'],  
                                data:[  
                                    {value:335, name:'直接访问'},  
                                    {value:310, name:'邮件营销'},  
                                    {value:234, name:'联盟广告'},  
                                    {value:135, name:'视频广告'},  
                                    {value:1548, name:'搜索引擎'}  
                                ]  
                            }  
                        ]  
                    };  
          
                // 为echarts对象加载数据   
                myChart.setOption(option);   
            }  
        );  
    </script>  
</body>

这样，我们就实现了一个Echarts饼图，运行后即可显示。