echarts 基本使用

深碍√TFBOYSˉ_ 2022-08-11 14:58 159阅读 0赞

最近项目中要做图形报表，要求使用echarts实现，图形报表有很多中实现之前也接触过，但echarts还是头一次听说，正好可以趁这个机会好好学习一下它。

之前不知道就不知道啦，现在知道了就了不得了，一下子喜欢上了echarts，今后项目中要是让做报表我肯定首选echarts在没有强制要求的前提下。主要是echarts太完美了：1，开源软件，无私的为我们提供漂亮的图形界面；2，使用简单，默默的为我们封装了重要的js，只要会引用就会使用echarts；3，种类多，echarts为我们提供了各种图标，其中最具象征的就是地图了；4，兼容性好，基于html5动画渲染超棒。

[ echarts官网][echarts] 提供了源码和说明文档，使用echarts需要先到官网下载需要的js源文件。

官网上的demo中夹杂着很多我们用不到的东西，想使用饼状图就得从demo中把不用的去掉，劈植斩叶留下最原始的功能实现。这样毕竟比较费时，我就在裁剪后的代码中加以总结于是乎新的使用教程如下所示：

echarts饼状图实现步骤：

1，在简单的html中引入js文件

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

2，为图形准备容器

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

就是在html中添加一个div给定id，图表就会显示在div中。

3，模块导入js

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>

5，运行程序显示结果

以上是饼状图的实现步骤，柱状图散点图跟这个类似就是引用js时饼状图是pie，柱状图是bar，对应的option里面的数据不同，程序的架子是一样的。。

点击下载源码： [ 地址1][_1]，[地址2][2]

[echarts]: http://echarts.baidu.com/
[_1]: http://download.csdn.net/detail/lishuangzhe7047/7832383
[2]: http://pan.baidu.com/s/1kT7NGr1