銆愮‖璐с€憊ue鍏ㄥ妗?Echarts+鐧惧害鍦板浘锛屾惌寤烘暟鎹彲瑙嗗寲绯荤粺

Posted 2021-04-16 鍗婄硸瀛﹀墠绔?/a> 銆愮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了銆愮‖璐с€憊ue鍏ㄥ妗?Echarts+鐧惧害鍦板浘锛屾惌寤烘暟鎹彲瑙嗗寲绯荤粺相关的知识，希望对你有一定的参考价值。

鏈枃绔犵瘒骞呯暐闀匡紝鍐呭鏈夌偣澶氾紝澶т浆鍙牴鎹洰褰曢€夋嫨鎬ф煡闃咃紝鏂颁汉鍙竴姝ユ鏉ラ槄璇汇€?/span>

1銆?鍓嶈█

1.1 涓氬姟鍦烘櫙

绐佺劧鎺ュ埌浜у搧璇磋鍋氫竴涓暟鎹洃鎺х殑绯荤粺銆傛湁绾垮浘銆佹煴鐘跺浘銆佸湴鍥撅紝绫讳技浜庢暟鎹彲瑙嗗寲鐨勬柟寮忋€?/span>

鏈汉涔嬪墠浠庢湭鎺ヨЕ杩?/span> Echarts 锛岀劧鍚庨渶瑕?鍛ㄦ嬁鍑烘垚鏋滐紝鏈夌偣鎱岎煒傪煒?/span>

1.2 涓氬姟鍒嗘瀽

鎷垮埌闇€姹傜湅浜嗕竴涓嬨€?/span>

鏀寔鐢ㄦ埛鍚嶃€佸瘑鐮佺櫥褰曪紝榛樿鏄剧ず涓€涓淮搴︽暟鎹紝鐒跺悗鐐瑰嚮鍙捇鍙栬繘鍏ョ浜岀淮搴︽暟鎹紝鍐嶇偣鍑昏繘鍏ョ涓夌淮搴︽暟鎹睍绀恒€?/span>

澶ц嚧浼版懜鐫€銆傘€傘€?/span>

绯荤粺鎼缓vue-cli

vuex璁板綍鐧诲綍淇℃伅

vue-router璺敱璺宠浆

3涓淮搴︾殑椤甸潰锛屾彁鍙栧嚭鍏辩敤鐨勭粍浠?/span>

鍚勪釜缁勪欢寮€鍙?/span>

璋冭妭鏍峰紡锛屽鍔燯I

鍔犲叆鍚庡彴鎺ュ彛鏁版嵁

浼樺寲鏄剧ず

娴嬭瘯

涓婄嚎

褰撶劧杩欎笉鏄2鍛ㄥ唴锛屽叏鍋氬畬銆傚簲璇ユ槸瀹屾垚姝ラ6銆?/span>

鐩稿浜庡叕鍙稿氨鎴戜竴涓墠绔紝娌℃帴瑙﹁繃 Echarts 锛屾湁闂閮芥病浜鸿璁虹殑鎯呭喌涓嬨€傘€傘€?/span>

蹇冮噷杩樻槸蹇嶄笉浣忔兂鍚愭Ы涓€涓嬸煒掟煒掟煒?/span>

1.3 鏁堟灉灞曠ず

杩欓噷鍒楀嚭浜嗙涓€缁村害椤甸潰鐨勬牱寮忋€傛枃瀛楄鏃犺锛屽搱鍝堛€?/span>

銆愮‖璐с€憊ue鍏ㄥ妗?Echarts+鐧惧害鍦板浘锛屾惌寤烘暟鎹彲瑙嗗寲绯荤粺

銆? 銆佺郴缁熷畨瑁?/span>

鍚愭Ы褰掑悙妲斤紝娲昏繕鏄骞茬殑銆傪煒?/span>

鍥犱负鏈汉鏈€鐔熸倝鐨勮繕鏄痸ue锛屾墍浠ヨ繕鏄€夋嫨浜嗙敤vue鍏ㄥ妗舵潵鍋氥€傝繖閮ㄥ垎鍙弬鑰?nbsp; vue build

2.1 瀹夎node鐜

涓嬭浇瀹夎 node 鐜锛岀洿鎺ュ幓瀹樼綉涓嬭浇鍗冲彲 node.js

瀹夎瀹屽悗鍙湪鍛戒护琛岃繍琛?/span> node -v npm -v 鏌ョ湅鏄惁瀹夎鎴愬姛浠ュ強鐗堟湰

2.2 瀹夎Vue椤圭洰

2.2.1 瀹夎vue

瀹樻柟鏂囨。锛?/span> vuejs

杩欓噷鎴戜滑浣跨敤 npm 鐨勬柟寮?/span>

npm i vue

2.2.2 瀹夎Vue CLI

瀹樻柟鏂囨。锛?/span> vue CLI

npm i -g @vue/cli

瀹夎涔嬪悗锛屼綘灏卞彲浠ュ湪鍛戒护琛屼腑璁块棶 vue 鍛戒护銆備綘鍙互鐢ㄨ繖涓懡浠ゆ潵鏌ョ湅鍏剁増鏈€?/span> vue -V

