2022.10.12本人第一次使用echarts，接下来就让我和大家一起介绍echarts的用法。

I am using echarts for the first time, so let me introduce the usage of echarts with you.

什么是echarts?

what is echarts

ECharts英文为Enterprise Charts，是商业级数据表。它是一个使用JavaScript 实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器(IE9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。英文为企业图，是商业级数据表。它是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器(IE9/10/11)，Chrome，火狐，Safari等)，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于BI的漏斗图，仪表盘，并且支持图与图之间的混搭。图提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于BI的漏斗图，仪表盘，并且支持图与图之间的混搭.
除了已经内置的包含了丰富功能的图表，ECharts还提供了自定义系列，只需要传入一个renderltem函数，就可以从数据映射到任何你想要的图形。除了已经内置的包含了丰富功能的图表，还提供了自定义系列，只需要传入一个效果图函数，就可以从数据映射到任何你想要的图形。

ECharts (Enterprise Charts) are commercial charts. It is an open source visualization library implemented using JavaScript, can run smoothly on PC and mobile devices, compatible with most of the current browsers (IE9/10/11, Chrome, Firefox, Safari, etc.), the underlying rely on vector graphics library ZRender, provide intuitive, interactive rich, Highly customizable data visualization charts. English for enterprise chart, is a commercial level data table. It is an open source visualization library using JavaScript, can run smoothly on PC and mobile devices, compatible with most of the current browsers (IE9/10/11), Chrome, Firefox, Safari, etc.), the underlying dependence on the vector graphics library ZRender, provide intuitive, interactive rich, Highly customizable data visualization charts.

ECharts provides regular line chart, histogram, scatter plot, the pie chart, the chart, box for statistical charts, used for geographic data visualization map, heat map, chart, diagram for relational data visualization, figure treemap, the rising sun, multidimensional data visualization parallel coordinates, figure, with a funnel for BI dashboard, It also supports mixing and matching between graphs. Figure provides regular line chart, histogram, scatter plot, the pie chart, the chart, box for statistical charts, used for geographic data visualization map, heat map, chart, diagram for relational data visualization, figure treemap, the rising sun, multidimensional data visualization parallel coordinates, figure, with a funnel for BI dashboard, It also supports mixing and matching between graphs.

In addition to the already built in graphs with rich functionality, ECharts also provides a custom set of renderltem functions that can map data to any graph you want. In addition to the already built in charts with rich features, there is also a custom series that simply needs to pass in a rendering function to map data to any graph you want.

如何使用echarts?

how use echarts

首先进入官方网站ECharts 安装 | 菜鸟教程

First to enter the official website ECharts install | novice tutorial

推荐下载的是echarts.mini.js(4.7.0)版本，也可以直接使用script进行引入。

The recommended download is echarts.mini-. js(4.7.0) version, can also be directly used to introduce script.

script引入链接：

script import link:

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

如图：

我这边使用的是echarts的第一个示例：

I'm using the first example of echarts:

<!-- 为 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>

然后让我逐步进行解析：

Then let me break it down step by step:

<!-- 设置图表的整体样式 --><div id="main" style="width: 600px;height:400px;"></div>

 // 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));

option是一个图表选项，具体属性如下：

option is a chart option with the following properties:

var option{}

然后就是title标题：

And then the title title:

// 标题title: {text: 'ECharts 入门示例'},

// tooltip 提示框组件tooltip: {},

tooltip里面的属性有：

// legend 设置图例位置legend: {data: ['销量']},

legend用来设置图例的位置，具体属性有：

legend sets the location of the legend. The attributes are as follows:

// xAxis 设置x轴的刻度xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},// yAxis 设置y轴的刻度yAxis: {},

Axis属性可以用来设置x轴与y轴的刻度，具体属性如下：

The Axis property can be used to set the scale of the x and y axes. The specific properties are as follows:

// series 系列类型series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]

series用于设置系列类型：包括line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）

series is used to set the types of the series: line, bar, pie, scatter, graph, tree

echarts图表入门级教程（An introductory chart tutorial）相关推荐

【ECharts】echarts数据化图表入门级教程（附10个案例）
echarts数据化图表入门级教程(附10个案例) 01-Echarts-介绍 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部 ...
vue中 ECharts 图表使用教程
ECharts 数据可视化图表有很多,今天就以饼图为例第一步: 先来安装echarts npm install echarts --save 第二步: 在main.js中全局引用ECharts,当然 ...
【ECharts系列|01入门】从入门到天黑【入门级教程实战】
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求. ECharts 遵循 Apache-2.0 开源协议,免费商用. ECharts 兼容当前绝大部分 ...
Echarts清空图表：There is a chart instance already initialized on the dom.
There is a chart instance already initialized on the dom. 有一个关于dom的图表实例已初始化. 我们在使用图表的时候,常用的使用场景就是数据展 ...
使用Echarts制作图表基础教程
在我们前端开发的过程中,会涉及到很多图表,如果用源生的js和css3制作的话,需要耗费大量的时间,同时代码量需求也比较大,那么我们在开发的过程中讲究的是效率,如果单单在制作图表的过程中就耗费了大量的时 ...
保姆级教程｜ECharts图表插件一文搞懂！
黑马程序员视频库播妞QQ号:3077485083 传智播客旗下互联网资讯.学习资源免费分享平台在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一 ...
如何在微信小程序中使用ECharts图表
在微信小程序中使用ECharts 1. 下载插件首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目. 下载链接:ecomfe/echarts-for-weixi ...
echarts图表插件炫光的分布地图动画特效
echarts图表插件炫光的分布地图动画特效作品介绍 1.网页作品简介方面 :地图html5图表html5动画 2.网页作品编辑方面:此作品为学生个人主页网页设计题材,代码为简单学生水平 html+ ...
转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...

echarts图表入门级教程（An introductory chart tutorial）

什么是echarts?

如何使用echarts?

echarts图表入门级教程（An introductory chart tutorial）相关推荐

最新文章

热门文章