簡述Echart 基本用法使用

2021-10-11 21:07:27 字數 1055 閱讀 6063

echarts常用配置梳理:

1.首先例項化乙個echart例項,即var echart = echarts.init(box);

2.通過setoption 配置echarts例項 (配置是核心)

其中title

title. text = 『***』 主標題文字

可以設定 left top right bottom 等 控制文字標題位置

tooltip(提示文字框)

效果圖:

legend(圖例)

legend. data

如果 data 沒有被指定,會自動從當前系列中獲取。多數系列會取自 series.name 或者 series.encode 的 seriesname 所指定的維度。如 餅圖 and 漏斗圖 等會取自 series.data 中的 name。

series(系列列表)

每個系列通過 type 決定自己的圖表型別

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

document<

/title>

echart高階使用 EChart使用簡單介紹

1 title 寫標題,屬性如下 show false true 標題是否顯示 text 標題內容 textstyle修飾標題樣式 subtext 副標題,也可以算是內容 subtextstyle修飾副標題樣式 2 legentd 圖例元件展現了不同系列的標記 symbol 顏色和名字 show f...

echart高階使用 Echart使用總結

水監測圖表.gif 1 專案中用到的一些屬性 const options yaxis else,折線點設定為實心點 symbolsize 12,折線點的大小 showbackground true,backgroundstyle itemstyle opacity 1 2 echart初始化的時候獲...

echart使用小結

寫在前面。定義的接收圖表 的容器哦必須設定寬高。不然可能找不到就報錯 cannot read property getattribute of null 如果在vue專案裡面,寫了寬高還報這個錯就可能是頁面的容器還沒有載入完,他還沒有找到。動態新增資料 引入echart import echarts...