2.2.3 鍒涘缓椤圭洰

杩欓噷瀹夎鐨勬椂鍊欙紝娉ㄦ剰灏嗘垜浠浣跨敤鐨勫畨瑁呬笂銆?/span> vuex 銆?/span> vue-router 锛屽叾浠栧彲鏍规嵁闇€瑕佹坊鍔犮€?/span>

鏂规硶涓€

vue create hello-world

杩欓噷鍙傜収瀹樻柟缃戠珯锛屾湁寰堣缁嗙殑浠嬬粛銆傚弬鐓э細 vue create

鏂规硶浜?/span>

浣跨敤鍥惧舰鍖栫晫闈?/span>

vue ui

鐣岄潰鍚腑鏂囷紝寰堝ソ鎿嶄綔銆傚弬鐓э細 vue ui

2.2.4 瀹夎鎻掍欢

鏂规硶涓€

鏈€鐩存帴涔熸槸鎺ㄨ崘鐨?nbsp; npm i xxx

杩欓噷浠嬬粛涓€涓?nbsp; -S -D -g 鐨勫尯鍒?/span>

npm i -S xxx 鏂囦欢鍐欏叆dependencies锛岀敤浜庡伐绋嬩腑寮€鍙戞椂浣跨敤鍒扮殑鎻掍欢锛屼細鍙戝竷鍒扮敓浜х幆澧冨UI锛孞S绛夈€?/span>

npm i -D xxx 鏂囦欢鍐欏叆devDependencies锛岀敤浜庡伐绋嬫敮鎸佺被鎻掍欢锛屼笉浼氬彂甯冨埌鐢熶骇鐜锛屽gulp绛夊帇缂╂墦鍖呭伐鍏枫€?/span>

npm i -g xxx 鍏ㄥ眬瀹夎锛屽vue銆乶cu绛夈€傚畨瑁呯洰褰曚负锛欳:Users鐢ㄦ埛AppDataRoamingnpm

鏂规硶浜?/span>

vue ui 鍥惧儚鍖栫晫闈腑鍖呭惈浜嗚嫢骞叉彃浠讹紝鍙偣鍑诲畨瑁咃紝浣嗕笉涓€瀹氭槸鏈€鏂扮増鏈€?/span>

鍚屾椂浼氬湪hello涓紩鍏ャ€傚叾浠栧拰鏂规硶涓€娌″尯鍒€?/span>

2.3 瀹夎Echarts

杩欓噷鎴戜滑涓轰簡鏂逛究锛屼娇鐢ㄤ簡 npm 鍏ㄩ噺寮曠敤锛屽悗鏈熶负浜嗙簿绠€椤圭洰鍙崟涓紩鐢ㄣ€?/span>

npm i echarts -S

鐒跺悗鍦?/span> main.js 涓坊鍔?/span>

杩欓噷寤鸿鎻愬墠鑷畾涔?/span> echarts 鐨勬牱寮忥紝骞跺紩鍏ュ埌椤圭洰涓€傚畼鏂硅嚜瀹氫箟鍦板潃锛?/span> theme-builder

鍦ㄩ〉闈腑鎴戜滑鍙互濡備笅寮曠敤锛?/span>
var myChart = this.$echarts.init(document.getElementById("myid"),'temp')

myid 鏄垜浠灞曠ず鐨?/span> echarts 鐨?/span> id 銆?/span>

temp 鏄垜浠殑鑷畾涔夌殑鏍峰紡锛屽悓鏃跺畼鏂规彁渚涗簡鍑犱釜鏍峰紡渚嬪瓙锛屽彲浠?/span> node_modulesecharts heme 涓壘鍒般€?/span>

2.4 瀹夎element-ui

杩欓噷鎴戜滑涓轰簡鏂逛究锛屼娇鐢ㄤ簡 npm 鍏ㄩ噺寮曠敤锛屽悗鏈熶负浜嗙簿绠€椤圭洰鍙崟涓紩鐢ㄣ€?/span>

npm i element-ui -S

鐒跺悗鍦?/span> main.js 涓坊鍔?/span>

2.5 瀹夎鐧惧害鍦板浘

涓€鑸瑅ue浣跨敤鐧惧害鍦板浘鏈?绉嶆柟寮忥紝

涓€绉嶆槸鍍忓畼缃戦偅鏍峰幓搴旂敤銆傚锛?/span> BMap
绗簩绉嶆槸浣跨敤 vue-baidu-map

涓嶇鏄摢涓€绉嶉兘瑕佸幓鐢宠璐﹀彿鍜屽瘑閽ャ€傜敵璇峰湴鍧€涓猴細鐧惧害鍦板浘瀵嗛挜(ak)

杩欓噷鎴戜娇鐢ㄤ簡绗簩绉嶃€?/span> vue-baidu-map鏂囨。

npm i vue-baidu-map -S

鐒跺悗鍦?/span> main.js 涓坊鍔犮€?/span>

