Echarts柱狀圖添加點擊事件

来源:https://www.cnblogs.com/ZbsCc/archive/2019/05/14/10861743.html
-Advertisement-
Play Games

Echarts基本顯示: var c1 = echarts.init(document.getElementById('pic_01')); var op1= { title : { text: '某地區蒸發量和降水量', subtext: '純屬虛構' }, tooltip : { trigger ...


Echarts基本顯示:

var c1 = echarts.init(document.getElementById('pic_01'));

var op1= {
title : {
text: '某地區蒸發量和降水量',
subtext: '純屬虛構'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸發量','降水量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸發量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};


//顯示折線圖
c1.setOption(op1);

c1.on('click', function (params) {
//柱狀圖下邊的名稱(1月,2月,……,11月,12月)params.name

//柱子的值(2.6, 5.9, ……,6.0,2.3)params.value

//每個月份的第幾個柱子params.seriesIndex;
switch (params.seriesIndex) {
case 0: alert(params.name+"蒸發量是"+params.value);
break;
case 1:alert(params.name+“降水量是”+params.value);
break;
default: break;
}
});

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 這裡講下,quartz這種任務調度程式的簡單使用 這是使用的quartz的3.x 版本 2.x 版本與此稍有區別,可以在網上查看2.x版本教程 使用語言為c# quartz的使用分為幾個步驟 其中2步驟也可以放到步驟5後面 另外,別忘記在nuget管理器中引入quartz 代碼如下 運行程式,效果圖 ...
  • 1新建NetCore項目,我這裡NetCoreSDK版本是2.2.0。 2.進入NuGet程式包官網 : https://www.nuget.org,搜索以下兩個包並安裝到項目中。 Microsoft.Extensions.Logging.Log4Net.AspNetCore Log4Net 打開項 ...
  • 背景 一、微信檢測手段 二、功能變數名稱被封常見因素 三、功能變數名稱檢測原理 四、檢測代碼(C#) 五、防封方案 六、參考資料 背景 最近因為業務需要,在研究微信跳轉,功能變數名稱防封檢測等東西,網上搜集了很多很多資料,發現居然這麼簡單的一點東西 居然有人專門做成系統拿去賣錢.. 系統功能就只是個微信跳轉而已,微信跳外部 ...
  • Visual Studio 2019 Enterprise(企業版)BF8Y8-GN2QH-T84XB-QVY3B-RC4DFVisual Studio 2019 Professional(專業版)NYWVH-HT4XC-R2WYW-9Y3CM-X4V3Y ...
  • 註:本博客適合剛開始學習winform程式的初學者,大牛請繞道(跪求大牛指導文中不足) .....10w字廢話自動省略,直接開始正題. 首先從最基本的建立winform開始(本項目用的Vs2017) 新建->項目->選中C#->選擇Windows窗體應用->確定 創建完成後可以點擊工具欄進行拖拽控制項 ...
  • 最近項目移動端需要實現微信自定義分享功能,包含分享自定義標題、描述等。 首先到公眾號的後臺,功能設置裡面,添加將要被分享的功能變數名稱,如圖 後端簽名演算法實現 ,參考騰訊開發者文檔https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp142114111 ...
  • DSAPI.文件.CMD命令行進程代理,是用來和CMD.exe或指定exe進行輸出重定向的簡化使用工具,可隱藏或顯式地啟動一個cmd.exe,並將輸出流、輸入流和錯誤流重定向至代理,通過事件觸發方式與之交互。 相關代碼如下: ...
  • 文/雲之幻 前不久,博客作者 Bravo Yeung 寫了一篇還算略受歡迎的關於 RSS 的文章 ".Net開發者必知的技術類RSS訂閱指南" 。 RSS 現在用的人很少了,而且就算是我,也不過是在一周前才開始正視 RSS 。只因為接觸到了一個很好很強大的社區 RSS Hub ,當時看到之後就立刻做 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...