Echarts，然后需要2周拿出成果，有點(diǎn)慌????
系統(tǒng)搭建
vue-cli
vuex記錄登錄信息
vue-router路由跳轉(zhuǎn)3個(gè)維度的頁(yè)面，提取出共用的組件
各個(gè)組件開發(fā)
調(diào)節(jié)樣式，增加UI
加入后臺(tái)接口數(shù)據(jù)
優(yōu)化顯示
測(cè)試
上線
Echarts，有問題都沒人討論的情況下。。。
node環(huán)境，直接去官網(wǎng)下載即可 node.jsnode -v npm -v 查看是否安裝成功以及版本npm的方式npm i vuenpm i -g @vue/clivue -Vvuex、vue-router，其他可根據(jù)需要添加。vue create hello-worldvue uinpm i xxx-S -D -g 的區(qū)別
npm i -S xxx 文件寫入dependencies，用于工程中開發(fā)時(shí)使用到的插件，會(huì)發(fā)布到生產(chǎn)環(huán)境如UI，JS等。 npm i -D xxx 文件寫入devDependencies，用于工程支持類插件，不會(huì)發(fā)布到生產(chǎn)環(huán)境，如gulp等壓縮打包工具。 npm i -g xxx 全局安裝，如vue、ncu等。安裝目錄為：C:Users用戶AppDataRoamingnpm
vue ui圖像化界面中包含了若干插件，可點(diǎn)擊安裝，但不一定是最新版本。npm全量引用，后期為了精簡(jiǎn)項(xiàng)目可單個(gè)引用。npm i echarts -Smain.js中添加
echarts的樣式，并引入到項(xiàng)目中。官方自定義地址：theme-buildervar myChart = this.$echarts.init(document.getElementById('myid'),'temp')myid是我們要展示的echarts的id。temp是我們的自定義的樣式，同時(shí)官方提供了幾個(gè)樣式例子，可以node_modules\echarts\theme中找到。npm全量引用，后期為了精簡(jiǎn)項(xiàng)目可單個(gè)引用。npm i element-ui -Smain.js中添加
vue-baidu-mapnpm i vue-baidu-map -Smain.js中添加。
xxxxxxxx這里填寫自己申請(qǐng)的密鑰。<baidu-map/>來調(diào)用。css樣式初始化，簡(jiǎn)單來說就是為了各個(gè)瀏覽器能統(tǒng)一什么的。main.js中添加
router.js、store.js，大致如下：router.beforeEach 路由衛(wèi)士用于是否登錄校驗(yàn)。main.js中來引用。user.id。所以我們儲(chǔ)存一下，然后跳轉(zhuǎn)到Index頁(yè)面就行。Cookie和SessionsetInterval，每隔1秒去獲取一下當(dāng)前時(shí)間賦值給你定義的v-model就行。Vue的生命周期有一定的了解。Echarts配置，適合新手，大佬輕噴。option就可以了。<template> <div id='myecharts' class='myecharts'></template>
<script> export default { mounted(){ this.drawECharts() },
methods:{ drawECharts(){ // temp 是我們的自定義樣式，上面安裝Echarts時(shí)有介紹 var myChart = this.$echarts.init(document.getElementById('myecharts'),'temp') var option = {} option = { // 吧啦吧啦 一堆配置 } // 執(zhí)行渲染圖形和數(shù)據(jù)的操作 if (option && typeof option === 'object') { myChart.setOption(option, true) } } } }</script>
<style> // 一定要設(shè)置大小，不然不出來，這玩意和canvas一樣 .myecharts{ width : 500px; height : 300px; }</style>3.5.2 線形圖
option = { // 提示框（就是鼠標(biāo)放上去后出現(xiàn)的框） tooltip : { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } },
// 右上角的組件，用于說明，也可進(jìn)行點(diǎn)擊篩選 legend: { align : 'right', x : 'right', top : 25, selectedMode : 'single', // 我這里設(shè)置的單選模式 data:['好','壞'] // 顯示的第一項(xiàng)和第二項(xiàng)，這里的顏色是根據(jù)自定義主題的顏色順序來定的 },
// x、y軸顯示一些設(shè)置，比如刻度顏色顯示什么的，可在自定義主題設(shè)置一部分 xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, // 具體配置項(xiàng)，根據(jù)具體項(xiàng)目查看官網(wǎng)配置項(xiàng)說明 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的API，我們需要顯示默認(rèn)的一些數(shù)據(jù)，配置如下// 默認(rèn)顯示壞的數(shù)據(jù)myChart.dispatchAction({ type: 'legendSelect', name: '壞',})// 默認(rèn)顯示第7個(gè)數(shù)據(jù)myChart.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: 6,})echarts的y軸。formatter又要寫一堆，雖然用了自定義的，但最開始是用的formatter。<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/>個(gè)數(shù)：{{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/>個(gè)數(shù)：{{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行文字剛好貼在2行柱狀圖前面。echarts配置。option = { // 鼠標(biāo)提示框 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
// 右邊顯示 legend: { selectedMode:false, data: ['好', '壞'], top:5, right:8, },
// 兩個(gè)圖坐標(biāo)的位置 grid: [ {left: '16%', top:'10%', width: '22%', height: '86%'}, {left: '65%', top:'10%', width: '22%', height: '86%'} ],
// 兩個(gè)圖x軸的設(shè)置，這里的gridIndex就是個(gè)序號(hào)，用于區(qū)分 xAxis: [ {gridIndex : 0, show : false}, {gridIndex : 1, show : false}, ],
// 兩個(gè)圖y軸的設(shè)置，注釋的部分是用echarts本身的y軸來顯示名稱和數(shù)量的 yAxis: [ { gridIndex: 0, type: 'category', show : false, data : ['廣東/12','杭州/13','北京北京/14','天津/16'], // axisLabel: { // formatter : function(value){ // let arr = value.split('/') // return '{a|'+arr[0]+'}\n{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]+'}\n{b|'+ arr[1]+'}'; // }, // rich: { // a: { // color : '#ffffff', // lineHeight : 19, // fontSize : 14, // align: 'right', // }, // b:{ // fontSize : 18, // lineHeight : 19, // fontWeight : 'bold', // align: 'right', // fontFamily : 'Digital', // } // } // } }, ],
// 渲染圖形和數(shù)據(jù)，bar是柱狀圖 // barWidth 柱狀的寬度 // 兩類兩套，所以有4組數(shù)據(jù)，使用xAxisIndex、yAxisIndex來區(qū)分。 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 } }, }, ]}table我這里使用了element-ui加上修改 UI 默認(rèn)css 和 滾動(dòng)條的 css。<el-table:data='tableData'height='252'style='min-width: 100%;'><el-table-columnprop='date'min-width='12'header-align='center'label='時(shí)間'><template slot-scope='scope'><template v-if='scope.row.if == '1''><img src='../../assets/img/new.png'/><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>
css的修改，這里我使用了自定義字體哦，完全copy是不起作用的。.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;}
<baidu-map :center='map.center' // 地圖中心經(jīng)緯 {lng: 114.023598, lat: 33.589299} :scroll-wheel-zoom='true' // 地圖是否滾輪縮放 :zoom='map.zoom' // 默認(rèn)地圖尺寸 :mapStyle='mapStyle' // 地圖樣式 class='baidumap'> // 地圖寬高 <template v-for='(it,index) in ms'> // 標(biāo)點(diǎn) <bm-marker :key='it.id' :position='it.position' // 標(biāo)點(diǎn)位置 @click='markclick(it,index)' // 標(biāo)點(diǎn)點(diǎn)擊事件 @mouseover='markover(it,index)' // 鼠標(biāo)移動(dòng)到標(biāo)點(diǎn)上的事件 :icon='it.if? iocn:newincon' // 標(biāo)點(diǎn)的樣式 @mouseout='markout(it,index)'> // 鼠標(biāo)從標(biāo)點(diǎn)移走的事件 <bm-info-window :show='it.show' // 標(biāo)點(diǎn)提示框的顯示true/false :position='it.position'> // 提示框坐標(biāo) <p v-text='it.mess'></p> // 提示框內(nèi)容 </bm-info-window> </bm-marker> </template></baidu-map>type:'scatter' 散點(diǎn)氣泡圖，可在地圖中顯示不用顏色程度的點(diǎn)type:'effectScatter' 有漣漪特效動(dòng)畫的散點(diǎn)圖type:'map' 地理區(qū)域的數(shù)據(jù)可視化type:'lines' 地圖航線、路線的可視化require('echarts/map/js/china.js')require('echarts/map/js/province/beijing.js')
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')等等等。。。
option = { // 鼠標(biāo)提示 tooltip : { trigger: 'item', formatter : function(params){ var val = params.data return '名稱：'+val.name+'，個(gè)數(shù)：'+val.value[2]+'<br/>'+'總數(shù)：'+val.tol+'，個(gè)數(shù)：'+val.un }, },
// 不同顏色的點(diǎn) visualMap: [ { min: 0, max: 1, show : false, inRange: { color: ['#01cae2', '#e63136',] }, dimension : 3, }, ],
// 地圖樣式 geo: { map: 'china', // 地圖樣式，當(dāng)為‘北京’時(shí)，會(huì)顯示北京地圖 roam : true, label: { emphasis: { show: true } }, zoom : 1.2, // 初始大小 scaleLimit : { min : 1.2, // 最小縮放 max : 6 // 最大縮放 }, regions : regions(data) // 省份樣式方法 },
series : [ { name: '分布', type: 'scatter', coordinateSystem: 'geo', // 地圖配置 data: convertData(data.sort(function (a, b) { // 數(shù)據(jù)方法 return b.value - a.value; })), encode: { value : 2 }, hoverAnimation: true, itemStyle: { normal: { // color: '#FF3030', shadowBlur: 1, } }, } ]};myChart.on('click',function(params){option.geo.map = '北京'myChart.setOption(option, true);})
聯(lián)系客服
