Echarts具有丰富的图表,可以说是数据可视化的神器；

1.下载Echarts

官网下载地址：https://echarts.baidu.com/index.html

2.Echarts引用案例—柱状图

<head>

    <script src="C:\Users\bt.cn\Desktop\echarts.min.js"></script>

</head>

<body>

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

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var option = {

            title: {

                text: 'ECharts 示例',

                subtext: '百果园水果销量'

            },

            tooltip: {trigger: 'axis'},

            legend: {

                data:['一月销量','二月销量']

            },

            toolbox: {

                show : true,

                feature : {

                    dataView : {show: true, readOnly: false},

                    magicType : {show: true, type: ['line', 'bar']},

                    restore : {show: true},

                    saveAsImage : {show: true}

                }

            },

            calculable : true,

            xAxis:{

                type:'category',

                data: ["苹果","橘子","火龙果","车厘子","榴莲","百香果"]

            },

            yAxis:{type : 'value'},

            series: [

                {

                    name: '一月销量',

                    type: 'bar',

                    data: [5, 20, 36, 10, 10, 20],

                    color:'#CC0066'

                },

                {

                    name: '二月销量',

                    type: 'bar',

                    data: [6, 15, 36, 15, 20, 15],

                    color:'#009999',

                    itemStyle: {

                        normal: {

                            label: {

                                show: true,      //开启显示

                                position: 'top', //在上方显示

                                textStyle: {     //数值样式

                                    color: 'black',

                                    fontSize: 16

                                }

                            }

                        }

                    },

                }

            ]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

https://www.cnblogs.com/OliverQin/p/11077590.html

https://blog.csdn.net/qq_40162735/article/details/81977068

https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

JavaScript—数据可视化（ECharts）的更多相关文章

  1. react_app 项目开发 (9)_数据可视化 ECharts

    数据可视化 ECharts yarn add echarts echarts-for-react

  2. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  3. 前端数据可视化echarts.js

    一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...

  4. 2018年最佳JavaScript数据可视化和图表库

    现在有很多图表库,但哪一个最好用?这可能取决于许多因素,如业务需求,数据类型,图表本身的目的等等.在本文中,每个JavaScript图表库将与一些关键因素进行比较,包括图表类型,商业或免费和开源状态. ...

  5. JavaScript数据可视化编程学习（一）Flotr2，包含简单的，柱状图，折线图，饼图，散点图

    一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...

  6. JavaScript数据可视化编程学习（二）Flotr2，雷达图

    一.雷达图 使用雷达图显示多维数据. 如果你有多维的数据要展示,那么雷达图就是一种非常有效的可视化方法. 由于雷达图不常用,比较陌生,所以向用户解释的时候有一些难度.注意使用雷达图会增加用户认知负担. ...

  7. JavaScript数据可视化编程书籍上面的例子(flotr2)

    先看demo再看例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. 【数据可视化-Echarts】Echart基础

    林峰老师Echart基础课程笔记

  9. vue3 数据可视化项目

    可视化面板介绍 ​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. 01-使用技术 完成该项目 ...

随机推荐

  1. 使用NodeJS模块-NodeJS官方提供的核心模块

    除了使用自己写的本地模块以外,NodeJS可以使用另外两种类型的模块,分别是NodeJS官方提供的核心模块和第三方提供的模块 NodeJS官方提供的核心模块 NodeJS平台自带的一套基本的功能模块, ...

  2. RMAN DUPLICATE DATABASE with SET NEWNAME failed: RMAN-05501 RMAN-05517 (Doc ID 387093.1)

    RMAN DUPLICATE DATABASE with SET NEWNAME failed: RMAN-05501 RMAN-05517 (Doc ID 387093.1) APPLIES TO: ...

  3. Pyhton 连接数据库

    Python连接MySql 步骤 开始 创建connection 获取cursor 操作过程 SQL语句 执行查询 执行命令 获取数据 处理数据 关闭游标:cursor.close() 关闭连接:co ...

  4. Linux：FTP服务器的搭建

    FTP服务器的简介 系统用户 即系统本机的用户.Linux一般不会针对实体用户进行限制,因此实体用户可以针对整个文件 系统进行工作.但通常不希望他们通过FTP方式远程访问系统. 虚拟用户 只能采用FT ...

  5. JetBrains IntelliJ IDEA 2019 for Mac(Java集成开发环境) 2019.3.1

    IntelliJ IDEA 2019中文激活版已全新上线,intellij idea mac是目前编程人员最喜欢的Java集成开发环境,具备智能代码助手.代码自动提示.重构.J2EE支持.Ant.JU ...

  6. 201871010111-刘佳华《面向对象程序设计（java）》第十四周学习总结

    201871010111-刘佳华<面向对象程序设计(java)>第十四周学习总结 实验十二  Swing图形界面组件(一) 实验时间 2019-11-29 第一部分:基础知识总结 1.设计 ...

  7. 201871010132--张潇潇--《面向对象程序设计（java）》第十三周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  8. layUI学习第四日：layUI布局系列一

    1.栅格布局规则 1.1 layui-row定义行,如:<div class="layui-row"></div> 1.2 layui-col-md*这样的 ...

  9. python之海龟绘图

    1. 基本功能介绍 在海龟作图中,我们可以编写指令让一个虚拟的(想象中的)海龟在屏幕上来回移动.这个海龟带着一只钢笔,我们可以让海龟无论移动到哪都使用这只钢笔来绘制线条.通过编写代码,以各种很酷的模式 ...

  10. seq参数 RANDOM 参数 openssl参数 cut参数

    #seq命令用于以指定增量从首数开始打印数字到尾数 语法: [2] seq [选项] 首数 尾数 [3] seq [选项] 首数 增量 尾数选项: seq 实例 一 存入数据库 然后 输出数据库的代码 ...