echarts學習（上）

時間 2019-11-21

標籤 echarts 學習简体版

原文原文鏈接

echarts 學習之路

學習思路

github地址:https://github.com/lisongyu/echarts-learnjavascript

初識echarts

echarts官方文檔

實例
1. 入門教程
2. 主要實例分析（折線爲主，柱狀次之，其餘輔助）
3. 主題學習
文檔
1. 簡介
2. 名詞解釋
3. 圖表類型
4. 引入ECharts
5. 自定義構建echarts單文件
6. 初始化
7. 實例方法
8. 選項
9. 圖數據表示
10. 多級控制設計
知識點總結html

添加多條圖例多條數據

/**
* 添加多個圖例，多條數據即可實現
*/
 legend: {
   data:['進口量','出口量']//多條數據
         }
  {
   "name":"進口量",
   "type":"bar",
   "data":[5, 20, 40, 10, 10, 20]//X軸對應的數值
    },
    {
   "name":"出口量",
    "type":"bar",
   "data":[50, 120, 10, 70, 40, 62]
                        }

參考頁面 morelegend.htmljava

添加平均值，最大值最小值

/**
* 添加平均值，最大值最小值
*/
//最大值與最小值
  markPoint : {
  data : [
     {type : 'max', name: '最大值'},
     {type : 'min', name: '最小值'}
         ]
      },
//平均值
     markLine : {
     data : [
     {type : 'average', name: '平均值'}
            ]
     }

參考頁面 average.htmljquery

折線與柱狀圖混合

/**
* 折線與柱狀圖混合
*/
 yAxis : [
 {
type : 'value'
  },
   //第二個縱軸座標
   {
    type : 'value',
    name:'%'
   }
   ],
   //設置數據
   series : [
   {
  "name":"今年國內生產總值",
  "type":"bar",
  "data":[5, 20, 40, 10, 10, 20]//X軸對應的數值
},
   {
   "name":"去年比例",
   "type":"line",
    //結合
    yAxisIndex: 1,//Y軸第二座標的索引
    "data":[50, 80, 10, 70, 40, 62]//X軸對應的數值
    }
        ]

參考頁面 linebar.htmlgit

響應式

/**
* 需結合jquery
*/
$(window).resize(function () {
 myChart.resize(option);
  });

編寫本身的echarts圖表

要製做屬於本身的圖表首先一點就要應用到Ajax技術，由於每一個圖表中都有數據，而利用Ajax能夠將數據與表現想分離，使工做進行模塊化，便於協做開發。github

根據option可知有三項數據可變分別以下ajax

legend: { data:['銷量,產量']},
  xAxis : [{type : 'category',//種類
  data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]],
  series : [{
         "name":"銷量",
          "type":"bar",
          "data":[5, 20, 40, 10, 10, 20]
          }，
          {
         "name":"產量",
          "type":"bar",
          "data":[5, 80, 50, 20, 10, 20]
          }
]

所涉及的知識點sql

Ajax技術（能夠去官網瞭解）
Json數據格式
eval()如何使用
each()如何使用

eval()如何使用？

1.瞭解eval()方法參考 eval()基礎使用。
2.使用eval()來解析數據。json

each()如何使用？請參考 each()方法的使用

瞭解上述知識點開始實現一個本身的圖表api

1.一組json數據

{
"name":["銷量","產量"],
"data":[
        [5, 20, 40, 10, 10, 20],
        [50, 80, 20, 15, 20, 24]
        ],
"xlist":["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}

2.運用Ajax獲取數據。

var sql='json/data.json';
      var request = $.ajax({
          url: sql,
          type: "get",
          dataType:"json",
          cache: false
          });
     request.done(function(data) {
          //獲取數據後續操做
     });

3.將數據與配置項相結合

var series = eval(data);
//配置的名字等於由ajax獲取的名字，座標爲獲取的座標
config.legend.data=series.name;                  config.xAxis[0].data=series.xlist;
//設置數據
//根據每個圖例生成各組數據(思想即一個圖例的索引對應相應數據的索引)                   $(series.name).each(function(index,value){
var everyData=series.data[index];                       config.series.push(template(value,everyData));});
//生成圖表
myChart.setOption(config);

參考頁面 ajacecharts.html

根據需求編寫工做中的echarts圖表

你們已經可以用ajax生成圖表，但考慮到大量圖表的問題，這就迫使咱們不得不對其進行規劃。

總體結構的規劃

1.將javascript從html中剔除，在body中添加data-chart屬性。
2.根據不一樣的data-chart值加載不一樣的javascript代碼。

require.config({
    paths: {
    echarts: 'echarts-2.1.8/build/dist',
    jquery:'js/jquery-1.7.2.min'
    }
    //用paths來映射配置項echarts-2.1.8/build/dist 用echarts代替
    });
//獲取body標籤
var bodyElem = document.getElementsByTagName("body")[0];
//獲取bodyElem屬性data-chart的值
var chartName = bodyElem.getAttribute('data-chart');
//根據不一樣的值加載不一樣的javascript
require(['js/'+chartName]);

3.根據data-chart值命名javascript頁面。

參考頁面 ajax.html