JS插件：ECharts-數據圖表化-事件
阿新 • • 發佈：2019-01-04
準備 edi 完整 blank lec ext example feature 分享圖片 
主要內容： tooltip.formatter / events.legendselectchanged
一、折線圖
echart官網
1. 先引入：echarts.common.min.js /或者： echarts.js
2. 為ECharts準備一個具備大小的DIV容器
3. js:設置參數初始化圖表
1 <head> 2 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 3 <meta charset="utf-8" /> 4 <script src="/Scripts/jquery-2.js"></script> 5 <script type="text/javascript" src="/Scripts/echarts.min.js"></script> 6 <title>EChart圖片測試</title> 7 </head>
<body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> </body>
<script> window.onload = function () { loadChasrt() }; function loadChasrt() { var dateList = ["2018-12-14 14:00:21", "2018-12-15 14:00:21", "2018-12-18 11:00:21", "2018-12-18 13:59:58"]; var CrackValue =[2,1,12,11] ; var TiltAngle =[12,View Code:JS參數配置11,22,11] ; var Temperature = [16, 11, 12, 15]; var option = GetDefaultOption(‘長度-角度關系圖‘, dateList); option.legend.data = ["長度", "角度", "溫度"]; option.yAxis = [ { boundaryGap: [0, ‘50%‘], type: ‘value‘, name: ‘長度‘, position: ‘left‘, offset: 0, splitNumber: 0, splitLine: { show: true, } }, { boundaryGap: [0, ‘50%‘], type: ‘value‘, name: ‘角度‘, position: ‘right‘, offset: 0, splitNumber: 0, splitLine: { show: true, } }, { boundaryGap: [0, ‘50%‘], type: ‘value‘, name: ‘溫度‘, position: ‘right‘, offset: 50, splitNumber: 0, splitLine: { show: true, } }, ] option.series.push({ name: ‘長度‘, type: ‘line‘, stack: ‘‘, data: CrackValue, yAxisIndex: 0, symbol: ‘none‘ }) option.series.push({ name: ‘角度‘, type: ‘line‘, stack: ‘‘, data: TiltAngle, yAxisIndex: 1, symbol: ‘none‘ }) option.series.push({ name: ‘溫度‘, type: ‘line‘, stack: ‘‘, data: Temperature, yAxisIndex: 2, symbol: ‘none‘ }) option.tooltip = { trigger: ‘axis‘ }; var myChart = echarts.init(document.getElementById(‘main‘)); myChart.setOption(option); } //獲取圖表初始化 function GetDefaultOption(name, dataX) { return { title: { text: name, x: ‘center‘, y: ‘top‘ }, tooltip: { trigger: ‘axis‘ }, legend: { data: [], x: ‘left‘, y: ‘top‘ }, dataZoom: { show: true, start: 0 }, grid: { left: ‘3%‘, right: ‘4%‘, bottom: ‘3%‘, containLabel: true }, toolbox: { feature: { saveAsImage: {}, dataZoom: {}, restore: {} } }, xAxis: { type: ‘category‘, boundaryGap: false, data: dataX }, yAxis: { type: ‘value‘ }, series: [] }; } </script>
二、設置懸浮提示（tooltip）：鼠標懸浮時文字提示
官網文檔-配置項 ： http://www.echartsjs.com/option.html#legend.tooltip
自定義函數設置內容：
1 option.tooltip = { 2 trigger: ‘axis‘, 3 backgroundColor: ‘rgba(50,50,50,0.7)‘, 4 formatter: formatterSettingFun 5 }
1 function formatterSettingFun(params, ticket, callback) { 2 var res = ‘<div><p>註意：‘ + params[0].name + ‘</p></div>‘ 3 for (var i = 0; i < params.length; i++) { 4 var seriesName = String(params[i].seriesName); 5 var titleName = seriesName+"值"; 6 var unit = "mm"; 7 if (i == 2) 8 { unit = "°c"; } 9 res += ‘<p ><span style=" background-color:‘ + params[i].color + ‘; display:inline-block ; width:10PX;height:10PX;border-radius:50%; 10 filter:alpha(opacity=70); -moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7;"> 11 </span>‘ + titleName + ‘:‘ + params[i].data + unit + ‘</p>‘ 12 } 13 setTimeout(function () { 14 //// 僅為了模擬異步回調 15 //callback(ticket, res); 16 }, 1000) 17 return res; 18 }
官網文檔-配置項
字體顏色樣式設置：textStyle
1 option.tooltip = { 2 trigger: ‘axis‘, 3 textStyle: { 4 color: ‘yellow‘, 5 decoration: ‘none‘, 6 fontFamily: ‘Verdana, sans-serif‘, 7 fontSize: 15, 8 fontStyle: ‘italic‘, 9 fontWeight: ‘bold‘ 10 }, 11 formatter: formatterSettingFun 12 };
三、設置圖例（legend）為默認未選中狀態、重寫圖例點擊事件
圖片初始化完成之後，清空圖表重新設置：
var myChart = echarts.init(document.getElementById(‘main‘)); myChart.setOption(option); //設置默認為不選中狀態 var opt = myChart.getOption(); opt["legend"][0]["selected"]["角度"] = false; myChart.clear(); myChart.setOption(opt);
官網API:events.legendselectchanged
1 //重寫圖例點擊事件 2 myChart.on(‘legendselectchanged‘, function (params) { 3 alert(params.type); 4 alert(params.name) 5 alert(params.selected) 6 var name = params.name; 7 var Checked = params.selected[‘角度‘]; 8 if (name == ‘角度‘) { 9 10 } 11 12 });
完整的demo-源代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="/Scripts/jquery-2.js"></script> <script type="text/javascript" src="/Scripts/echarts.min.js"></script> <title>EChart圖片測試</title> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> </body> </html> <script> window.onload = function () { loadChasrt() }; function loadChasrt() { var dateList = ["2018-12-14 14:00:21", "2018-12-15 14:00:21", "2018-12-18 11:00:21", "2018-12-18 13:59:58"]; var CrackValue =[2,1,12,11] ; var TiltAngle =[12,11,22,11] ; var Temperature = [16, 11, 12, 15]; var option = GetDefaultOption(‘長度-角度關系圖‘, dateList); option.legend.data = ["長度", "角度", "溫度"]; option.yAxis = [ { boundaryGap: [0, ‘50%‘], type: ‘value‘, name: ‘長度‘, position: ‘left‘, offset: 0, splitNumber: 0, splitLine: { show: true, } }, { boundaryGap: [0, ‘50%‘], type: ‘value‘, name: ‘角度‘, position: ‘right‘, offset: 0, splitNumber: 0, splitLine: { show: true, } }, { boundaryGap: [0, ‘50%‘], type: ‘value‘, name: ‘溫度‘, position: ‘right‘, offset: 50, splitNumber: 0, splitLine: { show: true, } }, ] option.series.push({ name: ‘長度‘, type: ‘line‘, stack: ‘‘, data: CrackValue, yAxisIndex: 0, symbol: ‘none‘ }) option.series.push({ name: ‘角度‘, type: ‘line‘, stack: ‘‘, data: TiltAngle, yAxisIndex: 1, symbol: ‘none‘ }) option.series.push({ name: ‘溫度‘, type: ‘line‘, stack: ‘‘, data: Temperature, yAxisIndex: 2, symbol: ‘none‘ }) option.tooltip = { trigger: ‘axis‘, formatter: formatterSettingFun }; var myChart = echarts.init(document.getElementById(‘main‘)); myChart.setOption(option); //設置默認為不選中狀態 var opt = myChart.getOption(); opt["legend"][0]["selected"]["角度"] = false; myChart.clear(); myChart.setOption(opt); myChart.on(‘legendselectchanged‘, function (params) { var name = params.name; var Checked = params.selected[‘角度‘]; if (name == ‘角度‘) { alert(1) } }); } function formatterSettingFun(params, ticket, callback) { var res = ‘<div><p>註意：‘ + params[0].name + ‘</p></div>‘ for (var i = 0; i < params.length; i++) { var seriesName = String(params[i].seriesName); var titleName = seriesName+"值"; var unit = "mm"; if (i == 2) { unit = "°c"; } res += ‘<p ><span style=" background-color:‘ + params[i].color + ‘; display:inline-block ; width:10PX;height:10PX;border-radius:50%; opacity:0.5;"> </span>‘ + titleName + ‘:‘ + params[i].data + unit + ‘</p>‘ } setTimeout(function () { //// 僅為了模擬異步回調 //callback(ticket, res); }, 1000) return res; } //獲取圖表初始化 function GetDefaultOption(name, dataX) { return { title: { text: name, x: ‘center‘, y: ‘top‘ }, tooltip: { trigger: ‘axis‘ }, legend: { data: [], x: ‘left‘, y: ‘top‘ }, dataZoom: { show: true, start: 0 }, grid: { left: ‘3%‘, right: ‘4%‘, bottom: ‘3%‘, containLabel: true }, toolbox: { feature: { saveAsImage: {}, dataZoom: {}, restore: {} } }, xAxis: { type: ‘category‘, boundaryGap: false, data: dataX }, yAxis: { type: ‘value‘ }, series: [] }; } </script>View Code
JS插件：ECharts-數據圖表化-事件