xxxxxxxx 杩欓噷濉啓鑷繁鐢宠鐨勫瘑閽ャ€?/span>

鍦ㄩ〉闈腑锛屽弬鐓ф枃妗ｏ紝鍙娇鐢ㄦ爣绛?/span> <baidu-map/> 鏉ヨ皟鐢ㄣ€?/span>

2.6 鍒濆鍖栨牱寮?/span>

css 鏍峰紡鍒濆鍖栵紝绠€鍗曟潵璇村氨鏄负浜嗗悇涓祻瑙堝櫒鑳界粺涓€浠€涔堢殑銆?/span>

杩欓噷鎴戜娇鐢ㄧ殑鏄?nbsp; normalize.css

涓嬭浇涓嬫潵鍚庯紝鍦?/span> main.js 涓坊鍔?/span>

鍩烘湰涓婄殑鍑嗗宸ヤ綔閮藉仛濂戒簡锛屾帴涓嬫潵灏辨槸鍏蜂綋鐨勪唬鐮佷簡銆?/span>

3 銆侀」鐩惌寤?/span>

3.1 router銆乿uex

鎴戣繖閲屾柊寤轰簡涓€涓?/span> router.js 銆?/span> store.js 锛屽ぇ鑷村涓嬶細

鍝﹀搱锛岃繖閲岃矾鐢卞畾涔夋槸涓轰簡鏂逛究鐪嬪搱锛屽叿浣撹繕鏄牴鎹笟鍔℃潵瀹氫箟銆?/span>

杩欓噷鐨?/span> router.beforeEach 璺敱鍗＋鐢ㄤ簬鏄惁鐧诲綍鏍￠獙銆?/span>

鐒跺悗鎴戜滑鍦?/span> main.js 涓潵寮曠敤銆?/span>

鏇村璇峰弬鑰冨畼鏂规枃妗ｏ細Vue Router Vuex

3.2 Login椤甸潰

鐧诲綍椤甸潰娌″暐锛屽氨鏄釜form鎻愪氦锛岀敱浜庤矾鐢变腑鍒ゆ柇 user.id 銆傛墍浠ユ垜浠偍瀛樹竴涓嬶紝鐒跺悗璺宠浆鍒癐ndex椤甸潰灏辫銆?/span>

杩欓噷鍙槸涓€绉嶆柟寮忥紝涔熷彲浠ヤ娇鐢?/span> Cookie 鍜?/span> Session

3.3 Index椤甸潰

鍒嗘瀽椤甸潰鍒嗘垚浜?涓ぇ閮ㄥ垎

绗竴閮ㄥ垎鏄?nbsp;澶撮儴
绗簩閮ㄩ棬鏄?nbsp;涓讳綋

鎴戜滑灏嗗ご閮ㄥ綋鍋氫竴涓粍浠惰繘琛屽鐢ㄣ€?/span>

缁勪欢鐨勫鐢ㄥ彲鍙傝€冨畼鏂规枃妗ｏ細 https://cn.vuejs.org/v2/guide...

3.4 header椤甸潰

澶撮儴姣旇緝绠€鍗曪紝闄や簡涓€浜涙樉绀哄锛岃繕鏈変竴涓樉绀哄綋鍓嶆椂闂淬€?/span>

杩欓噷鎴戜滑浣跨敤浜?/span> setInterval 锛屾瘡闅?绉掑幓鑾峰彇涓€涓嬪綋鍓嶆椂闂磋祴鍊肩粰浣犲畾涔夌殑 v-model 灏辫銆?/span>

鍚屾椂鍦ㄧ寮€椤甸潰鏃讹紝鎴戜滑娓呯悊鎺夊畾鏃跺櫒銆?/span>

杩欓噷闇€瑕佹垜浠 Vue 鐨勭敓鍛藉懆鏈熸湁涓€瀹氱殑浜嗚В銆?/span>

鑾峰彇褰撳墠鏃堕棿鐨勬柟娉曞彲鍙傝€冿細 data-module.js

3.5 涓讳綋椤甸潰

杩欓噷鍒嗘瀽涓€涓嬮〉闈紝涓昏鍒嗘垚浜?鍧椼€?/span>

宸﹁竟锛屽寘鍚簡2涓姌绾垮浘銆?/span>
涓棿锛屽寘鍚簡鏁板瓧鍜屽湴鍥俱€?/span>
鍙宠竟锛屽寘鍚簡鏌辩姸鍥惧拰琛ㄦ牸銆?/span>

鎺ヤ笅鏉ヤ富瑕佷粙缁嶄竴涓嬶紝鑷繁杩?鍛ㄦ懜绱㈠嚭鏉ョ殑涓€浜?/span> Echarts 閰嶇疆锛岄€傚悎鏂版墜锛屽ぇ浣交鍠枫€?/span>

杩欓噷闇€瑕佺粡甯哥炕闃?nbsp; Echarts閰嶇疆椤?/span> 鍜?nbsp; API 浜?/span>

3.5.1 Echarts鍩烘湰

