.net圖表之ECharts隨筆01-最簡單的使用步驟

DoKey713發表於2018-11-26

找了幾種繪製圖表的辦法,後面選定了ECharts。下載連結如下,好像不同的ECharts有不同的用法,要下對。

https://gitee.com/Tuky/SomeWebFrame/tree/master/ECharts

首先,從NuGet管理中新增ECharts包,然後就可以呼叫繪製圖表啦!

基本步驟:

1.為ECharts準備一個具備大小(寬高)的Dom

2.ECharts的js檔案引入

3.js中為模組載入器配置echarts和所需圖表的路徑
require.config({
  paths: {
    echarts: `/Scripts/ECharts`
  }
});

4.動態載入echarts和所需圖表,回撥函式中可以初始化圖表並驅動圖表的生成
require(
  [
    `echarts`,
    `echarts/chart/map` // 此處填寫對應的圖表型別的js檔名
  ],
  function (ec) {
    // 基於準備好的dom,初始化echarts圖表
    var myChart = ec.init(document.getElementById(`Dom名稱`));

    var option = {…} // 此處填寫相應的引數配置,可參考ECharts官網例項

    myChart.setOption(option);
  }
); 

 

如有不對,麻煩大神提醒指正

相關文章