vue3 寫一個大屏

首頁>技術>擇偶時分2020-10-07 10:04

vue3 寫一個大屏

前面寫了一篇vue3.0的基本上手的文章，今天來個偏向實戰的，寫兩個大屏demo，沒有設計稿參考了一個別人寫的HTML版的，一些邊框裝飾我用了DataV這個庫，這兒也放上這兩個的地址。

1rem = 100px

佈局方面同過vw,vh flex 彈性盒子進行佈局

封裝元件

main.js 中註冊echarts 配置到全域性呼叫，vue2.x中就是掛載到原型鏈上，我把全域性元件自動註冊了，統一把components下的元件都作為全域性元件使用，使用require.context 遍歷註冊

app.config.globalProperties.echarts = echartsconst vueFiles = require.context(&#34;@/components&#34;, true, /component\\.vue$/)vueFiles.keys().forEach((key) =&gt; { const component = vueFiles(key).default app.component(component.name, component)})const jsFiles = require.context(&#34;@/components&#34;, true, /component\\.js$/)jsFiles.keys().forEach((key) =&gt; { const component = jsFiles(key).default app.component(component.name, component)})

components 新增tao-charts元件

&lt;template&gt; &lt;div ref=&#34;myChart&#34; class=&#34;echarts&#34;&gt;&lt;/div&gt;&lt;/template&gt;&lt;script&gt;import { onMounted, getCurrentInstance } from &#34;vue&#34;export default { name: &#34;tao-charts&#34;, props: { data: { type: Object, default: null } }, setup(props) { const { ctx } = getCurrentInstance() const drawLine = (dom, option) =&gt; { const myChart = ctx.echarts.init(dom) myChart.setOption(option) // 當瀏覽器視窗發生變化的時候呼叫div的resize方法 window.onresize = () =&gt; { myChart.resize() } } const setChart = (option) =&gt; { const dom = ctx.$refs.myChart drawLine(dom, option) } onMounted(() =&gt; { setChart(props.data) }) }}&lt;/script&gt;&lt;style lang=&#34;scss&#34; scoped&gt;.echarts { height: 100%; width: 100%; position: relative;}&lt;/style&gt;

呼叫元件圖表配置項

const lineChart = (echarts, datasource) =&gt; { const options = { grid: { left: &#34;2%&#34;, top: &#34;30%&#34;, bottom: &#34;5%&#34;, right: &#34;8%&#34;, containLabel: true }, tooltip: {}, xAxis: { type: &#34;category&#34;, axisTick: { alignWithLabel: true }, nameTextStyle: { color: &#34;#82b0ec&#34; }, axisLine: { show: false, lineStyle: { color: &#34;#82b0ec&#34; } }, axisLabel: { textStyle: { color: &#34;#fff&#34; }, margin: 30 } }, yAxis: { show: false, gridIndex: 0, axisLine: { lineStyle: { color: &#34;#4ADEFE&#34; } }, splitLine: { lineStyle: { color: &#34;#4ADEFE&#34; } } }, dataset: { source: datasource }, series: [{ name: &#34;&#34;, type: &#34;pictorialBar&#34;, symbolSize: [20, 10], symbolOffset: [0, -6], symbolPosition: &#34;end&#34;, z: 12, // &#34;barWidth&#34;: &#34;0&#34;, label: { normal: { show: true, position: &#34;top&#34;, // &#34;formatter&#34;: &#34;{c}%&#34; fontSize: 18, fontWeight: &#34;bold&#34;, color: &#34;#34DCFF&#34; } }, color: &#34;#2DB1EF&#34; }, { type: &#34;pictorialBar&#34;, symbolSize: [20, 10], symbolOffset: [0, 7], // &#34;barWidth&#34;: &#34;20&#34;, z: 12, color: &#34;#2DB1EF&#34; }, { type: &#34;pictorialBar&#34;, symbolSize: [30, 15], symbolOffset: [0, 12], z: 10, itemStyle: { normal: { color: &#34;transparent&#34;, borderColor: &#34;#2EA9E5&#34;, borderType: &#34;solid&#34;, borderWidth: 1 } } }, { type: &#34;pictorialBar&#34;, symbolSize: [40, 20], symbolOffset: [0, 18], z: 10, itemStyle: { normal: { color: &#34;transparent&#34;, borderColor: &#34;#19465D&#34;, borderType: &#34;solid&#34;, borderWidth: 2 } } }, { type: &#34;bar&#34;, barWidth: &#34;20&#34;, barGap: &#34;10%&#34;, // Make series be overlap barCateGoryGap: &#34;10%&#34;, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{ offset: 0, color: &#34;#38B2E6&#34; }, { offset: 1, color: &#34;#0B3147&#34; } ]), opacity: 0.8 } } } ] } return options}const mapChart = (echarts, datas) =&gt; { echarts.registerMap(&#34;china&#34;, datas) const data = [ { name: &#34;北京&#34;, transAmt: 199, serviceRate: 99 }, { name: &#34;蘇州&#34;, transAmt: 42, serviceRate: 99 }, { name: &#34;南京&#34;, transAmt: 102, serviceRate: 99 }, { name: &#34;上海&#34;, transAmt: 81, serviceRate: 99 }, { name: &#34;杭州&#34;, transAmt: 47, serviceRate: 99 }, { name: &#34;天津&#34;, transAmt: 67, serviceRate: 99 }, { name: &#34;成都&#34;, transAmt: 82, serviceRate: 99 }, { name: &#34;寧波&#34;, transAmt: 123, serviceRate: 99 }, { name: &#34;上海&#34;, transAmt: 24, serviceRate: 99 }, { name: &#34;深圳&#34;, transAmt: 92, serviceRate: 99 } ] const option = { tooltip: { trigger: &#34;item&#34;, formatter(params) { if (typeof params.value[2] === &#34;undefined&#34;) { return `${params.name} : ${params.value}` } return `${params.name} : ${params.value[2]}` } }, legend: { orient: &#34;vertical&#34;, y: &#34;bottom&#34;, x: &#34;right&#34;, data: [&#34;pm2.5&#34;], textStyle: { color: &#34;#fff&#34; } }, visualMap: { show: false, min: 0, max: 500, left: &#34;left&#34;, top: &#34;bottom&#34;, text: [&#34;高&#34;, &#34;低&#34;], // 文字，預設為數值文字 calculable: true, seriesIndex: [1], inRange: {} }, geo: { map: &#34;china&#34;, show: true, roam: true, label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { normal: { areaColor: &#34;#3a7fd5&#34;, borderColor: &#34;#0a53e9&#34;, // 線 shadowColor: &#34;#092f8f&#34;, // 外發光 shadowBlur: 20 }, emphasis: { areaColor: &#34;#0a2dae&#34; // 懸浮區背景 } } }, series: [ { symbolSize: 5, label: { normal: { formatter: &#34;{b}&#34;, position: &#34;right&#34;, show: true }, emphasis: { show true } }, itemStyle: { normal: { color: &#34;#fff&#34; } }, name: &#34;light&#34;, type: &#34;scatter&#34;, coordinateSystem: &#34;geo&#34;, data: [...data] }, { type: &#34;map&#34;, map: &#34;china&#34;, geoIndex: 0, aspectScale: 0.75, // 長寬比 showLegendSymbol: false, // 存在legend時顯示 label: { normal: { show: false }, emphasis: { show: false, textStyle: {  color: &#34;#fff&#34; } } }, roam: true, itemStyle: { normal: { areaColor: &#34;#031525&#34;, borderColor: &#34;#FFFFFF&#34; }, emphasis: { areaColor: &#34;#2B91B7&#34; } }, animation: false, data }, { name: &#34;Top 5&#34;, type: &#34;scatter&#34;, coordinateSystem: &#34;geo&#34;, symbol: &#34;pin&#34;, symbolSize: [50, 50], label: { normal: { show: true, textStyle: {  color: &#34;#fff&#34;,  fontSize: 9 }, formatter(value) {  return value.data.value[2] } } }, itemStyle: { normal: { color: &#34;#D8BC37&#34; // 標誌顏色 } }, data: [...data], showEffectOn: &#34;render&#34;, rippleEffect: { brushType: &#34;stroke&#34; }, hoverAnimation: true, zlevel: 1 } ] } return option}const pieChart = (echarts, datasource) =&gt; { const option = { color: [&#34;#cd4692&#34;, &#34;#9658c3&#34;, &#34;#6c6be2&#34;, &#34;#01aebf&#34;, &#34;#18b794&#34;], tooltip: { trigger: &#34;item&#34;, axisPointer: { type: &#34;shadow&#34; }, formatter: &#34;{a} &lt;br/&gt;{c}({d}%)&#34;, textStyle: { fontSize: 16 } }, dataset: { source: datasource }, series: [{ type: &#34;pie&#34;, clockwise: false, startAngle: 90, radius: &#34;45%&#34;, center: [&#34;50%&#34;, &#34;50%&#34;], roseType: &#34;radius&#34;, // area itemStyle: { normal: { borderColor: &#34;#273454&#34;, borderWidth: &#34;3&#34; } }, label: { show: true, position: &#34;outside&#34;, formatter: &#34;{a|{b}：{d}%}\\n{hr|}&#34;, rich: { hr: { backgroundColor: &#34;t&#34;, borderRadius: 100, width: 0, height: 5, padding: [3, 3, 0, -16], shadowColor: &#34;#1c1b3a&#34;, shadowBlur: 1, shadowOffsetX: &#34;0&#34;, shadowOffsetY: &#34;2&#34; }, a: { padding: [-35, 15, -20, 5] } } }, labelLine: { normal: { length: 10, length2: 20, lineStyle: { width: 1 } } } }] } return option}const pieChartVie = () =&gt; { const scaleData = [{ name: &#34;紅燈 14&#34;, value: 14, radius1: [58, 60], radius2: &#34;25%&#34; }, { name: &#34;黃燈 32&#34;, value: 32, radius1: [80, 82], radius2: &#34;30%&#34; }, { name: &#34;綠燈 288&#34;, value: 288, radius1: [102, 104], radius2: &#34;35%&#34; }, { name: &#34;掛起 463&#34;, value: 463, radius1: [124, 126], radius2: &#34;40%&#34; } ] const placeHolderStyle = { normal: { label: { show: false }, labelLine: { show: false }, color: &#34;rgba(0, 0, 0, 0)&#34;, borderColor: &#34;rgba(0, 0, 0, 0)&#34;, borderWidth: 0 } } const seriesObj = [] const color = [&#34;#FF647C&#34;, &#34;#FFBE75&#34;, &#34;#3EE2A5&#34;, &#34;#6C77FD&#34;] // eslint-disable-next-line no-plusplus for (let i = 0; i &lt; scaleData.length; i++) { console.log(scaleData[i].name) seriesObj.push({ name: &#34;&#34;, type: &#34;pie&#34;, radius: scaleData[i].radius1, hoverAnimation: false, itemStyle: { normal: { label: { show: false, color: &#34;#ddd&#34; } } }, data: [{ value: scaleData[i].value, name: scaleData[i].name, itemStyle: { normal: { borderWidth: 5, borderColor: color[i] } } }, { value: 200, name: &#34;&#34;, itemStyle: placeHolderStyle }] }, { name: &#34;&#34;, type: &#34;gauge&#34;, detail: false, splitNumber: 10, // 刻度數量 radius: scaleData[i].radius2, // 圖表尺寸 center: [&#34;50%&#34;, &#34;50%&#34;], startAngle: 0, // 開始刻度的角度 endAngle: -356, // 結束刻度的角度 axisLine: { show: false, lineStyle: { width: 0, shadowBlur: 0 } }, axisTick: { show: true, lineStyle: { color: &#34;rgba(220,220,220,0.5)&#34;, width: 5 }, length: 5, splitNumber: 5 }, splitLine: { show: false, length: 5, lineStyle: { color: &#34;rgba(220,220,220,0.1)&#34; } }, axisLabel: { show: false } }) } const option = { color, tooltip: { show: false }, legend: { orient: &#34;vertical&#34;, x: &#34;200&#34;, y: &#34;center&#34;, itemGap: 35, data: [&#34;掛起 463&#34;, &#34;紅燈 14&#34;, &#34;黃燈 32&#34;, &#34;綠燈 288&#34;], show: true, textStyle: { color: &#34;#fff&#34; } }, toolbox: { show: false }, series: seriesObj } return option}const hillChart = (echarts, datasource) =&gt; { const option = { tooltip: { trigger: &#34;axis&#34;, axisPointer: { type: &#34;shadow&#34; } }, grid: { left: &#34;12%&#34;, top: &#34;25%&#34;, bottom: &#34;12%&#34;, right: &#34;8%&#34; }, xAxis: { type: &#34;category&#34;, axisTick: { show: false }, axisLine: { lineStyle: { color: &#34;rgba(255, 129, 109, 0.1)&#34;, width: 1 // 這裡是為了突出顯示加上的 } }, axisLabel: { textStyle: { color: &#34;#999&#34;, fontSize: 12 } } }, yAxis: [{ splitNumber: 2, axisTick: { show: false }, axisLine: { lineStyle: { color: &#34;rgba(255, 129, 109, 0.1)&#34;, width: 1 // 這裡是為了突出顯示加上的 } }, axisLabel: { textStyle: { color: &#34;#999&#34; } }, splitArea: { areaStyle: { color: &#34;rgba(255,255,255,.5)&#34; } }, splitLine: { show: true, lineStyle: { color: &#34;rgba(255, 129, 109, 0.1)&#34;, width: 0.5, type: &#34;dashed&#34; } } }], dataset: { source: datasource }, series: [{ type: &#34;pictorialBar&#34;, barCategoryGap: &#34;0%&#34;, symbol: &#34;path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z&#34;, label: { show: true, position: &#34;top&#34;, distance: 10, color: &#34;#b73a35&#34;, fontWeight: &#34;bolder&#34;, fontSize: 14 }, itemStyle: { normal: { color: { type: &#34;linear&#34;, x: 0, y: 0, x2: 0, y2: 1, colorStops: [{  offset: 0,  color: &#34;#5433f7&#34; // 0% 處的顏色 }, {  offset: 1,  color: &#34;#f24c44&#34; // 100% 處的顏色 } ], global: false // 預設為 false } }, emphasis: { opacity: 1 } }, z: 10 }] } return option}const barChart = (echarts, datasource) =&gt; { const option = { color: [&#34;#FADB71&#34;], tooltip: { trigger: &#34;axis&#34;, axisPointer: { // 座標軸指示器，座標軸觸發有效 type: &#34;shadow&#34; // 預設為直線，可選為：&#39;line&#39; | &#39;shadow&#39; } }, grid: { left: &#34;12%&#34;, top: &#34;25%&#34;, bottom: &#34;12%&#34;, right: &#34;8%&#34; }, xAxis: [ { type: &#34;category&#34;, axisTick: { alignWithLabel: true }, axisLabel: { color: &#34;#FADB71&#34; // 刻度線標籤顏色 } } ], yAxis: [ { type: &#34;value&#34;, axisLabel: { color: &#34;#FADB71&#34; // 刻度線標籤顏色 } } ], dataset: { source: datasource }, series: [ { type: &#34;bar&#34;, barWidth: &#34;60%&#34; } ] } return option}export default { lineChart, mapChart, pieChart, pieChartVie, hillChart, barChart}

呼叫配置項，填充資料

&lt;template&gt; &lt;div class=&#34;wrapper&#34;&gt; &lt;section class=&#34;item span1&#34;&gt; &lt;article class=&#34;item-span item-span1&#34;&gt; &lt;dv-border-box-13&gt; &lt;div class=&#34;flex-center-align&#34;&gt; &lt;h1 class=&#34;title&#34;&gt;// 當前比對資料 // &lt;/h1&gt; &lt;span class=&#34;num&#34;&gt;3,456,789&lt;/span&gt; &lt;/div&gt; &lt;/dv-border-box-13&gt; &lt;/article&gt; &lt;article class=&#34;item-span item-span2&#34;&gt; &lt;dv-border-box-11 title=&#34;違法犯罪人員分析&#34;&gt; &lt;tao-charts :data=&#34;option.pieChart&#34; /&gt; &lt;/dv-border-box-11&gt; &lt;/article&gt; &lt;article class=&#34;item-span item-span3&#34;&gt; &lt;dv-border-box-11 title=&#34;人口出入記錄&#34;&gt; &lt;tao-charts :data=&#34;option.lineChart&#34; /&gt; &lt;/dv-border-box-11&gt; &lt;/article&gt; &lt;/section&gt; &lt;section class=&#34;item span2&#34;&gt; &lt;div class=&#34;header flex-center&#34;&gt; &lt;img src=&#34;/img/jinghui.png&#34; style=&#34;width:0.8rem;height:0.8rem&#34;&gt; &lt;span&gt;智慧社群內網比對平臺&lt;/span&gt; &lt;/div&gt; &lt;div class=&#34;flex-center&#34;&gt; &lt;p class=&#34;title&#34;&gt;NO.1北京：2543289人&lt;/p&gt; &lt;p class=&#34;title&#34;&gt;NO.1天津： 5690人&lt;/p&gt; &lt;p class=&#34;title&#34;&gt;NO.1河北： 456人&lt;/p&gt; &lt;/div&gt; &lt;p&gt;犯罪人口來源分析&lt;/p&gt; &lt;dv-decoration-12 class=&#34;animate-rate&#34; /&gt; &lt;tao-charts :data=&#34;option.mapChart&#34; /&gt; &lt;/section&gt; &lt;section class=&#34;item span3&#34;&gt; &lt;article class=&#34;item-span item-span1&#34;&gt; &lt;dv-border-box-11 title=&#34;違法犯罪人員年齡分佈&#34;&gt; &lt;tao-charts :data=&#34;option.hillChart&#34; /&gt; &lt;/dv-border-box-11&gt; &lt;/article&gt; &lt;article class=&#34;item-span item-span2&#34;&gt; &lt;dv-border-box-11 title=&#34;違法犯罪人員地區分佈&#34;&gt; &lt;tao-charts :data=&#34;option.barChart&#34; /&gt; &lt;/dv-border-box-11&gt; &lt;/article&gt; &lt;article class=&#34;item-span item-span3&#34;&gt; &lt;dv-border-box-11 title=&#34;人口出入時間段統計&#34;&gt; &lt;tao-charts :data=&#34;option.hillChart&#34; /&gt; &lt;/dv-border-box-11&gt; &lt;/article&gt; &lt;/section&gt; &lt;/div&gt;&lt;/template&gt;&lt;script&gt;// import axios from &#34;axios&#34;import { reactive, onMounted, getCurrentInstance } from &#34;vue&#34;import chartConfig from &#34;./echarts&#34;import cityJson from &#34;./city.json&#34;export default { setup() { const { ctx } = getCurrentInstance() // 指定圖表的配置項和資料 const dataset = [ [&#34;product&#34;, &#34;值&#34;], [&#34;襯衫&#34;, 43.3], [&#34;羊毛衫&#34;, 83.1], [&#34;雪紡衫&#34;, 86.4], [&#34;褲子&#34;, 72.4], [&#34;高跟鞋&#34;, 72.4], [&#34;襪子&#34;, 72.4] ] const dataset2 = [ [&#34;違法犯罪人員分析&#34;, &#34;數值&#34;], [&#34;賣淫嫖娼&#34;, 335], [&#34;經偵嫌疑&#34;, 310], [&#34;重點人口&#34;, 234], [&#34;刑貞重點&#34;, 135], [&#34;吸毒人口&#34;, 148] ] const dataset3 = [ [&#34;人口出入時間段統計&#34;, &#34;數值&#34;], [&#34;馴鹿&#34;, 123], [&#34;火箭&#34;, 60], [&#34;飛機&#34;, 234], [&#34;高鐵&#34;, 45], [&#34;輪船&#34;, 148], [&#34;汽車&#34;, 148], [&#34;跑步&#34;, 148], [&#34;步行&#34;, 148] ] const dataset4 = [ [&#34;地區分佈&#34;, &#34;數值&#34;], [&#34;河北&#34;, 123], [&#34;天津&#34;, 60], [&#34;北京&#34;, 234], [&#34;新疆&#34;, 45], [&#34;內蒙&#34;, 148], [&#34;寧夏&#34;, 148], [&#34;海南&#34;, 148] ] const option = reactive( { lineChart: chartConfig.lineChart(ctx.echarts, dataset), pieChart: chartConfig.pieChart(ctx.echarts, dataset2), hillChart: chartConfig.hillChart(ctx.echarts, dataset3), barChart: chartConfig.barChart(ctx.echarts, dataset4), pieChartVie: chartConfig.pieChartVie(ctx.echarts), mapChart: { ...chartConfig.mapChart(ctx.echarts, cityJson) } } ) onMounted(() =&gt; { // 介面呼叫 // axios.get(&#34;https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json&#34;).then((res) =&gt; { // console.log(res, &#34;ress&#34;) // 資料賦值 // option.mapChart = chartConfig.mapChart(ctx.echarts, res.data) // }) }) return { option } }}&lt;/script&gt;&lt;style lang=&#34;scss&#34; scoped&gt;$num-text-size: 0.44rem;.wrapper { width: 100vw; height: 100vh; position: absolute; margin: 0; overflow: hidden; background: url(&#34;/img/index_bg.png&#34;) no-repeat 0 0 / 100% 100%; background-size: cover; display: flex; color: #ffffff; .item { flex-direction: column; display: flex; margin: 0.2rem 0; .item-span { .title { color: #0e94ea; } .num { color: #ffffff; font-size: $num-text-size; } } } .span1 { width: 25vw; .item-span1 { height: 20vh; } .item-span2 { flex: 1; } .item-span3 { height: 30vh; } } .span2 { flex: 1; } .span3 { width: 25vw; .item-span { flex: 1; } }}.flex-center-align { display: flex; justify-content: center; align-items: center; flex-flow: column;}.flex-center { display: flex; justify-content: center; align-items: center; .title { color: #7fff00; font-weight: bold; margin-left: 0.4rem; }}.header { display: flex; justify-content: center; align-items: center; font-size: 0.44rem; color: #cdddf7; font-weight: 900; letter-spacing: 5px;}.animate-rate { width: 6rem; height: 6rem; position: fixed; margin: 0 auto; top: 25vh; left: 35%;}&lt;/style&gt;

效果預覽總結

上面的程式碼只是部分，完整程式碼我也上傳到碼雲上面了，需要說明下，所有的資料都是隨便造的，具體細節也沒有調，只是作為個demo，如果想要完整的程式碼碼雲上搜索upholdjx/vue-datav-chart就可以找到了

下面展示幾張上面提到的別人寫的HTML版本的一些樣例，感覺挺不錯有需要的可以去看看，地址在開頭也說了。

8574