Echarts的初学者应该掌握的知识

最新推荐文章于 2024-05-09 14:18:28 发布
最新推荐文章于 2024-05-09 14:18:28 发布
阅读量2.4k 收藏 4
点赞数
分类专栏： 技术--开发类
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_30546099/article/details/71195354
版权
1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
</body>
2、新建<script>标签引入模块化单文件echarts.js
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
   <!-- ECharts单文件引入 -->
    <script src="../dist/echarts.js"></script>  //为了方便操作，把dist复制到你写的文件的当前目录下（eg:存放到D盘目录下第二层【D:\13级项目组\YuQingWork】，则两个“.”在dist前，最后在访问
echarts.js
）
</body>
3、新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面到echarts.js），引入图表文件见引入ECharts2
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
   <!-- ECharts单文件引入 -->
    <script src="../dist/echarts.js"></script>  //为了方便操作，把dist复制到你写的文件的当前目录下（eg:存放到D盘目录下第二层【D:\13级项目组\YuQingWork】，则两个“.”在dist前，最后在访问
echarts.js
）
   <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '../dist'  //【例如 D:\13级项目组\YuQingWork\dist】
            }
        });
</script>
</body>
4、<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，option见API & Doc
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="../dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '../dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar'// 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 

                option = {
                            tooltip : {
                                trigger: 'axis',
                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            legend: {
                                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
                            },
                            toolbox: {
                                show : true,
                                orient: 'vertical',
                                x: 'right',
                                y: 'center',
                                feature : {
                                    mark : {show: true},
                                    dataView : {show: true, readOnly: false},
                                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : true,
                            xAxis : [
                                {
                                    type : 'category',
                                    data : ['周一','周二','周三','周四','周五','周六','周日']
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value'
                                }
                            ],
                            series : [
                                {
                                    name:'直接访问',
                                    type:'bar',
                                    data:[320, 332, 301, 334, 390, 330, 320]
                                },
                                {
                                    name:'邮件营销',
                                    type:'bar',
                                    stack: '广告',
                                    data:[120, 132, 101, 134, 90, 230, 210]
                                },
                                {
                                    name:'联盟广告',
                                    type:'bar',
                                    stack: '广告',
                                    data:[220, 182, 191, 234, 290, 330, 310]
                                },
                                {
                                    name:'视频广告',
                                    type:'bar',
                                    stack: '广告',
                                    data:[150, 232, 201, 154, 190, 330, 410]
                                },
                                {
                                    name:'搜索引擎',
                                    type:'bar',
                                    data:[862, 1018, 964, 1026, 1679, 1600, 1570],
                                    markLine : {
                                        itemStyle:{
                                            normal:{
                                                lineStyle:{
                                                    type: 'dashed'
                                                }
                                            }
                                        },
                                        data : [
                                            [{type : 'min'}, {type : 'max'}]
                                        ]
                                    }
                                },
                                {
                                    name:'百度',
                                    type:'bar',
                                    barWidth : 5,
                                    stack: '搜索引擎',
                                    data:[620, 732, 701, 734, 1090, 1130, 1120]
                                },
                                {
                                    name:'谷歌',
                                    type:'bar',
                                    stack: '搜索引擎',
                                    data:[120, 132, 101, 134, 290, 230, 220]
                                },
                                {
                                    name:'必应',
                                    type:'bar',
                                    stack: '搜索引擎',
                                    data:[60, 72, 71, 74, 190, 130, 110]
                                },
                                {
                                    name:'其他',
                                    type:'bar',
                                    stack: '搜索引擎',
                                    data:[62, 82, 91, 84, 109, 110, 120]
                                }
                            ]
                        };

                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
5、浏览器中打开echarts.html，就可看到以下效果
Echarts的初学者应该掌握的知识 - 惊艳了谁的时光 - 惊艳了谁的时光？
 

付三三_
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 路径图
05-14
路径图：用于带有起点和重点信息的线数据的绘制，主要用于地图上的航班，路线的可视化。支持二维的直角坐标系和地理坐标系。详细介绍：https://blog.csdn.net/qq_36437172/article/details/106123884
初学者ssm框架整合echarts
09-30
总之，"初学者ssm框架整合echarts"项目为初学者提供了一个实践平台，通过这个项目，学习者不仅可以掌握SSM框架的基本使用，还能了解到数据可视化的重要性和ECharts在实际项目中的应用。随着对这些技术的深入理解和...
ECharts的一些基础知识点
qq_43505386的博客
08-16 553
一、接口 echarts(enterprise charts 图标库) 二、图类 Bar：柱状图 line：折线图 Scatter：散点图 K：K线图 Pie：饼图 Radar：雷达图 Force：力导布局图 三、组件 Axis：坐标轴 Grid：网络 Polar：极坐标 Title：标题 Tooltip：提示 Legend：图例...
eCharts基础详解
最新发布
2301_77404895的博客
05-09 654
echarts图类型设置 1.title:标题组件 2.tooltip:提示框组件 3.legend：图例组件，展现了不同系列的标记(symbol)，颜色和名字 4.xAxis：直角坐标系grid中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴。 5.yAxis:直角坐标系 grid 中的 y 轴，单个 grid 组件最多只能放左右两个 y 轴。 6.series:系列列表。每个系列通过 type 决定自己的图表类型。 seriestype=line ——-折线图
Echarts入门学习前必知的
qq_32506555的博客
08-24 1947
在使用Echarts之前，我一直用的是R的ggplot或者Tableau。但后来发现一个问题缺少简易实现交互式的动态图。虽然R有shiny包，但是如果在线分享成果的话，还是不太方便。除了使用shiny官方服务器，其他貌似也比较复杂。而且Tableau的分享更是要借助官方服务器，而且慢的可怕。对于想要发个链接就能把自己的成果分享出去的同学，可能不是一件容易的事情。直到我遇到了Echarts。所以我们
Echarts指南
weixin_30914981的博客
05-24 144
1.了解ECharts 　　ECharts简单说就是互联网开发程序过程中，后台数据库用以实现数据到图形的映射的一个插件。 　　具体来说一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在PC和移动端设备上，兼容当前绝大部分浏览器，底层以来轻量级的矢量图库Zrender，提供直观，交互丰富，可以高度个性化定制的数据可视化图标。 第一步：下载echarts.js ...
ECharts学习路线图
漫步量化
11-19 2136
ECharts ECharts(Enterprise CHarts)，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库 ZRender，ECharts 提供直观，生动，可交互，可...
echarts模版.rar
06-24
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，灵活的交互功能，以及美观的视觉效果。...对于初学者来说，通过研究这些模板，可以更好地理解和掌握ECharts的使用方法。
Echarts图表可视化大屏显示
03-07
对于初学者来说，掌握Echarts图表可视化大屏显示需要以下几个关键知识点： 1. **Echarts基础知识**：首先，你需要了解Echarts的基本概念，如图表类型、配置项、事件监听等。Echarts的每个图表都是由JSON格式的配置...
JAVA初学者_毕业设计汇总
08-04
在JAVA初学者的毕业设计中，这四个项目——人力资源管理系统、物资管理系统、航空订票系统以及员工管理系统，都是常见的实践课题，旨在帮助学生巩固和应用所学的JAVA编程知识。以下将详细介绍这些系统的相关知识点：...
echarts2.0demo文档
08-24
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它以直观、生动的方式展示数据，广泛应用于Web应用中。...无论是初学者还是经验丰富的开发者，ECharts 2.0都提供了一个强大而易用的数据可视化工具箱。
echarts2.0完整离线学习文档
07-26
Echarts2.0完整学习文档，完整源码在内，图像化类表展示
Echarts最全教程文档和源码
12-03
这几天全身心投入了对echarts的研究,考究官网代码和网上各种杂七杂八代码,最终整理和分析形成了该套最完整的echarts文档,因为文档是采用了word中VBA功能,应用了滚动下拉框形式,所以无法在手机正常查看,该套教程包含了源码+插件+分析+截图+备注+总结,基本上满足工作和日常使用,涵盖了bar,pie,line,map这四种常用的统计图表,至于仪表盘等,其实也是大同小异,相信这份文档能帮你快速和稳定的了解echarts的奥妙!
Echarts基础教程学习笔记
11-14
Echarts基础教程学习笔记，Echarts简介、课程介绍、技能、设备、网络环境的要求和建议
Echarts使用文档
Nie_XiaoGang的博客
02-21 1120
初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了。
Echarts学习一
Soup's Blog
09-25 778
前言：Echarts是一个开源项目，它提供了很多可视化的图表，最重要的是开源的，有兴趣的码农们可以去学一下。 1.Echarts的官方学习文档 ： http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 2.这是在github上开源项目的地址： https://g...
echarts文档解读
热门推荐
退役复学在校大学生，目光所至，皆为华夏
10-11 2万+
元素作为容器，这样绘制完图表可以直接将 canvas 作为图片应用到其它地方，例如在 WebGL 中作为贴图，这跟使用。如果容器是隐藏的，ECharts 可能会获取不到 DIV 的高宽导致初始化失败，这时候可以明确指定 DIV 的。开始支持SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象。将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。可以是 JSON 字符串，也可以是解析得到的对象。解除图表实例的联动，如果只需要移除单个实例，可以将通过将该图表实例。
一小时学会Echarts的概念与应用
zm17671443092的博客
08-05 849
Echarts概念与应用 一.什么是Echarts？ ECharts是互联网开发程序过程中，后台数据库用以实现数据到图形的映射的一个插件。 具体来说一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 简单来说ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值