1. 程式人生 > >.net圖表之ECharts隨筆01-最簡單的使用步驟

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

找了幾種繪製圖表的辦法,後面選定了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);
  }
);

 

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