本文主要講解自定義圖表實現(xiàn)方式。

在開始自定義之前，需要了解的是，系統(tǒng)會為圖表、看板展示頁面自動引入Jquery（window.$）、ECharts（window.echarts）等JS庫（具體參考官網(wǎng)文檔內(nèi)置看板資源章節(jié)），可以在自定義圖表和插件中直接使用它們。

下面，以折線圖為例，介紹如何通過自定義圖表方式實現(xiàn)。

假設(shè)有如下各月份銷售額CSV數(shù)據(jù)集：

名稱：

各月份銷售額

數(shù)據(jù)：

month     sales
1月       11
2月       41
3月       9
4月       20
5月       15
6月       18

屬性（預(yù)覽后系統(tǒng)自動解析而得，展示名稱由用戶選填）：

名稱        類型        展示名稱
month       字符串      月份
sales       數(shù)值        銷售額

假設(shè)有關(guān)聯(lián)上述數(shù)據(jù)集，圖表類型為 自定義 的圖表：

名稱     ：各月份銷售額圖表
圖表類型 ：自定義
數(shù)據(jù)集   ：各月份銷售額

自定義圖表需要在看板內(nèi)編寫圖表渲染器實現(xiàn)代碼，因此，這里新建一個看板，并添加上述圖表，內(nèi)容如下：

...

//自定義圖表渲染器
var myChartRenderer=
{

};



  

{
  name: "各月份銷售額圖表",
  //圖表關(guān)聯(lián)的數(shù)據(jù)集信息，本例中只有一個
  chartDataSets:
  [
    {
      dataSet:
      {
        name: "各月份銷售額",
        properties:
        [
          {name: "month", type: "STRING", label: "月份"},
          {name: "sales", type: "NUMBER", label: "銷售額"}
        ]
      }
    }
  ],
  //圖表所處的div圖表元素ID，如果沒有定義，系統(tǒng)會隨機(jī)生成一個，并自動設(shè)置為div圖表元素的id屬性
  elementId: "..."
}

除了上述基本結(jié)構(gòu)，chart 對象還定義了很多用于支持圖表渲染、數(shù)據(jù)處理、事件處理等輔助API（詳細(xì)參考官網(wǎng)文檔圖表對象章節(jié)），下面是幾個比較基本的API：

//獲取div圖表元素DOM對象
chart.element()

//獲取div圖表元素的Jquery對象
chart.elementJquery()

//將圖表初始化為ECharts圖表，并返回ECharts實例對象
chart.echartsInit(options)

//獲取圖表的ECharts實例對象
chart.echartsInstance()

//設(shè)置圖表的ECharts選項
chart.echartsOptions(options)

//將圖表原始數(shù)據(jù)集數(shù)據(jù)轉(zhuǎn)換為名/值結(jié)構(gòu)的數(shù)據(jù)
chart.resultNameValueObjects(result, nameProperty, valueProperty)

results 表示圖表關(guān)聯(lián)數(shù)據(jù)集的結(jié)果數(shù)據(jù)，與上述 chart 對象的 chartDataSets 數(shù)組元素一一對應(yīng)，在本例中，它的結(jié)構(gòu)如下所示：

[
  {
    data:
	[
	  {month: "1月", sales: 11},
	  {month: "2月", sales: 41},
	  ...
	]
  }
]

在了解 chart 、results 參數(shù)結(jié)構(gòu)后，就可以使用它們來實現(xiàn) myChartRenderer 的 render 和 update 函數(shù)了：

...

//自定義圖表渲染器
var myChartRenderer=
{
  render: function(chart)
  {
    var chartDataSet = chart.chartDataSets[0];
    var dataSet = chartDataSet.dataSet;
    
    //圖表標(biāo)題："各月份銷售額圖表"
    var title = chart.nameNonNull();
    //圖表X軸標(biāo)簽："月份"
    var xAxisName = chart.dataSetPropertyLabel(dataSet.properties[0]);
    //圖表Y軸標(biāo)簽："銷售額"
    var yAxisName = chart.dataSetPropertyLabel(dataSet.properties[1]);
    //圖例名、系列名："各月份銷售額"
    var seriesName = chart.chartDataSetName(chartDataSet);
    
    var options =
    {
        title: { text: title },
        legend: { data: [ seriesName ] },
        tooltip: { trigger: "axis" },
        xAxis: { name: xAxisName, type: "category", data: [] },
        yAxis: { name: yAxisName, type: "value" },
        series:
        [{
            name: seriesName,
            type: "line",
            data: []
        }]
    };
    
    //初始化ECharts
    chart.echartsInit(options);
  },
  
  update: function(chart, results)
  {
    var dataSet = chart.chartDataSets[0].dataSet;
    var result = results[0];
	
    //X軸刻度：[ "1月", "2月", ... ]
    var xAxisData = chart.resultRowArrays(result, dataSet.properties[0]);
    //折線數(shù)據(jù)：[ {name:"1月", value: 11}, {name:"2月", value: 41}, ... ]
    var seriesData = chart.resultNameValueObjects(result, dataSet.properties[0], dataSet.properties[1]);
    
    var options = { xAxis: { data: xAxisData }, series: [ { data: seriesData } ] };
    
    //更新圖表數(shù)據(jù)
    chart.echartsOptions(options);
  }
};