ECharts使用—折線圖動態加載

時間 2020-05-23

標籤 echarts 使用折線動態加載简体版

原文原文鏈接

最近需求中用到折線圖，單線條，多線交錯，以前是散點圖，用的是另外一個 amcharts.js，這個文檔也能找的到，迴歸早本次重點：EChartshtml

1、首先引入echarts.common.min.js文件，固然開發狀態下使用echarts.js能夠更便於調試，傳送門ajax

2、爲圖表準備一個dom容器，寬高能夠自行定義，json

<body>
    <!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

3、使用 echarts.init 方法初始化一個echart是實例，並經過setOption方法生成一個簡單的折線圖，以下：canvas

// 1 單獨一個 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { tooltip: { //跟隨鼠標顯示數值 trigger: 'axis' }, //保存圖片 toolbox: { feature: { saveAsImage: { name:'熱度監控', //圖片名 pixelRatio:2 } } }, /* grid: { //canvas距離邊界位置 left: '3%', bottom:'25%' },*/ // 聲明一個 X 軸，類目軸（category）。默認狀況下，類目軸對應到 dataset 第一列。 xAxis: { type: 'category', boundaryGap: false,//座標軸不留白 data: dataX.slice(0,10), axisLabel: { //x座標展現偏移 interval:0, rotate:60 }, /* axisLabel: { //刻度偏移 interval: 0, rotate:0, fontWeight:'400', formatter:function(value) { return value.split("").join("\n"); } }, axisTick:{ //隔幾個空格顯示刻度 interval:1, }*/ }, // 聲明一個 Y 軸，數值軸。 yAxis: { type: 'value' }, // 聲明多個 bar 系列，默認狀況下，每一個系列會自動對應到 dataset 的每一列。 series: [{ data: [820, 932, 901, 934, 932, 901, 934], type: 'line' }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);

其中部分屬性都附上了註釋，實際中會經常使用的是 saveAsImage ，用於圖片的保存，api

3、對於多個折線，跟上面的方法大同小異，區別於聲明圖例組件legend和系列列表賦值，demo以下：echarts

//2 多個折線 /*2*/ var myChart3 = echarts.init(document.getElementById('main3')); var option3 = { tooltip: { trigger: 'axis' }, legend: { data:['總池','用戶池','馬甲池'] }, toolbox: { feature: { saveAsImage: { name:'獎池監控', pixelRatio:2 } } }, xAxis: { type: 'category', boundaryGap: false, data: dataX2, }, yAxis: { type: 'value' }, series: [ { name:'總池', type:'line', stack: '總量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'用戶池', type:'line', stack: '總量', data:[220, 182, 191, 234, 290, 330, 310] }, { name:'馬甲池', type:'line', stack: '總量', data:[150, 232, 201, 154, 190, 330, 410] } ] }; myChart3.setOption(option3);

4、固然咱們常常用的過程當中值是須要動態配置的，用setOption給echarts實例動態賦值：dom

/*1先聲明*/ var myChart1 = echarts.init(document.getElementById('main')); myChart1.setOption({ legend: { data:['銷量'] }, tooltip: { trigger: 'axis' }, toolbox: { feature: { saveAsImage: { name:'熱度監控', pixelRatio:2 } } }, xAxis: { type: 'category', boundaryGap: false, data: [] }, yAxis: { type: 'value' }, series: [{ name: '銷量', type: 'line', data: [] }] }); // 2異步加載數據 $.get('/admin/js/data1.json').done(function (data) { // 填入數據 myChart1.setOption({ xAxis: { type: 'category', boundaryGap: false, data: data.dataX2 }, series: [{ name: '銷量', data: data.data1 }] }); });

具體參數就不在解釋，能夠參考API中配置的說明，本身嘗試幾下就知道對應的意思了，異步

5、動態加載的時候，請求須要時間，這個過程當中能夠顯示loading動畫，也是有提供的，async

myChart1.showLoading();

這個方法我在聲明myChart1，初始化以後直接調用，動態配置得到請求後，在調用ide

myChart1.hideLoading();

隱藏動畫，舉個栗子吧：

$.ajax({ type: "get", url: 'demo.json', async: true, dataType: 'json', success: function(res) { if(res.status == 1 && res.data){ var data = res.data; myChart3.setOption({ xAxis: { type: 'category', boundaryGap: false, data: data.dataX1 }, series: [{ name:'總池', type:'line', stack: '總量', data:data.dataY1 }] }); }else if(!data){ messager('danger','暫無數據') }else{ messager('danger',res.msg) } }, error: function(error) { messager('danger',error.statusText) }, complete:function () {  myChart3.hideLoading(); } });

叨逼叨：這裏series裏有參數項stack，多個線條時有用，若是設置相同的stack值，後一個系列的值會在前一個系列的值上相加。

固然，這只是冰山一角，只是本身恰好須要這點而已，更多強大的功能暫時沒有用到~~~~ ^_^