自定義echarts曲線圖裡邊展示的較小的資料放大
阿新 • • 發佈：2018-11-29
<meta charset="utf-8">
<html> <div id="main" style="width: 1100px;height:900px;"></div> </html> <script src="./echarts2.js"></script> <script> var data1 = [12, 24, 35, 42, 56, 69, 85];
var datamap = {
} // 這個方法是，如果是小於0，轉化為百分比去顯示 commoechart(days,datamap,{ // "聯盟廣告":function(val){ // return Number(val * 100).toFixed(1) + "%"
// 寫一個方法，是專門來擴大數字倍數的 // xAxis:橫座標,DataMap元資料,dataFormat展示資料格式 function commoechart(xAxis,datamap,dataformat) { // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); var keysdata = Object.keys(datamap) || []; var Options = { // 動畫效果 animationDuration: 2000, animationDurationUpdate: 1000, calculable:true, tooltip:{ formatter:'{datamap[0]}$$$' }, xAxis:[ { type:'category', boundaryGap:false, data:xAxis } ], yAxis:[ { type:'value', show:true, }, ], series:[], grid: { top:'15%', left: '3%', right: '4%', bottom: '4%', containLabel: true }, }; // 預設什麼高亮 var legend = { selected:{ '郵件營銷':false, '聯盟廣告':true, '視訊廣告':false, '直接訪問':true, '搜尋引擎':true }, data:keysdata, }; var getEachMax = (function(){ var maxData = {}; keysdata.forEach(function(key){ var EachArray = Object.assign([],datamap[key]); maxData[key] = EachArray.sort(function(pre,cur){ if(Number(pre) <= Number(cur)){ return 1; }else{ return -1; } })[0] }); return maxData; }()); var series = function(){ // console.log(datamap) var partMax = keysdata.map(function(key){ if(legend.selected[key]){ return Number(getEachMax[key]); }else{ return 1 } }).sort(function(pre,cur){ if(Number(pre)<=Number(cur)){ return 1; }else { return -1 } })[0],baseArgu = {}; keysdata.forEach(function(key){ var base = parseInt(partMax/getEachMax[key]); if(base>1){ baseArgu[key] = base /2; }else{ baseArgu[key] = 1 } base = null }); Options["tooltip"] = { trigger:'axis', formatter:function(parmas){ // console.log(parmas) var text = parmas[0].axisValue + '<br/>'; parmas.forEach(function(value){ text += value.seriesName + ':' + datamap[value['seriesName']][value['dataIndex']] + '<br/>'; }) return text } }; Options['legend'] = legend; Options['series'] = keysdata.map(function(key){ return { name:key, type:'line', smooth:true, data:datamap[key].map(function(value){ return value * baseArgu[key] }), itemStyle:{ normal:{ label:{ show:true,formatter:function(val){ if(dataformat[key] && (typeof dataformat[key] === 'function')) { return dataformat[key](datamap[key][val['dataIndex']]) } return datamap[key][val['dataIndex']] } } } } } }) }; series(); myChart.setOption(Options); myChart.on("legendselectchanged",function(parmas){ legend.selected[parmas.name] = !Options.legend.selected[parmas.name]; series(); myChart.setOption(Options,true,true); }) }
</script>
<html> <div id="main" style="width: 1100px;height:900px;"></div> </html> <script src="./echarts2.js"></script> <script> var data1 = [12, 24, 35, 42, 56, 69, 85];
var datamap = {
} // 這個方法是，如果是小於0，轉化為百分比去顯示 commoechart(days,datamap,{ // "聯盟廣告":function(val){ // return Number(val * 100).toFixed(1) + "%"
// 寫一個方法，是專門來擴大數字倍數的 // xAxis:橫座標,DataMap元資料,dataFormat展示資料格式 function commoechart(xAxis,datamap,dataformat) { // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); var keysdata = Object.keys(datamap) || []; var Options = { // 動畫效果 animationDuration: 2000, animationDurationUpdate: 1000, calculable:true, tooltip:{ formatter:'{datamap[0]}$$$' }, xAxis:[ { type:'category', boundaryGap:false, data:xAxis } ], yAxis:[ { type:'value', show:true, }, ], series:[], grid: { top:'15%', left: '3%', right: '4%', bottom: '4%', containLabel: true }, }; // 預設什麼高亮 var legend = { selected:{ '郵件營銷':false, '聯盟廣告':true, '視訊廣告':false, '直接訪問':true, '搜尋引擎':true }, data:keysdata, }; var getEachMax = (function(){ var maxData = {}; keysdata.forEach(function(key){ var EachArray = Object.assign([],datamap[key]); maxData[key] = EachArray.sort(function(pre,cur){ if(Number(pre) <= Number(cur)){ return 1; }else{ return -1; } })[0] }); return maxData; }()); var series = function(){ // console.log(datamap) var partMax = keysdata.map(function(key){ if(legend.selected[key]){ return Number(getEachMax[key]); }else{ return 1 } }).sort(function(pre,cur){ if(Number(pre)<=Number(cur)){ return 1; }else { return -1 } })[0],baseArgu = {}; keysdata.forEach(function(key){ var base = parseInt(partMax/getEachMax[key]); if(base>1){ baseArgu[key] = base /2; }else{ baseArgu[key] = 1 } base = null }); Options["tooltip"] = { trigger:'axis', formatter:function(parmas){ // console.log(parmas) var text = parmas[0].axisValue + '<br/>'; parmas.forEach(function(value){ text += value.seriesName + ':' + datamap[value['seriesName']][value['dataIndex']] + '<br/>'; }) return text } }; Options['legend'] = legend; Options['series'] = keysdata.map(function(key){ return { name:key, type:'line', smooth:true, data:datamap[key].map(function(value){ return value * baseArgu[key] }), itemStyle:{ normal:{ label:{ show:true,formatter:function(val){ if(dataformat[key] && (typeof dataformat[key] === 'function')) { return dataformat[key](datamap[key][val['dataIndex']]) } return datamap[key][val['dataIndex']] } } } } } }) }; series(); myChart.setOption(Options); myChart.on("legendselectchanged",function(parmas){ legend.selected[parmas.name] = !Options.legend.selected[parmas.name]; series(); myChart.setOption(Options,true,true); }) }
</script>