杩欓噷鍒楀嚭鍩烘湰鐨勬覆鏌撳啓娉曪紝鍏蜂綋鐨勫浘褰㈠拰鏁版嵁鍙淇敼 option 灏卞彲浠ヤ簡銆?/span>

  
    
    
  
   
     
     
   <template>
   
     
     
    <div id="myecharts" class="myecharts">
   
     
     
   </template>
   
     
     
   

   
     
     
   <script>
   
     
     
    export default {
   
     
     
    mounted(){
   
     
     
    this.drawECharts()
   
     
     
    },
   
     
     
   

   
     
     
    methods:{
   
     
     
    drawECharts(){
   
     
     
    // temp 鏄垜浠殑鑷畾涔夋牱寮忥紝涓婇潰瀹夎Echarts鏃舵湁浠嬬粛
   
     
     
    var myChart = this.$echarts.init(document.getElementById("myecharts"),'temp')
   
     
     
    var option = {}
   
     
     
    option = {
   
     
     
    // 鍚у暒鍚у暒 涓€鍫嗛厤缃?/span>
   
     
     
    }
   
     
     
    // 鎵ц娓叉煋鍥惧舰鍜屾暟鎹殑鎿嶄綔
   
     
     
    if (option && typeof option === "object") {
   
     
     
    myChart.setOption(option, true)
   
     
     
    }
   
     
     
    }
   
     
     
    }
   
     
     
    }
   
     
     
   </script>
   
     
     
   

   
     
     
   <style>
   
     
     
    // 涓€瀹氳璁剧疆澶у皬锛屼笉鐒朵笉鍑烘潵锛岃繖鐜╂剰鍜宑anvas涓€鏍?/span>
   
     
     
    .myecharts{
   
     
     
    width : 500px;
   
     
     
    height : 300px;
   
     
     
    }
   
     
     
   </style>

 
   
   
 
  
    
    
  3.5.2 绾垮舰鍥?/span>

澶氬瀹炶返锛屽氨浼氬彂鐜版瘡涓厤缃拰鍏跺弬鏁扮殑浣滅敤浜嗐€?/span>

  
    
    
  
   
     
     
   option = {
   
     
     
    // 鎻愮ず妗嗭紙灏辨槸榧犳爣鏀句笂鍘诲悗鍑虹幇鐨勬锛?/span>
   
     
     
    tooltip : {
   
     
     
    trigger: 'axis',
   
     
     
    axisPointer: {
   
     
     
    type: 'cross',
   
     
     
    label: {
   
     
     
    backgroundColor: '#6a7985'
   
     
     
    }
   
     
     
    }
   
     
     
    },
   
     
     
   

   
     
     
    // 鍙充笂瑙掔殑缁勪欢锛岀敤浜庤鏄庯紝涔熷彲杩涜鐐瑰嚮绛涢€?/span>
   
     
     
    legend: {
   
     
     
    align : 'right',
   
     
     
    x : 'right',
   
     
     
    top : 25,
   
     
     
    selectedMode : 'single', // 鎴戣繖閲岃缃殑鍗曢€夋ā寮?/span>
   
     
     
    data:['濂?,'鍧?] // 鏄剧ず鐨勭涓€椤瑰拰绗簩椤癸紝杩欓噷鐨勯鑹叉槸鏍规嵁鑷畾涔変富棰樼殑棰滆壊椤哄簭鏉ュ畾鐨?/span>
   
     
     
    },
   
     
     
   

   
     
     
    // x銆亂杞存樉绀轰竴浜涜缃紝姣斿鍒诲害棰滆壊鏄剧ず浠€涔堢殑锛屽彲鍦ㄨ嚜瀹氫箟涓婚璁剧疆涓€閮ㄥ垎
   
     
     
    xAxis: {
   
     
     
    type: 'category',
   
     
     
    boundaryGap: false,
   
     
     
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   
     
     
    },
   
     
     
    yAxis: {
   
     
     
    type: 'value'
   
     
     
    },
   
     
     
    // 鍏蜂綋閰嶇疆椤癸紝鏍规嵁鍏蜂綋椤圭洰鏌ョ湅瀹樼綉閰嶇疆椤硅鏄?/span>
   
     
     
    series: [
   
     
     
    {
   
     
     
    name : '濂?,
   
     
     
    data: [150, 132, 201, 534, 290, 530, 820],
   
     
     
    type: 'line',
   
     
     
    smooth: true, // 鏄惁骞虫粦鏇茬嚎
   
     
     
    areaStyle: {},
   
     
     
    },
   
     
     
    { 
   
     
     
    name : '鍧?,
   
     
     
    data: [82, 93, 90, 93, 129, 333, 432],
   
     
     
    type: 'line',
   
     
     
    smooth: true,
   
     
     
    areaStyle: {},
   
     
     
    }
   
     
     
    ]
   
     
     
   }
   
     
     
   

   
     
     
   // 鏌ョ湅Echarts鐨凙PI锛屾垜浠渶瑕佹樉绀洪粯璁ょ殑涓€浜涙暟鎹紝閰嶇疆濡備笅
   
     
     
   // 榛樿鏄剧ず鍧忕殑鏁版嵁
   
     
     
   myChart.dispatchAction({
   
     
     
    type: 'legendSelect',
   
     
     
    name: '鍧?,
   
     
     
   })
   
     
     
   // 榛樿鏄剧ず绗?涓暟鎹?/span>
   
     
     
   myChart.dispatchAction({
   
     
     
    type: 'showTip',
   
     
     
    seriesIndex: 1,
   
     
     
    dataIndex: 6,
   
     
     
   })

