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. iOS中点击按钮跳转到外部浏览器和内部打开

    如图所示,需要实现点击一个按钮,跳转到指定网页: -(void)pushBtnCellClickDeleate{ NSLog(@"跳转"); //在APP内部打开指定网页 UIWe ...

  2. 使用MailKit发送带有内嵌图片的邮件且图片不显示成附件

    使用MailKit发送带有内嵌图片的邮件且图片不显示成附件 参考文章:MailKit---发送邮件 注意 在邮件客户端中是否显示内嵌图片为附件依据不同邮件有所不同,暂经测试Outlook和qq不显示为 ...

  3. 记录SqlServer安装后局域网无法连接

    ,如果安装的时候 已经选择 “混合模式(SQL Server 身份验证和Windows 身份验证)(M)”, 并且已经为 SQL Server 系统管理员分配了账户和密码 则不用重新配置. 配置方法如 ...

  4. Python numpy tensorflow 中的 点乘 和 矩阵乘法

    1)点乘(即“ * ”) ---- 各个矩阵对应元素做乘法  若 w 为 m*1 的矩阵,x 为 m*n 的矩阵,那么通过点乘结果就会得到一个 m*n 的矩阵. 若 w 为 m*n 的矩阵,x 为 m ...

  5. AcWing 799. 最长连续不重复子序列

    网址  https://www.acwing.com/solution/AcWing/content/2069/ 题目描述给定一个长度为n的整数序列,请找出最长的不包含重复数字的连续子序列,输出它的长 ...

  6. 如何在AbpNext项目中使用Mysql数据库

    配置步骤: 1.更改.Web项目的appsettings.json的数据库连接字符串.如:server=0.0.0.0;database=VincentAbpTest;uid=root;pwd=123 ...

  7. C#开发BIMFACE系列20 服务端API之获取模型数据5：批量获取构件属性

    系列目录     [已更新最新开发文章,点击查看详细] 在<C#开发BIMFACE系列18 服务端API之获取模型数据3:获取构件属性>中介绍了获取单个文件/模型的单个构建的属性,本篇介绍 ...

  8. 纠错：Feign 没用 短连接

    Feign 默认不是 短连接 疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 疯狂创客圈(笔者尼恩创建的高并发研习社群)Springcloud 高并发系列文章,将为大 ...

  9. Spring提供JdbcTemplate&NamedParameterJdbcTemplate

    JdbcTemplate主要提供以下五类方法: execute方法:可以用于执行任何SQL语句,一般用于执行DDL语句: update方法及batchUpdate方法:update方法用于执行新增.修 ...

  10. 使用os模块动态获取目录或文件路径

    在接口自动化测试框架中,我们的代码除了能在本地运行,也能在不在修改代码的前提下在其他的环境下能够运行,这样才能达到高复用性和低维护成本,我们在接口测试的模块调用中,会定义很多相关路径,而这些路径必须使 ...