Echarts入门教程精简实用系列

引语: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显示参数,运行如下图:

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

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

echartsAPI参考

echarts案例参考

百度echarts教程

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

祝大家学习愉快~

原文地址:https://www.cnblogs.com/nanyang520/p/11002189.html

时间: 2024-10-13 09:24:34

Echarts入门教程精简实用系列的相关文章

echarts入门教程

一.echarts介绍 ECharts是由百度团队开发的,可高度个性化定制的数据可视化图表库.它的底层依赖轻量级的Canvas类库ZRender,是一个纯JavaScript的图标库,兼容(IE8/9/10/11,Chrome,Firefox,Safari等)主流浏览器,可以运行在PC和移动设备上. 二.完成一个简单图标 废话不多说,一起来完成一个简单的图表,体验一下ECharts的神奇吧! 1.引入ECharts ECharts3开始不再强制使用AMD的方式按需引入,那么简单粗暴,直接在官网下

gitbook 入门教程之小白都能看懂的 Gitbook 插件开发全流程

什么是插件 Gitbook 插件是扩展 GitBook 功能(电子书和网站)的最佳方式. 只要是 Gitbook 默认没有提供的功能,基于插件机制都可以自行扩展,是插件让 Gitbook 变得更加强大. 本文将全面介绍插件的相关知识并重点介绍插件开发的全流程,只有熟悉插件开发流程才能做到有的放矢,心中有数,进而开发出自己的插件. 关于插件请参考 Gitbook 入门教程高级进阶系列文章,本文重点讲解开发 Gitbook 的基本流程. gitbook 入门教程之插件介绍 gitbook 入门教程之

ECharts入门学习教程

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表.这里给大家讲解两个案例带大家入门ECharts. 入门 Demo 01 如下面 demo 展示,我们尝试插入一个简单的柱形图: 下载 ECharts ,由于是初学,随便下什么版本.然后像普通引入外部

基于DDD的现代ASP.NET开发框架--ABP系列之2、ABP入门教程

点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WEB应用程序框架和项目模板. ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://gith

SeaJS入门教程系列之使用SeaJS(二)

SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJS的使用方法.关键方法的使用等,需要的朋友可以参考下 下载及安装 要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置.SeaJS项目目前托管在GitHub上,主页为 https://github.com/seajs/seajs/ .可以到其git库的buil

WPF入门教程系列(一) 创建你的第一个WPF项目

WPF入门教程系列(一) 创建你的第一个WPF项目 WPF基础知识 快速学习绝不是从零学起的,良好的基础是快速入手的关键,下面先为大家摞列以下自己总结的学习WPF的几点基础知识: 1) C#基础语法知识(或者其他.NET支持的语言):这个是当然的了,虽然WPF是XAML配置的,但是总还是要写代码的,相信各位读者应该也都有这个基础了. 2) HTML语言:虽然WPF是窗体程序但是由于使用的XAML语言,如果以前接触过HTML.XHTML.ASP.NET之路的东西的话会,接受这些标签会很有帮助的,如

WPF入门教程系列(二) 深入剖析WPF Binding的使用方法

WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProperty)只能拥有一个binding. 这一点可以通过设置binding对象的方法名得知: public static BindingExpressionBase SetBinding( DependencyObject target, DependencyProperty dp, BindingB

Angular系列----AngularJS入门教程04:迭代器过滤(转载)

我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视着你的应用,并且在发生回归的时候迅速报告. 请重置工作目录: git checkout -f step-3 我们的应用现在有了一个搜索框.注意到页面上的手机列表随着用户在搜索框中的输入而变化. 步骤2和步骤3之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 控制器 我们对控制器不做

Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图