棰勮锛?/span>

3.5.3 鏌辩姸鍥?/span>

杩欓噷鎴戜滑鐩存帴鐢ㄥ弻鏌辩姸鍥炬潵婕旂ず銆?/span>

鍥犱负鍚嶅瓧鍜屾暟瀛楅渶瑕佹彁绀哄拰鐐瑰嚮鐨勫姛鑳斤紝鎵€浠ユ病鏈変娇鐢?/span> echarts 鐨?/span> y 杞淬€?/span>

涓嶇劧 formatter 鍙堣鍐欎竴鍫嗭紝铏界劧鐢ㄤ簡鑷畾涔夌殑锛屼絾鏈€寮€濮嬫槸鐢ㄧ殑 formatter 銆?/span>

鍙互瀹炵幇鐩稿悓灞曠ず锛屼絾鏃犳硶鎿嶄綔锛屽榧犳爣鎻愮ず鍜岄紶鏍囩偣鍑汇€?/span>

  
    
    
  
   
     
     
   <div class="left">
   
     
     
    <div v-for="it in its1" :key="it.id">
   
     
     
    <el-tooltip class="item" effect="light" placement="bottom-start">
   
     
     
    <div slot="content">鍚嶇О锛歿{it.name}}<br/>涓暟锛歿{it.num}}</div>
   
     
     
    <div class="name" @click="go"> {{ it.name.substring(0,4)+'...' }}</div>
   
     
     
    </el-tooltip>
   
     
     
    <div class="num">{{ it.num }}</div>
   
     
     
    </div>
   
     
     
   </div>
   
     
     
   

   
     
     
   <div class="right">
   
     
     
    <div v-for="it in its2" :key="it.id">
   
     
     
    <el-tooltip class="item" effect="light" placement="bottom-start">
   
     
     
    <div slot="content">鍚嶇О锛歿{it.name}}<br/>涓暟锛歿{it.num}}</div>
   
     
     
    <div class="name" @click="go"> {{ it.name.substring(0,4)+'...' }}</div>
   
     
     
    </el-tooltip>
   
     
     
    <div class="num">{{ it.num }}</div>
   
     
     
    </div>
   
     
     
   </div>
   
     
     
   

   
     
     
   <div id="myecharts" class="myecharts">

css 杩欓噷灏变笉璐翠簡锛屾晥鏋滃氨鏄繖2琛屾枃瀛楀垰濂借创鍦?琛屾煴鐘跺浘鍓嶉潰銆?/span>

