使用步驟：
所需檔案： graph.jinja2 graph.js graph.css echart.min.js
1.引入echarts 外掛程式檔案放到 echart.min.js
2.準備乙個具備大小的dom容器,在graph.jinja2初始化乙個div, 並指定id，pie_chart_div， bar_chart_div
3.初始化echarts例項物件
var mychart1 = echarts.init(document.getelementbyid('pie_chart_div')
var mychart2 = echarts.init(document.getelementbyid('bar_chart_div'));
4.指定配置項和資料(option)
option =
: (%)'
legend: ,,,
5.將配置項設定給echarts例項物件
pie_chart.setoption(pie_chart_option);
bar_chart.setoption(bar_chart_option);
echarts基礎配置
series xaxis yaxis grid tooltip title legend colorseries系列列表。每個系列通過 type 決定自己的圖表型別
大白話：圖示資料，指定什麼型別的圖示，可以多個圖表重疊。
xaxis：直角座標系 grid 中的 x 軸boundarygap: 座標軸兩邊留白策略 true，這時候刻度只是作為分隔線，標籤和資料點都會在兩個刻度之間的帶(band)中間。
yaxis：直角座標系 grid 中的 y 軸
grid：直角座標系內繪圖網格。
title：標題元件
tooltip：提示框元件
legend：圖例元件
color：調色盤顏色列表
資料堆疊，同個類目軸上系列配置相同的stack值後 後乙個系列的值會在前乙個系列的值上相加。
option =
// 設定x軸的相關配置
xaxis: ;當x或者y axis名字太長，需要把grid引數調整
grid:,圖表位置無法緊貼畫布邊緣的問題:
在grid繪圖網格裡,containlabel(grid 區域是否包含座標軸的刻度標籤,預設不包含)為true的情況下,無法使圖表緊貼著畫布顯示,但可以防止標籤標籤長度動態變化時溢位容器或者覆蓋其他元件,將containlabel設定為false即可解決;
grid:{
containlabel:false
echar使用總結
1 獲取echart例項 在當前js檔案中載入公共元件utils.js,該檔案整合了常用的工具 var utils require utils utils中的方法集合 getecharts getecharts3 elem,option,isnotempty getecharts4 elem,opt...
Echar的學習記錄
echar通常用作統計圖表的製作 可以用很簡單的 對報表的實現。不多說 開始實踐 首先 html 乙個簡單的存放報表的div。通過ajax獲取後台的資料 拼湊到echar 需要的格式option中，然後設定到div中 即可 option的格式可以參見echar的例子以及幫助文件 示例 文件 效果 設...
echarts x軸型別解析
option yaxis series type有四個值分別是 value category time log 1 value 數值軸，適用於連續資料。例如1 2 3 4 5，如果type設定成value，那麼，xaxis.data裡面設定的資料無效，因為xaxis.data是為category服務...