ECharts入门教程

2024-10-09 15:06:16

Echart

官网：https://echarts.apache.org/zh/index.html
下载页面：https://echarts.apache.org/zh/download.html
演示地址：https://echarts.apache.org/examples/zh/index.html
文档：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

echarts是国内百度团队的产物。charts 完全免费，代码开源。

底层为canvas ，支持图表相对要多一些。

1、canvas特点：

依赖分辨率
不支持事件处理器
弱的文本渲染能力，能够以.jpg、.png格式保存结果图像
最适合图像密集型的游戏，一旦其位置发生拜年话，其中的许多对象会被频繁重绘

2、ECharts 特性

ECharts 包含了以下特性：

丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
多种数据格式无需转换直接使用: 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。
千万数据的前端展现: 通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。
移动端优化: 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
多渲染方案，跨平台使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。
深度的交互式数据探索: 提供了图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等，传入的数据也可以是多个维度的。
动态数据: 数据的改变驱动图表展现的改变。
绚丽的特效: 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。
通过 GL 实现更多更强大绚丽的三维可视化: 在 VR，大屏场景里实现三维的可视化效果。
无障碍访问（4.0+）: 支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问！

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
     引入 echarts.js
    <script src="echarts.min.js"></script>
</head>
<body>
     为ECharts准备一个具备大小（宽高）的Dom
    <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 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

到此这篇关于ECharts入门教程的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

Echarts横向堆叠柱状图和markLine实例详解