鎺ヤ笅鏉ユ槸 echarts 閰嶇疆銆?/span>

  
    
    
  
   
     
     
   option = {
   
     
     
    // 榧犳爣鎻愮ず妗?/span>
   
     
     
    tooltip: {
   
     
     
    trigger: 'axis',
   
     
     
    axisPointer: {
   
     
     
    type: 'shadow'
   
     
     
    }
   
     
     
    },
   
     
     
   

   
     
     
    // 鍙宠竟鏄剧ず
   
     
     
    legend: {
   
     
     
    selectedMode:false,
   
     
     
    data: ['濂?, '鍧?],
   
     
     
    top:5,
   
     
     
    right:8,
   
     
     
    },
   
     
     
   

   
     
     
    // 涓や釜鍥惧潗鏍囩殑浣嶇疆
   
     
     
    grid: [
   
     
     
    {left: '16%', top:'10%', width: '22%', height: '86%'},
   
     
     
    {left: '65%', top:'10%', width: '22%', height: '86%'}
   
     
     
    ],
   
     
     
   

   
     
     
    // 涓や釜鍥緓杞寸殑璁剧疆锛岃繖閲岀殑gridIndex灏辨槸涓簭鍙凤紝鐢ㄤ簬鍖哄垎
   
     
     
    xAxis: [
   
     
     
    {gridIndex : 0, show : false},
   
     
     
    {gridIndex : 1, show : false},
   
     
     
    ],
   
     
     
   

   
     
     
    // 涓や釜鍥緔杞寸殑璁剧疆锛屾敞閲婄殑閮ㄥ垎鏄敤echarts鏈韩鐨剏杞存潵鏄剧ず鍚嶇О鍜屾暟閲忕殑
   
     
     
    yAxis: [
   
     
     
    {
   
     
     
    gridIndex: 0,
   
     
     
    type: 'category',
   
     
     
    show : false,
   
     
     
    data : ['骞夸笢/12','鏉窞/13','鍖椾含鍖椾含/14','澶╂触/16'],
   
     
     
    // axisLabel: {
   
     
     
    // formatter : function(value){
   
     
     
    // let arr = value.split('/')
   
     
     
    // return '{a|'+arr[0]+'}
{b|'+ arr[1]+'}';
   
     
     
    // },
   
     
     
    // rich: {
   
     
     
    // a: {
   
     
     
    // color : '#ffffff',
   
     
     
    // lineHeight : 19,
   
     
     
    // fontSize : 14,
   
     
     
    // align: 'right',
   
     
     
    // },
   
     
     
    // b:{
   
     
     
    // fontSize : 18,
   
     
     
    // lineHeight : 19,
   
     
     
    // fontWeight : 'bold',
   
     
     
    // align: 'right',
   
     
     
    // fontFamily : 'Digital',
   
     
     
    // }
   
     
     
    // }
   
     
     
    // }
   
     
     
    },
   
     
     
    {
   
     
     
    gridIndex: 1,
   
     
     
    show : false,
   
     
     
    type: 'category',
   
     
     
    data : ['娴峰崡/12','涓変簹/13','鍝堝皵婊?14','瑗垮弻鐗堢撼/16'],
   
     
     
    // axisLabel: {
   
     
     
    // formatter : function(value){
   
     
     
    // let arr = value.split('/')
   
     
     
    // return '{a|'+arr[0]+'}
{b|'+ arr[1]+'}';
   
     
     
    // },
   
     
     
    // rich: {
   
     
     
    // a: {
   
     
     
    // color : '#ffffff',
   
     
     
    // lineHeight : 19,
   
     
     
    // fontSize : 14,
   
     
     
    // align: 'right',
   
     
     
    // },
   
     
     
    // b:{
   
     
     
    // fontSize : 18,
   
     
     
    // lineHeight : 19,
   
     
     
    // fontWeight : 'bold',
   
     
     
    // align: 'right',
   
     
     
    // fontFamily : 'Digital',
   
     
     
    // }
   
     
     
    // }
   
     
     
    // }
   
     
     
    },
   
     
     
    ],
   
     
     
   

   
     
     
    // 娓叉煋鍥惧舰鍜屾暟鎹紝bar鏄煴鐘跺浘
   
     
     
    // barWidth 鏌辩姸鐨勫搴?/span>
   
     
     
    // 涓ょ被涓ゅ锛屾墍浠ユ湁4缁勬暟鎹紝浣跨敤xAxisIndex銆亂AxisIndex鏉ュ尯鍒嗐€?/span>
   
     
     
    series: [
   
     
     
    {
   
     
     
    name: '濂?,
   
     
     
    type: 'bar',
   
     
     
    barWidth : 5,
   
     
     
    barMinHeight : 5,
   
     
     
    barGap : '100%',
   
     
     
    xAxisIndex: 0,
   
     
     
    yAxisIndex: 0,
   
     
     
    data: [0, 3489, 9022234, 922228],
   
     
     
    label: {
   
     
     
    normal: {
   
     
     
    position: 'right',
   
     
     
    show: true
   
     
     
    }
   
     
     
    },
   
     
     
    },
   
     
     
   

   
     
     
    {
   
     
     
    name: '鍧?,
   
     
     
    type: 'bar',
   
     
     
    barWidth : 5,
   
     
     
    barMinHeight : 5,
   
     
     
    xAxisIndex: 0,
   
     
     
    yAxisIndex: 0,
   
     
     
    data: [0, 2438, 3300, 1594],
   
     
     
    label: {
   
     
     
    normal: {
   
     
     
    position: 'right',
   
     
     
    show: true
   
     
     
    }
   
     
     
    },
   
     
     
    },
   
     
     
    {
   
     
     
    name: '濂?,
   
     
     
    type: 'bar',
   
     
     
    barWidth : 5,
   
     
     
    barMinHeight : 10,
   
     
     
    barGap : '100%',
   
     
     
    xAxisIndex: 1,
   
     
     
    yAxisIndex: 1,
   
     
     
    data: [8203, 3489, 9034, 222],
   
     
     
    label: {
   
     
     
    normal: {
   
     
     
    position: 'right',
   
     
     
    show: true
   
     
     
    }
   
     
     
    },
   
     
     
    },
   
     
     
    {
   
     
     
    name: '鍧?,
   
     
     
    type: 'bar',
   
     
     
    barWidth : 5,
   
     
     
    barMinHeight : 5,
   
     
     
    xAxisIndex: 1,
   
     
     
    yAxisIndex: 1,
   
     
     
    data: [445, 2438, 3300, 555],
   
     
     
    label: {
   
     
     
    normal: {
   
     
     
    position: 'right',
   
     
     
    show: true
   
     
     
    }
   
     
     
    },
   
     
     
    },
   
     
     
    ]
   
     
     
   }

棰勮锛?/span>

3.5.4 琛ㄦ牸

table 鎴戣繖閲屼娇鐢ㄤ簡 element-ui 鍔犱笂淇敼 UI 榛樿 css 鍜?婊氬姩鏉＄殑 css 銆?/span>

