2. 程式人生 > >echarts3.0--地圖和其點選事件及地圖內文字內容樣式位置控制

echarts3.0--地圖和其點選事件及地圖內文字內容樣式位置控制

阿新 • • 發佈：2019-02-19
//初始化ECharts例項 var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '北京', link: 'http://echarts.baidu.com/', subtext: '各區、縣地圖' }, tooltip: { trigger: 'item'
, formatter:function (params) { var res = ''; res+=params['data'].name+'</br>'; res+='使用者數' +' : '+params['data'].value2+'</br>'; return res; } //formatter: '{b}<br/>{c}'
},//滑鼠放在地圖上時，顯示的內容及樣式控制 visualMap: { show: false,//色系條是否顯示 min: 0, max: 45000,//取其區間值就代表色系inRange中的一種顏色 left: 'left', top: 'bottom', text: ['高', '低'], // 文字，預設為數值文字 calculable: true
, inRange:{ color: ['#42a8be','#00a69c', '#95ea95'],//上色範圍 } },//給地圖上色 series: [{ name: '北京市', type: 'map', mapType: 'beijing', selectedMode : 'single', label: { normal: {show: true}, emphasis: {show: true} }, itemStyle: { normal: { borderColor: '#fff', areaColor: '#fff', borderWidth: 2, },//正常樣式 emphasis: { areaColor: 'red', borderWidth: 1, borderColor: 'yellow', }//滑鼠事件區塊樣式 }, data:[ {name: '懷柔區', value: 40500,value2:1024}, {name: '延慶區', value: 23000,value2:1024}, {name: '順義區', value: 22500,value2:1024}, {name: '通州區', value: 40500,value2:1024}, {name: '朝陽區', value: 45000,value2:1024}, {name: '昌平區', value: 37000,value2:1024}, {name: '門頭溝區', value: 40500,value2:1024}, {name: '石景山區', value: 0,value2:1024}, {name: '海淀區', value: 11161,value2:1024}, {name: '豐臺區', value: 15000,value2:1024}, {name: '房山區', value: 20000,value2:1024}, {name: '密雲區', value: 25000,value2:1024}, {name: '平谷區', value: 30000,value2:1024}, {name: '西城區', value: 35000,value2:1024}, {name: '東城區', value: 36000,value2:1024}, {name: '大興區', value: 45000,value2:1024}, ],//value的值是上面visualMap屬性中設定的顏色色系區間的值，即0~45000 label: { normal: { show: true, formatter:function(val){ var area_content = '{a|' + val.name + '}' + '-' + '{b|' + val.data.value2 + '}'; return area_content.split("-").join("\n"); },//讓series 中的文字進行換行 rich: { a: { color: 'black' }, b: { color: 'yellow', fontFamily: 'Microsoft YaHei', fontSize: 14, } },//富文字樣式,就是上面的formatter中'{a|'和'{b|' }, emphasis: {show: true} },//地圖中文字內容及樣式控制 }] }; myChart.setOption(option, true); myChart.on('click', function(params){ alert(1); console.log(params);//此處寫點選事件內容 });//點選事件，此事件還可以用到柱狀圖等其他地圖

相關推薦

echarts3.0--地圖和其點選事件及地圖內文字內容樣式位置控制

//初始化ECharts例項 var myChart = echarts.init(document.getElementById('main')); var option = { title: { te

騰訊地圖覆蓋物新增點選事件及說明資訊------vue

export default { props: { words: { type: String, default: '' } }, data() { return { searchService: [], map:

百度地圖根據座標自定義覆蓋物，並實現其點選事件

在很多APP中都會用到百度地圖，以實現各種功能，本片文章介紹在百度地圖中新增自定義覆蓋物並新增其點選事件 public class NearByFragment extends Fragment { private MapView mapView;

Android成長實戰系列文章之ListView Item和Button點選事件的衝突原因和解決方案

筆者熱衷於技術，也是一名在Android方向上滾爬的程式設計師，以下是我技術總結系列文章： 此係列文章屬於Android成長實戰系列，主要以專案中實際用到的東西分享出來，更注重於實戰程式設計能力的培養。 在我們實際專案開發過程中難免遇到各種事件分發有關問題，

SpannableString中的ClickableSpan和Textview點選事件衝突解決

背景描述：專案中有這樣的需求：在展示評論內容的Textview中展示文字，其中包含3種類型資料： 1、普通文字：評論內容或者回復內容。因為這個Textview是展示評論或者回復的，點選後，要展示軟鍵盤（popupwindow等忽略） 2、股票程式碼：該型別文

EditText監聽輸入完成和設定點選事件時與父控制元件的衝突問題

最近在做專案時,發現一個問題，最後找到了解決辦法，特在此記錄一下，便於以後自己回憶以及和大家分享 問題描述：我在專案的頁面B放了一個線性佈局，裡面有EditText，本意是從A頁面跳轉到B頁面時，可能會先做別的操作，在修改EditText裡面的內容（闡述一下：

textView autolink 和onclick 點選事件衝突

http://blog.csdn.net/dadzyl/article/details/39315445 extView設定autolink後，點選會自動響應超連結的處理，想要點選除超連結的部分實現跳轉到其他activity，現實現自定義控制元件。 1.自定義Auto

android textview 給指定字改變顏色和新增點選事件

使用 SpannableString : TextView textview=new TextView(context); String  str="指定字改變顏色和新增點選事件"； SpannableString spannableString=new Spannable

安卓4.0響應滑鼠左右點選事件

4.0的更新說明裡：為了方便起見，後面滑鼠按鈕被自動對映到KEYCODE_BACK，KEYCODE_FORWARD鍵，應用程式可以處理這些按鍵，支援滑鼠按鈕的基礎和前進導航。 我現在的機器插上滑鼠後左右鍵都是KEYCODE_FORWARD，我想吧右鍵改為KEYCODE_

Android:處理ListView條目中的Button的點選事件和條目點選事件衝突

一 . 此條方法比較笨.       給條目中的1號區域的Button設定完了點選事件後,再給條目中的2號區域再設定點選事件 二 . 這個方法就比較簡單.     1 . 在ItemView配置的xml檔案中的根節點新增屬性android:descendantFocus

百度地圖 label新增點選事件，顯示提示資訊

      百度地圖的marker新增點選事件是： marker.addEventListener("click", function(){ this.open

antd table 行點選事件及行高亮顯示

1.antd官網表格元件： 2.引用antd的表格元件，即： import {Table} from ‘antd’； 渲染表格元件： 說明： （1）rowClassName屬性是新增表格行樣式屬性，此時的this.setClassName方法為點選行之後為其

android listview系列之item的點選事件及item佈局中的點選事件（四）

很多時候listview只顯示簡略資訊，我們需要點選子項去跳轉或在顯示詳細資訊的位置，將相關的詳細資訊顯示出來，listview提供了onItemClickListener()方法，在方法中我們可以執行我們需要的內容。 listview.setOnItem

ListView點選事件失效（item裡面有button按鈕控制元件）解決方法

ListView點選事件失效解決方法： 一般出現這個情況，就是你的item裡面有按鈕的點選事件，你的item裡面有button控制元件，button控制元件是搶佔焦點的，只要在你的item佈局裡面這樣子寫就可以了： &l

FusionCharts新增點選事件及動態傳引數

strXML += "<set name='1-3月' link='JavaScript:to_show(0,4);' value='"+oType+"' color='AFD8F8'/>"; 或者 doctorXML += "<set name='"+

js捕獲所有滑鼠點選事件及其它

<body><div><a href="#" onclick="showPricediv('aaa')" abc=1>adsfsdf</a></div><div id="aaa" style="display:

android TextView 載入html 顯示圖片並且新增img標籤點選事件工具類 富文字 圖文混排 圖片大小調整

注意，本人部落格主要是為了自己記錄，如果有問題歡迎反饋哈。 android的TextView可以載入html程式碼，並且識別他們的標籤，用的方法就是setText(Html.fromHtml(source)),其中source是指定的字串，包含html標籤,用setText

點選複製按鈕複製指定文字內容，實現網頁中的複製功能

<div style="width: 48px; height: 36px; position: absolute; margin-left: 232px;*margin-left:0px;_margin-left: 0">

PHP實現獲取“分享到朋友圈”按鈕點選狀態及自定義分享內容介面

1.請參考我上個文章http://blog.csdn.net/wxs55555/article/details/72652058生成選單 { "button": [ { "type": "view",

android 百度地圖系列之新增覆蓋物和覆蓋物的點選事件

之前講了百度地圖定位和地圖基本操作，這篇部落格講一下，怎麼去給地圖新增覆蓋物，並當點選覆蓋物的時候顯示詳細資訊。 要給地圖新增覆蓋物，首先需要覆蓋物的經緯度，如果還要實現點選事件，顯示詳細的資訊，還需要覆蓋物的描述資訊（如圖片，位置名稱等），所以先新建一個實體