图表工具--- ECharts.js学习（一）简单入门

2年前 (2022) 程序员胖胖胖虎阿

276 0 0

ECharts.js学习（一）

在项目开发的时候，在前端的数据需要用图表的形式展示。网上搜索了一下，发现有几种统计图库。具体有哪几种可以看：

前端开发者常用的9个JavaScript图表库

一、ECharts.js的特点

这也是一款基于HTML5的图形库。图形的创建也比较简单，直接引用Javascript即可。使用这个库的原因主要有三点，一个是因为这个库是百度的项目，而且一直有更新，目前最新的是EChart 3；第二个是这个库的项目文档比较详细，每个点都说明的比较清楚，而且是中文的，理解比较容易；第三点是这个库支持的图形很丰富，并且可以直接切换图形，使用起来很方便。

先用个小案例

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
<!DOCTYPE html>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["苹果","三星","小米","华为","oppo","酷派"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[100, 120, 150, 160, 220, 80]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

显示效果：

图表工具--- ECharts.js学习（一）简单入门

这个是我在CEharts官方文档的小案例：

链接：5分钟上手写ECharts的第一个图表

官方文档：ECharts官方文档

二、CEharts进行步骤讲解

第一步，引用Js文件

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

js文件有几个版本，可以根据实际需要引用需要的版本。echarts.js下载链接

第一步，准备一个放图表的容器

<div id="main" style="width:600px; height: 400px;"></div>

第三步，设置参数，初始化图表

<script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'数据统计'
            },
            tooltip:{},
            legend:{
                data:['手机销量']
            },
            xAxis:{
                data:["苹果","小米","华为","三星"]
            },
            yAxis:{

            },
            series:[{
                name:'销量',
                type:'line',
                data:[800,1000,1300,400]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>

效果图：不清楚是因为我缩小网页了

饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式。

 var option = {
            title:{
                text:'ECharts 数据统计'
            },            
            series:[{
                name:'访问量',
                type:'pie',    
                radius:'60%', 
                data:[
                    {value:1000,name:'苹果'},
                    {value:1200,name:'小米'},
                    {value:1800,name:'华为'},
                    {value:400,name:'三星'}
                ]
            }]
        };

效果截图

图表工具--- ECharts.js学习（一）简单入门

有关最基础的就讲到这里，下篇，我将如何通过后台数据完成图表。

想的太多，做的太少，中间的落差就是烦恼，要么去做，要么别想 少尉【20】

版权声明：程序员胖胖胖虎阿发表于 2022年11月7日上午1:16。
转载请注明：图表工具--- ECharts.js学习（一）简单入门 | 胖虎的工具箱-编程导航