杩欓噷鍒楀嚭涓€椤癸紝鍏朵粬鍐欐硶鐩镐技銆?/span>

  
    
    
  
   
     
     
   <el-table
   
     
     
    :data="tableData"
   
     
     
    height="252"
   
     
     
    style="min-width: 100%;">
   
     
     
    <el-table-column
   
     
     
    prop="date"
   
     
     
    min-width="12"
   
     
     
    header-align="center"
   
     
     
    label="鏃堕棿">
   
     
     
    <template slot-scope="scope">
   
     
     
    <template v-if="scope.row.if == '1'">
   
     
     
    <img />
   
     
     
    <div style="color:#E63136;margin-top:-27px;margin-left:35px;">
   
     
     
    {{scope.row.date}}
   
     
     
    </div>
   
     
     
    </template>
   
     
     
    <template v-else>
   
     
     
    <div style="margin-left:35px;">
   
     
     
    {{ scope.row.date }}
   
     
     
    </div>
   
     
     
    </template>
   
     
     
    </template>
   
     
     
    </el-table-column>
   
     
     
   </el-table>

UI 鏍峰紡

UI css 鐨勪慨鏀癸紝杩欓噷鎴戜娇鐢ㄤ簡鑷畾涔夊瓧浣撳摝锛屽畬鍏╟opy鏄笉璧蜂綔鐢ㄧ殑銆?/span>

鍏朵粬鐨勮缃」涓嶅仛璇存槑锛孎12鎵撳紑锛岄殢渚跨帺銆?/span>

  
    
    
  
   
     
     
   .el-table thead {
   
     
     
    color: #FFFFFF;
   
     
     
   }
   
     
     
   

   
     
     
   .el-table {
   
     
     
    color: #00A5F6;
   
     
     
    font-family: 'Regular';
   
     
     
    background-color: rgba(0, 0, 0, 0.03);
   
     
     
    th {
   
     
     
    padding: 2px 0;
   
     
     
    background-color: #003260; 
   
     
     
    }
   
     
     
    th.is-leaf {
   
     
     
    border-bottom: 0px solid #EBEEF5;
   
     
     
    }
   
     
     
    tr {
   
     
     
    background-color: rgba(0, 0, 0, 0.03);
   
     
     
    }
   
     
     
    td {
   
     
     
    border-bottom: 1px solid #2c3547;
   
     
     
    padding: 2px 0;
   
     
     
    }
   
     
     
   

   
     
     
    .el-table::before {
   
     
     
    height: 0px;
   
     
     
    z-index: 0;
   
     
     
    background-color: #2c3547;
   
     
     
    }
   
     
     
   }

婊氬姩鏉＄殑鏍峰紡

闅忔剰鏀瑰彉鐪嬬湅鏁堟灉灏辨噦浜嗭紝璋锋瓕娴忚鍣?馃槄

  
    
    
  
   
     
     
   /* scrollbar */
   
     
     
   

   
     
     
   ::-webkit-scrollbar {
   
     
     
    width: 8px;
   
     
     
    height: 1px;
   
     
     
    background-color:transparent;
   
     
     
   }
   
     
     
   ::-webkit-scrollbar-thumb {
   
     
     
    border-radius: 10px;
   
     
     
    background: #adabab;
   
     
     
   }
   
     
     
   ::-webkit-scrollbar-track {
   
     
     
    border-radius: 10px;
   
     
     
    background:#394d63;
   
     
     
   }

棰勮锛?/span>

3.5.5 鐧惧害鍦板浘

vue-baidu-map 鏂囨。

  
    
    
  
   
     
     
   <baidu-map
   
     
     
    :center="map.center" // 鍦板浘涓績缁忕含 {lng: 114.023598, lat: 33.589299}
   
     
     
    :scroll-wheel-zoom="true" // 鍦板浘鏄惁婊氳疆缂╂斁
   
     
     
    :zoom="map.zoom" // 榛樿鍦板浘灏哄
   
     
     
    :mapStyle="mapStyle" // 鍦板浘鏍峰紡
   
     
     
    class="baidumap"> // 鍦板浘瀹介珮
   
     
     
    <template v-for="(it,index) in ms"> // 鏍囩偣
   
     
     
    <bm-marker 
   
     
     
    :key="it.id"
   
     
     
    :position="it.position" // 鏍囩偣浣嶇疆
   
     
     
    @click="markclick(it,index)" // 鏍囩偣鐐瑰嚮浜嬩欢
   
     
     
    @mouseover="markover(it,index)" // 榧犳爣绉诲姩鍒版爣鐐逛笂鐨勪簨浠?/span>
   
     
     
    :icon="it.if? iocn:newincon" // 鏍囩偣鐨勬牱寮?/span>
   
     
     
    @mouseout="markout(it,index)"> // 榧犳爣浠庢爣鐐圭Щ璧扮殑浜嬩欢
   
     
     
    <bm-info-window
   
     
     
    :show="it.show" // 鏍囩偣鎻愮ず妗嗙殑鏄剧ずtrue/false
   
     
     
    :position="it.position"> // 鎻愮ず妗嗗潗鏍?/span>
   
     
     
    <p v-text="it.mess"></p> // 鎻愮ず妗嗗唴瀹?/span>
   
     
     
    </bm-info-window>
   
     
     
    </bm-marker>
   
     
     
    </template>
   
     
     
   </baidu-map>