目录 1.Echarts 横向堆叠柱状图 + markLine 效果图代码如下: 2.Echarts 横向堆叠柱状图 + markLine 效果图代码如下总结 1.Echarts 横向堆叠柱状图 + markLine 效果图根据月份计算百分比展示markLine 思路: 根据月份计算百分比展示markLine,例如3月就是25%,这里的图表是数值,所以markLine要展示百分比需要进行一下计算,思路是在series里添加一个专门为了markLine处理的(这里是双柱子所以要采用这种方法
Echarts.js实现水滴球和海洋效果

一.水滴球 <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <script src="echarts.min.js"></script> <script src="echarts-liquidfill.js"></script> <
vue+echarts实现条纹柱状横向图

本文实例为大家分享了vue+echarts实现条纹柱状横向图的具体代码,供大家参考,具体内容如下实现效果: <template> <div id="BusinessTop5Chart" style="flex: 1; height: 300px; width: 614px; margin-left: 10px"></div> </template> <script> import { getNoteM
如何利用js读取excel文件并绘制echarts图形

目录 1.场景描述 2.需求描述 3.功能实现 4.尾言 1.场景描述通常来说,前端要拿到excel数据,都是先上传存储数据库,然后再请求后端接口,获取数据. 但有100个产品经理,就会有101个不同的需求. 本文以自己的vue项目为例. 2.需求描述现有一张excel财务报表,需要根据这张excel表绘制成各种echarts图形,用于年度汇报. 不经过后端,前端独立完成. 3.功能实现首先,为了将excel数据绘制成echarts图表,前端得拿到excel数据. 这里我们借助js-xls
如何利用Echarts根据经纬度给地图画点画线

目录 1.相关介绍 2.地图绘制 3.根据经纬度进行标点画线总结 1.相关介绍在使用Echar进行绘制地图对象,首先我们需要地图的json文件,Echarts依赖默认会引入这个相关的json文件,所以后续使用这个地图可以之间引用这里的json文件进行绘制Echarts地图. 但是在后续重新构建项目的时候发现了一个问题,Echarts的依赖包下没有这个map文件了,我心想这不人麻了,这json文件我要去哪找.后面再对比版本之后发现,在5.0版本之前Echarts会默认将这些Map的json文件
Vue+Echarts实现柱状折线图

本文实例为大家分享了Vue+Echarts实现柱状折线图的具体代码,供大家参考,具体内容如下 vue处理json数据渲染柱状折线图 HTML: <div id="lineCharts" style="width: 100%; height: 500px; margin-top: 20px"></div> JS: drawLineCharts() { let data = {sid: "02fertdfg0221&qu
Echarts如何重新渲染实例详解

当我点击饼图时,出现相应的内容,并重新渲染饼图展示内容饼图点击事件 this.conechart.on('click', (params) => { params.name }); 获取的是点击的对应的板块名利用获取的板块名,去接口调取对应的数据 , 调取数据是异步调用 ,所以重新渲染视图要在异步中渲染,否则同步渲染不出数据 var options = this.conechart.getOption() options.series[0].data = res.data this.con
Vue使用echarts定制特殊的仪表盘

本文实例为大家分享了Vue使用echarts定制特殊仪表盘的具体代码,供大家参考,具体内容如下实现的效果:(初始化以及浏览器resize的时候数字和弧形条均为递增动画) HTML部分:  <div class="main-echarts-contianer" ref="main"> </div> CSS部分: .main-echarts-contiane
一文教会你从零开始画echarts地图

目录 echarts地图制作基础配置数据渲染嵌入文字地图下钻结合水印制作级联效果 visualMap 总结 echarts地图制作离线地图下载地址https://datav.aliyun.com/tools/atlas/index.html echarts文档地址https://echarts.apache.org/zh/option.html 基于VUE编写,其他框架请自行转换,大同小异基础配置先让地图内容出来,npm安装步骤省略,请参考官方文档,创建的div必须设置宽度和高度
ECharts入门教程

Echart 官网:https://echarts.apache.org/zh/index.html 下载页面:https://echarts.apache.org/zh/download.html 演示地址:https://echarts.apache.org/examples/zh/index.html 文档:https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EChar
Python pyecharts模块安装与入门教程

目录 pyecharts产生背景一.pyecharts模块安装二.pyecharts入门 1.基础折线图 2.pyecharts配置选项 pyecharts产生背景 Echarts是由百度开源的数据可视化,凭借良好的交互性和精巧的图表设计,得到众多开发者的认可,而python很适合用于数据处理,数据分析遇到数据可视化时pyecharts就产生了. 官网链接:https://pyecharts.org/#/ 画廊pyecharts-gallery pyecharts支持的图表众多,官方提供了画
ABP(现代ASP.NET样板开发框架)系列之二、ABP入门教程详解

ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WEB应用程序框架和项目模板. ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate ABP 的由来 "DRY--避免重复
Python中强大的命令行库click入门教程

前言我们的游戏资源处理工具是Python实现的,功能包括csv解析,UI材质处理,动画资源解析.批处理,Androd&iOS自动打包等功能.该项目是由其他部门继承过来的,由于绝大部分代码不符合我们的业务需求,所以进行了大重构.删除了所有业务代码,仅保留了python代码框架.项目中命令行参数解析是自己实现的,极其不优雅,也忍了这么久.打算找时间用click重写.所以最近学习了click,下面本文的内容是click的入门教程,初学者们可以来一起学习学习. 官网镜像地址: http://click
零基础易语言入门教程(六)之逻辑型命令

逻辑型命令,就是非真即假的. 具体方法和步骤如下所示: 1.如果(): 属于逻辑型,不是真就是假,这种时间我们基本在编写程序时,会有两个选择方向,见下图所示: 2.如上图,如果命令属于逻辑型数据,且有两条输出方向,当我们在如果命令里填写的为真,那么我们的系统将会显示输出真的一个,反之则为假. 3.如果()命令在我们编写程序时属于常用命令,他在运行时我们需要给他一个条件,然后才能输出内容,有了条件我们在运行时给他一个输出方向即可, 以上所述是小编给大家介绍的零基础易语言入门教程(六)之逻辑型命令的
零基础易语言入门教程(五)之逻辑型数据类型

在上篇文章给大家介绍了零基础易语言入门教程(四)之数据类型,上篇针对数值到文本类型知识,今天给大家介绍下逻辑型数据. 具体方法和步骤如下所示: 1.逻辑型数据非真即假: 首先申请一个局部变量(A)类型为:逻辑型,编写代码为:A=1>2,那么输出的结果应为假,因等于1是赋值与1,然后代码中写道1大于2,所以这是假的,见下图所示: 2.关系运算符: 在上图大家需注意的是,A后面的等于号是赋值符号,而后面的≥,≠,<一些符号则是关系运算符. 关系运算符不是非要设置变量给其赋值才可以使用的,同样他可以
零基础易语言入门教程(四)之数据类型

我们一起了解下易语言的数据类型,跟我们现实生活是一样的,分为文本型和数值型,即是我们所说的文科生和理科生的区别. 参考文章:详解易语言中的数据类型方法和步骤如下所示: 1.数值型(到数值命令): 使用该命令可将文本型等一类数据更改为数值型:我们来输入一行代码看看其作用: 2.到文本()命令: 我们先输入一行代码试试,见下图 3.小结: 每一行代码前后的数据类型必须转换为同一种,方可进行相连,相加,"+"在数据为文本型时是连接作用,数值型的跟数学里的符号一样. 以上所述是小编给大家介绍
微信公众平台开发入门教程(图文详解)

在这篇入门教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯及XML语言基础.如果你还没有,那么请先学习相关知识. 我们将使用微信公众账号方倍工作室(账号:pondbaystudio,二维码在最底部)作为讲解的例子. 这篇入门教程将引导你完成如下任务: 创建百度云平台应用启用微信公众平台开发模式获取订阅.文字.图片.语音.视频消息回复文本.图文及音乐消息程序开发创建百度云应用申请账号登录http://developer.baidu.com/bae ,使用邮箱或者手机
CSS网页布局入门教程6：左列固定，右列宽度自适应

在实际应用中,有时候需要左栏固定宽度,右栏根据浏览器窗口大小自动适应,在CSS中实现这样的布局方式是简单可行的,只需在设置左栏的宽度即可,如上例中左右栏都采用了百分比实现了宽度自适应,而我们只需要将左栏宽度设定为固定值,右栏不设置任何宽度值,并且右栏不浮动,代码如下: 复制代码代码如下: #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 3
HTML 30分钟入门教程

运行下面的代码就可以了 HTML 30分钟入门教程 h1 {text-align:center} p {text-indent:2em; line-height:140%; margin:auto 10px} span {margin:3px} .code { border:solid 1px gray; background-color:#eee} .name { font-weight:bold } dl {margin-left:20px} dt {font-weight:bold} .t

ECharts入门教程

Echart

1、canvas特点：

2、ECharts 特性

示例：

相关推荐

随机推荐