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. Zimbra

    第一步:利用XXE读取配置文件 这里利用了CVE-2019-9670漏洞来读取配置文件,你需要在自己的VPS服务器上放置一个dtd文件,并使该文件能够通过HTTP访问.为了演示,我在GitHub上创建 ...

  2. 团队项目之Scrum1

    小组:BLACK PANDA 时间:2019.11.16 部分 得分项 分数 完成内容 第 1 篇 Scrum 冲刺博客 各个成员在 Alpha 阶段认领的任务 3 明日各个成员的任务安排 3 用户登 ...

  3. CUDA 编程相关；tensorflow GPU 编程；关键知识点记录；CUDA 编译过程；NVCC

    本文章主要是记录,cuda 编程过程中遇到的相关概念,名字解释和问题:主要是是用来备忘: cuda PTX :并行线程执行(Parallel Thread eXecution,PTX)代码是编译后的G ...

  4. CentOS7 忘记Root密码解决方法

    1- 在启动grub菜单,选择编辑选项启动 ​ 2 - 按键盘e键,来进入编辑界面 ​ 3 - 找到Linux 16的那一行,将ro改为rw init=/sysroot/bin/sh ​ 4 - 现在 ...

  5. java8-10-Stream的终止操作

      Stream的终止操作   * allMatch 是否匹配所有 * anyMatch 是否匹配一个 * noneMatch 是否没有匹配一个 * findFirst 返回第一个   * count ...

  6. go语言设计模式之proxy

    代理模式,单元测试用例真的写得详细, 受教~ proxy.go package proxy import ( //"errors" "fmt" ) type U ...

  7. AcWing 166. 数独

    题目地址 https://www.acwing.com/problem/content/description/168/ 题目描述 数独是一种传统益智游戏,你需要把一个9 × 9的数独补充完整,使得图 ...

  8. Aladdin and the Flying Carpet (LightOJ - 1341）【简单数论】【算术基本定理】【分解质因数】

    Aladdin and the Flying Carpet (LightOJ - 1341)[简单数论][算术基本定理][分解质因数](未完成) 标签:入门讲座题解 数论 题目描述 It's said ...

  9. Java四个关键字 this super final static

    一.this ​ 关键字主要有三个应用: this调用本类中的属性,也就是类中的成员变量: this调用本类中的其他方法: this调用本类中的其他构造方法初始化对象,调用时要放在构造方法的首行. 引 ...

  10. LeetCode 205：同构字符串 Isomorphic Strings

    题目: 给定两个字符串 s 和 *t*,判断它们是否是同构的. 如果 s 中的字符可以被替换得到 *t* ,那么这两个字符串是同构的. 所有出现的字符都必须用另一个字符替换,同时保留字符的顺序.两个字 ...