棰勮锛?/span>

3.5.6 鐭㈤噺鍦板浘

Echarts鐭㈤噺鍦板浘鐨勭被鍨嬫湁

type:'scatter' 鏁ｇ偣姘旀场鍥撅紝鍙湪鍦板浘涓樉绀轰笉鐢ㄩ鑹茬▼搴︾殑鐐?/span>
type:'effectScatter' 鏈夋稛婕壒鏁堝姩鐢荤殑鏁ｇ偣鍥?/span>
type:'map' 鍦扮悊鍖哄煙鐨勬暟鎹彲瑙嗗寲
type:'lines' 鍦板浘鑸嚎銆佽矾绾跨殑鍙鍖?/span>

寮曞叆鍦板浘

  
    
    
  
   
     
     
   require('echarts/map/js/china.js')
   
     
     
   require('echarts/map/js/province/beijing.js')

杩欓噷鎴戞湁闂锛屾垜瑕佸紩鍏ュ叏鍥界殑鐪佷唤锛屽氨瑕佸鍐?0澶氫釜require锛?

鏈夋病鏈夊ぇ浣兘缁欏嚭鏇村ソ鐨勫姙娉曪紵

鎵惧埌涓€涓叏閲忓紩鐢ㄧ殑鏂规硶

  
    
    
  
   
     
     
   const rjs = require.context('echarts/map/js/province')
   
     
     
   rjs.keys().forEach(rjs)

鍙互鏇夸唬

  
    
    
  
   
     
     
   require('echarts/map/js/province/beijing.js')
   
     
     
   require('echarts/map/js/province/shanxi.js')
   
     
     
   require('echarts/map/js/province/neimenggu.js')
   
     
     
   绛夌瓑绛夈€傘€傘€?/span>

鍦板浘閰嶇疆锛?/span>

  
    
    
  
   
     
     
   option = {
   
     
     
    // 榧犳爣鎻愮ず
   
     
     
    tooltip : {
   
     
     
    trigger: 'item',
   
     
     
    formatter : function(params){
   
     
     
    var val = params.data
   
     
     
    return '鍚嶇О锛?+val.name+'锛屼釜鏁帮細'+val.value[2]+'<br/>'+'鎬绘暟锛?+val.tol+'锛屼釜鏁帮細'+val.un
   
     
     
    },
   
     
     
    },
   
     
     
   

   
     
     
    // 涓嶅悓棰滆壊鐨勭偣
   
     
     
    visualMap: [
   
     
     
    {
   
     
     
    min: 0,
   
     
     
    max: 1,
   
     
     
    show : false,
   
     
     
    inRange: {
   
     
     
    color: ['#01cae2', '#e63136',]
   
     
     
    },
   
     
     
    dimension : 3,
   
     
     
    },
   
     
     
    ],
   
     
     
   

   
     
     
    // 鍦板浘鏍峰紡
   
     
     
    geo: {
   
     
     
    map: 'china', // 鍦板浘鏍峰紡锛屽綋涓衡€樺寳浜€欐椂锛屼細鏄剧ず鍖椾含鍦板浘
   
     
     
    roam : true, 
   
     
     
    label: {
   
     
     
    emphasis: {
   
     
     
    show: true
   
     
     
    }
   
     
     
    },
   
     
     
    zoom : 1.2, // 鍒濆澶у皬
   
     
     
    scaleLimit : {
   
     
     
    min : 1.2, // 鏈€灏忕缉鏀?/span>
   
     
     
    max : 6 // 鏈€澶х缉鏀?/span>
   
     
     
    },
   
     
     
    regions : regions(data) // 鐪佷唤鏍峰紡鏂规硶
   
     
     
    },
   
     
     
   

   
     
     
    series : [
   
     
     
    {
   
     
     
    name: '鍒嗗竷',
   
     
     
    type: 'scatter',
   
     
     
    coordinateSystem: 'geo', // 鍦板浘閰嶇疆
   
     
     
    data: convertData(data.sort(function (a, b) { // 鏁版嵁鏂规硶
   
     
     
    return b.value - a.value;
   
     
     
    })),
   
     
     
    encode: {
   
     
     
    value : 2
   
     
     
    },
   
     
     
    hoverAnimation: true,
   
     
     
    itemStyle: {
   
     
     
    normal: {
   
     
     
    // color: '#FF3030',
   
     
     
    shadowBlur: 1,
   
     
     
    }
   
     
     
    },
   
     
     
    }
   
     
     
    ]
   
     
     
   };

褰撶偣鍑荤渷浠藉湴鍥炬椂锛屾垜浠彲浠ヨ繘鍏ョ渷浠藉湴鍥剧殑鐭㈤噺鍥?/span>

  
    
    
  
   
     
     
   myChart.on('click',function(params){
   
     
     
    option.geo.map = '鍖椾含'
   
     
     
    myChart.setOption(option, true);
   
     
     
   })

棰勮锛?/span>