【前端圖表】echarts散點圖鼠標劃過散點顯示信息

時間 2019-11-08

標籤前端圖表 echarts 散點圖鼠標劃過顯示信息简体版

原文原文鏈接

在作項目的過程當中，總會遇到這樣或者那樣的bug，這個時候就要看本身的動手能力有多強了，着手解決了一個bug以後，整我的都感受很開心，端午下班以前遇到了一個小問題，echarts散點圖鼠標劃過散點的時候，沒有顯示從後臺拿過來的數據，今天一看，原來是忘記寫代碼了，沒有寫返回數據，又怎麼會返回須要的信息而且展現在前端界面？javascript

緊跟着上一篇進行完善，本篇文章主要是解決echarts散點圖鼠標劃過散點顯示信息的問題，篇幅較短，大約須要兩分鐘讀完。html

只須要在option裏面寫上返回須要的信息代碼。前端

 tooltip: { /*返回須要的信息*/ formatter: function(param) { var value = param.value; return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> ' + value[2] + '(' + value[1] + ')' + '</div>'; } }, tooltip: { /*返回須要的信息*/ formatter: function(param) { var value = param.value; return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> ' + value[2] + '(' + value[1] + ')' + '</div>'; } },

改造後的效果以下，echarts散點圖鼠標劃過散點顯示翻身的次數。java

示例完整代碼以下：jquery

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>五分鐘上手之散點圖</title>
        <!-- 引入 echarts.js -->
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery-1.11.3.js"></script>
    </head>

    <body>
        <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
        <div style="height: 500px;width: 1000px;" id="Scatter"></div>
        <script type="text/javascript"> $(document).ready(function() { var MyScatter = echarts.init(document.getElementById('Scatter')); var data = [ ['2012-03-01', 1, "翻身" ], [ '2013-06-01', 2, "沒翻身" ], [ '2014-03-02', 3, "翻身" ], [ '2015-03-03', 5, "翻身" ],[ '2016-03-04', 7, "翻身" ] ]; var textStyle = { color: '#333', fontStyle: 'normal', fontWeight: 'normal', fontFamily: '微軟雅黑', fontSize: 14, }; option = { tooltip: { /*返回須要的信息*/ formatter: function(param) { var value = param.value; return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> ' + value[2] + '(' + value[1] + ')' + '</div>'; } }, xAxis: { type: 'time', name: '時間軸', }, yAxis: { type: 'value', name: '次數值', max: 13, min: 0, }, series: [{ name: '', data: data, type: 'scatter', symbolSize: 40 }] }; MyScatter.setOption(option); }); </script>
    </body>

</html>

原文做者：祈澈姑娘技術博客：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛編程，愛運營，愛折騰。
堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，歡迎你們一塊兒探討交流。程序員

關注「編程微刊」公衆號，在微信後臺回覆「領取資源」，獲取IT資源300G乾貨大全。公衆號回覆「1」，拉你進程序員技術討論羣
編程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。