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）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。