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. c程序内存检测工具 - Valgrind

    常用C程序内存泄露检测工具 https://blog.csdn.net/u012662731/article/details/78652651

  2. django升级2.1python升级3.7时出现的错误："trying to load '%s': %s" % (entry[1], e) django.template.library.InvalidTemplateLibrary:

    django升级2.1python升级3.7时出现如下的错误: "trying to load '%s': %s" % (entry[1], e) django.template. ...

  3. MySQL的高级应用之Explain（完美详细版，看这一篇就够了）

    原文链接: https://blog.csdn.net/wx1528159409/article/details/83819985

  4. python接口自动化根据请求接口类型进行封装

    根据不同的请求类型(GET/POST)进行接口请求封装 import requests import json class RunMain: def __init__(self, url, metho ...

  5. 如何查找jdk安装路径也就是JAVA_HOME配置的环境变量

  6. cf之 前缀和差分

    给定一个n×n的WB矩阵,给定一个k∗k的能把B变成W的橡皮擦,求橡皮擦作用一次后,全为W的行.列总数最大值 连接:http://codeforces.com/contest/1200/problem ...

  7. navicat使用教程-PJ

    navicat使用教程-PJ Navicat Keygen Patch是一款专门针对Navicat系列软件出品的一款小巧实用,功能强大的破解辅助工具.它能够实现对Navicat全系列版本进行激活破解, ...

  8. 2019年最新50道java基础部分面试题（四）

    前35题请移步上几篇文章 36.数组有没有length()这个方法? String有没有length()这个方法?  数组没有length()这个方法,有length的属性.String有有lengt ...

  9. 元数据MetaData（五）

    JDBC的元数据接口有: DatabaseMetaData数据库级 ResultSetMetaData结果集级 一.DatabaseMetaData 在对数据源进行连接以后,得到一个Connectio ...

  10. docker修改系统时间总结

    最近弄docker烦躁的一笔,时区问题踩了不少坑,为了以后再遇到类似问题再花时间查资料,特记录一下... Ubuntu: echo "Asia/Shanghai" > /et ...