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. flutter 下拉加载+下拉加载

    功能: 1.下拉加载 2.上拉加载 3.显示加载图标 4.更新列表数据,隐藏加载图标 flutter库: flutter_spinkit: ^3.1.0 加载图标 其他:加载列表需要列表,基于上一节的 ...

  2. 读数笔记_python网络编程3(4)

    4.套接字名与DNS 讨论网络地址,描述将主机名解析为原始IP地址的分布式服务 4.1. 主机名与socket 浏览器汇总一般键入域名.有些域名标识整个机构.如,python.org,而另一些指定了主 ...

  3. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

  4. MySql 表结构修改、约束条件、表关系

    表结构修改(alter) 查看表的结构:desc 表名; 修改表名:alter table 表名 rename to 新表名; 修改字段名:alter table 表名 change 旧字段名 新字段 ...

  5. MySQL 优化 (二)

    参数优化 Max_connections (1)简介 Mysql的最大连接数,如果服务器的并发请求量比较大,可以调高这个值,如果连接数越来越多,mysql会为每个连接提供单独的缓冲区,就会开销的越多的 ...

  6. tornado的IOLoop.instance()方法和IOLoop.current()方法区别

    在使用tornado时,经常有人疑惑IOLoop.instance()方法和IOLoop.current()方法的区别是什么. IOLoop.instance() 返回一个全局 IOLoop实例. 大 ...

  7. 005 C/C++ 数据类型_void

    1.void的字面意思是'无类型'.void * 是无类型指针,void * 可以指向任何类型的数据. 2.数据类型的分装: int InitHardEnv(void ** handle); 典型的内 ...

  8. 【转】Cookie和Session和Cache

    1 Cookie和Session Cookie和Session都为了用来保存状态信息,都是保存客户端状态的机制,它们都是为了解决HTTP无状态的问题而所做的努力. Session可以用Cookie来实 ...

  9. webdriver-键盘操作 for java

    2017年01月17日 17:08:25 阅读数:2044 import java.awt.AWTException;import java.awt.Robot;import java.awt.eve ...

  10. 基于Django的Rest Framework框架的url控制器

    本文目录 一 自定义路由(原始方式) 二 半自动路由(视图类继承ModelViewSet) 三 全自动路由(自动生成路由) 回到目录 一 自定义路由(原始方式) from django.conf.ur ...