關於Echarts的操作

1,首先聲明,一下的操作基本上都是基於3.0以上的版本

2,去Echarts官網上下載所需要的原材料:Echarts的js文件,以及可能會用的Map的js或json文件,然後放入項目中,在對應的jsp或html中引入

然後需要創建一個div,用於承載將來的報表圖片

例如:<div id="echart" style="width: 700px;height: 600px;margin-left: 80px;margin-top: 50px;"></div>

3,對於非地圖一類的報表文件操作基本如下

var mychar = echarts.init(document.getElementById("echart"));
  mychar.setOption(option);

其中的option爲報表所依賴的數據的json載體,在這個json中包含有具體的報表類型的設置:series的type屬性

例如:一個柱圖的報表的option

var option = {
   color: ['#3398DB'],
   tooltip : {
       trigger: 'axis',
       axisPointer : {            // 座標軸指示器,座標軸觸發有效
           type : 'shadow'        // 默認爲直線,可選爲:'line' | 'shadow'
       },
       triggerOn:'click'
   },
   grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
       containLabel: true
   },
   xAxis : [
       {
           type : 'category',
           data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           axisTick: {
               alignWithLabel: true
           }
       }
   ],
   yAxis : [
       {
           type : 'value'
       }
   ],
   series : [
       {
           name:'直接訪問',
           type:'bar',
           barWidth: '60%',
           data:[10, 52, 200, 334, 390, 330, 220]
       }
   ]
}

4,下面是關於Map格式的操作,首先這部分操作不同於上面的報表,他的地圖操作需要引入所對應地圖的js或json文件

如果下載的是地圖的json文件

var mychar = echarts.init(document.getElementById("echart"));
 
  $.get(url+"/js/map/beijing.json",function(json){
//前邊的部分爲地圖json文件位置
  echarts.registerMap('beijing',json);
//第一個參數爲map的具體類型即什麼的地圖,第二個參數爲上一行function的參數
  mychar.setOption(JSON.parse(sj));
//括號裏面爲地圖的數據的json
  });

如果下載的是地圖的js文件

則需要以引入js的方式先將地圖的js引入

<script type="text/javascript" src="${pageContext.request.contextPath}/js/map/china.js"></script>

var mychar = echarts.init(document.getElementById("echart"));

mychar.setOption(); //option中參數即爲地圖的數據的json,其中地圖的類型也在裏面進行設置,比如此處引入china.js 所以需要設置series的mapType爲china



發佈了36 篇原創文章 · 獲贊 13 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章