Echarts圖表是百度的良心產品,最近項目中需要用到雷達圖以及儀表盤圖,毫不猶豫的選擇了Echarts進行圖表的制作。Echart圖表制作我也是根據echarts官網的一些案例以及配置手冊制作的。
一、首先是在HTML前台頁面中創建存放圖表的div
二、初始化圖表,就是告訴生成的圖表你需要放在哪里?
var yibiao=echarts.init(document.getElementById(String(i+1)));
這里面存在一個問題,如果是div是在JS中創建的,那么就存在echarts圖表初始化失敗,因為我之前做的儀表盤圖的個數是變化的,五個、六個、三個,之前想的也是動態生成div,有幾個圖就生成幾個div,但是一直存在初始化失敗的問題,后來無奈只好在HTML頁面中按照最多的個數創建的,不太友好吧,無奈。
三、創建echarts圖表
yibiao.setOption({})
四、給圖表添加數據
這里面也有坑啊,相對於一般的
value[]中括號存放的是數組的形式,賦值的時候,你就直接給她一個數組就行。其中var years=[];
但是,對於下面這種,可是不行的
這個是雷達圖中的一個參數對於這種[{}],這種東西好惡心,因為我們的這種圖的指標不確定,所以text不確定有幾個,你若是把它當做數組循環出來,是解析不了的,echarts圖都不給你出了,於是還是找出最大值來,給他賦值
就是這些東西,妹的搞得我頭暈腦脹的。