Echarts入门教程精简实用系列

Stella981
• 阅读 594

引语:echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单

1、从**官方网站**中下载所需的echarts.js文件,该文件因功能广泛,包体较大,可自行决定按需打包下载。

2、从前端页面引入echarts.js,后即可使用

<script src="js/echarts.min.js"></script>

3、请查看完整使用案例

介绍:series里面的type值表示使用哪种类型的图表,'bar'表示柱状图,'pie'表示饼图等,更多实例请移驾官网,文末有链接!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>echarts入门</title>
    </head>
    
    <script src="js/jquery-2.2.4.js"></script>
    <script src="js/echarts.min.js"></script>
    <style>
        
        .box{
            width:900px;
            height: 900px;
            border:4px double seagreen;
            margin: auto;
            float: left;
        }
        
        
    </style>
    
    
    <body>
            
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
                <div class="box"></div>
        
    </body>
    
    <script>
        
        var myChart1 = echarts.init(document.getElementsByClassName('box')[0]);
        
        var myChart2 = echarts.init(document.getElementsByClassName('box')[1]);
        
        var myChart3 = echarts.init(document.getElementsByClassName('box')[2]);
        
        var myChart4 = echarts.init(document.getElementsByClassName('box')[3]);
        
        var myChart5 = echarts.init(document.getElementsByClassName('box')[4]);
        
        //指定图表的配置项和数据
        var option1 =  {
            title: {text:'商户营业状态'},

            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'right',
                y:'bottom',
                data:['营业中','未营业']
            },
            calculable : true,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : ['30%', '40%'],
                    itemStyle : {
                        normal : {
                            label : {
                                show : false
                            },
                            labelLine : {
                                show : false
                            }
                        },
                        emphasis : {
                            label : {
                                show : true,
                                position : 'center',
                                textStyle : {
                                    fontSize : '20',
                                    fontWeight : 'bold'
                                }
                            }
                        }
                    },
                    data:[
                        {value:635, name:'营业中'},
                        {value:310, name:'未营业'},
                    ]
                }
            ]
        };
                            
        
        var option2 =  {
            title:{
                text:'服装店销售统计'
            },
            //提示框组件
            tooltip:{
                //坐标轴触发,主要用于柱状图,折线图等
                trigger:'axis'
            },
            //图例
            legend:{
                data:['销量'],
                x:'right'
            },
            //横轴
            yAxis:{
                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            //纵轴
            xAxis:{},
            //系列列表。每个系列通过type决定自己的图表类型
            series:[{
                name:'销量',
                //折线图
                type:'bar',
                data:[5, 20, 36, 10, 10, 20]
            }]
        };
        
        
        myChart1.setOption(option1);
        
        myChart2.setOption(option2);
        
    </script>
    
    
</html>

4、上图创有六个DIV,其中两个配置了Echarts显示参数,运行如下图:

Echarts入门教程精简实用系列

可以看到,前两个DIV已经有图表展示,剩下的四个DIV都是没有数据的,各位可以拷贝运行下,别忘了先下载echarts.js。

接下来,就是真正入门教程了,提供一波网站快速学习:

echartsAPI参考

echarts案例参考

百度echarts教程

 从各大教程网站的案例中直接练习,结合API调整样式,能在最快的时间上手!

Echarts入门教程精简实用系列

Echarts入门教程精简实用系列

 Echarts入门教程精简实用系列

祝大家学习愉快~

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解2016年09月02日00:00:36 \牧野(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fme.csdn.net%2Fdcrmg) 阅读数:59593
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这