To complete the effect
Visit address:http://106.75.179.94/bigscreen/#/
Source code although all I write, but belong to the company, so not issued
Vue2, dataV, echart are used
Practical cases of large screen:
Gitee.com/zhufei_yao/…
DataV component libraries and documentation:
Gitee.com/jiasichen/d… Datav.jiaminghi.com/guide/#%E7%… charts.jiaminghi.com/config/
Echart Case Library:
www.makeapie.com/explore.htm…
Every learning:
Look first: www.runoob.com/echarts/ech…
Then look at: echarts.apache.org/zh/option.h…
Finally see (complete daqo) www.bbsmax.com/A/nAJvKq9G5…
The saving grace of the case
The project part is modeled on the following case: gitee.com/zhufei_yao/…
Rem adaptation
var width = docEl.getBoundingClientRect().width; var docEl = doc.documentElement; Var rem = width / 24; var rem = width / 24; docEl.style.fontSize = rem + "px";Copy the codeThe grid layout
grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
Copy the codeI’m not used to switching to Flex with REM
Chart should also be updated during resize
Chart.resize is automatically called when the window resize
created() {
let timer = null;
// Can be added to the shake
window.addEventListener(
"resize".() = > {
if (timer) clearTimeout(timer);
timer = setTimeout(() = > {
this.$echarts.init(document.getElementById("bodyChart")).resize(); }},300);
},
false
);
},
Copy the codeOr learn from the above case and mix it with mixins, so the chart should be written in data.
Adaptive strategies adopted by individuals
Divide it into upper and lower blocks, use VH to define the height of left and right, use REM, as in the case, to get clientWidth for resize, then /24, make sure 24rem equals 100% width. I can use 0.2rem padding for the middle three blocks, 0.2 5.8, 12,5.8 and padding
You can also use width: 25%, 50%, 25% you can also use Flex or case grid
Echart basic configuration
var option = {
/ / title
title: {
text: 'First ECharts instance'
},
tooltip: {},/ / prompt dialog box
legend: {// Figure 1
data: ['sales']},xAxis: {// Configure the items to display on the X axis:
data: ["Shirt"."Cardigan"."Chiffon shirt."."Pants"."High heels"."Socks"]},yAxis: {},// Configure the items to display on the Y axis.
series: [{
name:'sales'.// Series name
type: 'bar'.// Series of chart types
tooltip: {// Whether to display a prompt box
show: false,},data: [5.20.36.10.10.20]./ / data}}; bar: {barMinHeight: 0.// Change the minimum height to 0
// barWidth: null, // default adaptive
barGap: '30%'.// The distance between columns, default is 30% of the width of the column, can be fixed value
barCategoryGap : '20%'.// Column distance between categories, default is 20% of category spacing, can be fixed value
itemStyle: {
normal: {
// color: 'different ',
barBorderColor: '#fff'.// Bar edge lines
barBorderRadius: 0.// The column edges are rounded, in px, and the default is 0
barBorderWidth: 1.// The width of the sidebar, in px, defaults to 1
label: {
show: false
// position: default adaptive, horizontal layout is 'top', vertical layout is 'right', optional
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // the global textStyle is used by default. See textStyle}},emphasis: {// Highlight style
// color: 'different ',
barBorderColor: 'rgba (0,0,0,0)'.// Bar edge lines
barBorderRadius: 0.// The column edges are rounded, in px, and the default is 0
barBorderWidth: 1.// The width of the sidebar, in px, defaults to 1
label: {
show: false
// position: default adaptive, horizontal layout is 'top', vertical layout is 'right', optional
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // the global textStyle is used by default. See textStyle}}}},Copy the codeCategory axis configuration
Which is the general column type: “category”,
// Default palette color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700', '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'], #xAxis type = 'category'; #xAxis type = 'category'; Name The name of the coordinate axis is not currently required, inverse inverse boundaryGap White space on both sides of a boundaryGap defaults to true min The minimum value of the scale on a coordinate axis. The category axis doesn't care about this Max coordinate axis scale maximum. TriggerEvent Axis tags respond and trigger mouse events axisLine axis related Settings. Show whether = true display coordinate axis coordinate axis graphics.linestyle xAxis. AxisLine. Graphics.linestyle. Color = '# 333 lines of the color coordinate system. AxisTick axis scale axisLabel Axislabel. color The color of the scale label text; Support callback functions fontStyle fontWeight fontFamily fontSize align text horizontal alignment, muverticalalign text vertical alignment, LineHeight backgroundColor specifies the backgroundColor of the text block. TextBorderColor Stroke color of the text itself rich Inside rich, you can customize the rich text style. With rich text styles, you can make very rich effects in your tags. SplitLine The dividing line of the coordinate axes in the grid area. Data is the data of the category axis. If set, it indicates that it is the category axis. TextStyle has the following tag attributes {color, fontStyle, fontWeight, fontFamily, fontSize, align, verticalAlign, lineHeight, backgroundColor , borderColor , borderWidth , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , rich }Copy the codeHorizontal category axis
Twinkle twinkle
{value:xx, itemStyle: {
normal: {
borderWidth: 1,
shadowBlur: 20,
borderColor: color[i],
shadowColor: color[i],
},
},}
Copy the codeIs an array. The label is array showName
0: Adrenal 1: Head and neck 2: Kidney 3: Eyes 4: Liver 5: LungCopy the codeAxis: Array object Array(6)
0: itemStyle: Object normal: Object borderColor: "#00ffff" borderWidth: 1 shadowBlur: 20 shadowColor: "# 00 FFFF" value: 1 1:2: {__ob__ : the Observer} {__ob__ : the Observer} 3: {__ob__ : the Observer} 4:5: {__ob__ : the Observer} {__ob__ : Observer}Copy the code// Color list
let colorList = [
"#00ffff"."#006ced"."#00cfff"."#ffe000"."#ffa800"."#ff5b00",];// Retrieve the value of the symptoms, and deep-copy dereference for sorting
let arr = JSON.parse(
JSON.stringify(this.$store.state.res? .dataShareSiteList) );function arrayObjSortByKey(array, key) {
return array.sort(function (a, b) {
var x = a[key];
var y = b[key];
return x > y ? -1 : x < y ? 1 : 0;
});
}
// Array objects, sorted by their properties
arrayObjSortByKey(arr, "total");
// Just take the first four largest ones and show them. If the difference between the first one and the others is more than 8 times, leave the others alone
for (let i = 0; i < 6; i++) {
let color = [
"#00ffff"."#006ced"."#00cfff"."#ffe000"."#ffa800"."#ff5b00",
].reverse();
// if(arr[0]&&i! =0&&arr[0].total/arr[i].total>8){
// break;
// }
this.showName.push(arr[i].name);
this.showValue.push({
value: arr[i].total,
// Custom label style, valid only for this data item
// Customize a special itemStyle that is valid only for this item
itemStyle: {
normal: {
borderWidth: 1.shadowBlur: 20.borderColor: color[i],
shadowColor: color[i],
},
},
});
}
let chart2 = this.$echarts.init(
document.getElementById("little-body-chart")); chart2.setOption({grid: [{x: "32%".y: "0%".width: "50%".height: "100%"],},xAxis: [{gridIndex: 0.axisTick: {
show: false,},axisLabel: {
show: false,},splitLine: {
show: false,},axisLine: {
show: false,}},],yAxis: [{data: this.showName.reverse(),
axisTick: {
show: false,},axisLabel: {
show: true.color: "#fff".rich: {
a: {
color: "red".lineHeight: 10,}}},splitLine: {
show: false,},axisLine: {
show: false.lineStyle: {
color: "#6173a3",},},},],series: [{type: "bar".barWidth: "20%".itemStyle: {
normal: {
color: function (params) {
return colorList[params.dataIndex];
},
// color: '#86c9f4'}},data: this.showValue.reverse(),
},
],
});
Copy the codeMap learning
Map: gitee.com/vijtor/vue-…
Explain the above case: www.jb51.net/article/199… www.makeapie.com/explore.htm…
Map drilling:
W3c Map tutorial: www.w3cschool.cn/echarts_tut…
ECharts easy interface for mapping and drilling
www.cnblogs.com/weigaojie/p…
Example.maxiaoqu.com/map-geoJson…
Gitee.com/maxiaoqu/ec…
Map attributes: www.cnblogs.com/zhangxiaoxi…
Take photo website: datav.aliyun.com/tools/atlas…
Take the graph and load
What I want to achieve is Guangdong + Macao and Hong Kong; Download the nationwide JSON file and you can see that each location is an object; So I found the JSON related fields of Macao and Hong Kong in the whole country. Add to the Guangdong JSON file. It is ok
Map can also be loaded without JQ XHR access, use local JSON access, using the require syntax, here thanks to small Dan’s help; I was led to believe that only XHR fetching or JS loading was possible
#vue <script> let guangdongJson = require('./guangdong.json') export default { data() { return { chart:null, }; }, mounted() { this.initMap(); }, methods: { initMap() { var echarts = this.$echarts this.chart = echarts.init(document.getElementById("bottomLeft")); this.chart.hideLoading(); Echarts. RegisterMap (" guangdong ", guangdongJson);Copy the codeMouse over the remove event in the map
Map mouse does not change color: blog.csdn.net/qq_38402878…
Common actionAPI: www.cnblogs.com/sminocence/…
Mouse over remove event:
Blog.csdn.net/qq_36895045… www.cnblogs.com/xtreme/p/13…
this.chart.setOption(option); this.chart.on('mouseover',(params)=>{ console.log(params,params.name) let xiao = document.getElementById('showTip') var evt = params.event; xiao.style.left = evt.offsetX-200+'px'; xiao.style.top = evt.offsetY+'px'; if(params.componentType=='geo'){ xiao.innerHTML = '<div style="background:#fff; border-radius:10px; padding-top:10px; box-shadow:0 0 10px #666">' + '<div style="color:#fff; height:20px; border-radius:6px; font-size:12px; line-height:20px; background-color:#5861a2; text-align:center; margin:0 2px;" >' + params.name + "</div>" + '<div style="text-align:center; color:#494949; padding:8px 6px">' + '<span style="font-size:18px; font-weight:bold;" > '+ "nodes:" + params. Name + "" +" < / span > "+" < / div > "+" < / div > "; } }) this.chart.on('mouseout',function(p){ let xiao = document.getElementById('showTip') xiao.innerHTML = '' });Copy the code- Mouse over category axis label event
Reference: www.jianshu.com/p/5d9e0d664…
This is the Y-axis label, so set it in yAxisyAxis: [{
triggerEvent:true
}],
chart.on('mouseover'.function (params) {
// The tag name is displayed in value
// The column is displayed in name
console.log(params.name||params.value);
});
Copy the code
Simple mapping
Echarts.apache.org/examples/zh… www.makeapie.com/editor.html…
#template
<div @click="changeMap('map')" v-show="nowShow=='map'" id="littleMap" style='width:5rem; height:258px; cursor:pointer'></div>
#mounted
let guangdongJson = require('./guangdong.json') / / put the < script >
let chart = this.$echarts.init(document.getElementById("littleMap"));
chart.hideLoading();
this.$echarts.registerMap("guangdong", guangdongJson);
chart.setOption({
// backgroundColor: "#404a59",
geo: {
map: 'guangdong'.show: true.roam: false.label: {
emphasis: {
show: false}},layoutSize: "100%".itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, 1)".borderWidth: 1.areaColor: {
type: "radial".x: 0.5.y: 0.5.r: 0.8.colorStops: [{offset: 0.color: "rgba(147, 235, 248, 0)".// The color at 0%
},
{
offset: 1.color: "rgba(147, 235, 248, .2)".// Color at 100%},].globalCoord: false.// The default is false
},
shadowColor: "rgba(128, 217, 248, 1)".// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2.shadowOffsetY: 2.shadowBlur: 10,}}},series: [{
type: 'map'.map: 'guangdong'./ / aspectScale: 0.75.
label: {
normal: {
show: false,},emphasis: {
show: false,}},itemStyle: {
normal: {
areaColor: {
x: 0.y: 0.x2: 0.y2: 1.colorStops: [{
offset: 0.color: '# 073684' // The color at 0%
}, {
offset: 1.color: '#061E3D' // Color at 100%}],},borderColor: '# 215495'.borderWidth: 1,},},},]})Copy the codeFlip effect
<NumberCard :countStr="serverCount"></NumberCard>
Copy the code#NumberCard.vue <template> <div class="demo"> <ul class="fp-box"> <! --> <li ref="li" v-for=" I in countstr.tostring ().length" :key=" I "> <! - 10 lines of each column Numbers - > < span v - for = "num in 10:" key = "num" > < span class = "line" > < / span > <! -- {{ num - 1 }} --> <span class="num-wrap">{{ num - 1 }}</span> </span> </li> </ul> </div> </template> <script> export default { props: { countStr: Number, }, data() { return { numberArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // Fix 19 rows of digits in each column numStr: "", // Display the numeric string numArr: [0, 0, 0, 0, 0, 0, 0], 7 digital array / / / / the default display countStr: "", / / needs to display the digital}; }, mounted() { //this.countStr = "1132"; this.initNumCard(); }, watch:{ countStr(){ this.initNumCard() } }, methods: {// Initialize the numcard initNumCard() {this.numstr = this.countstr.tostring (); this.numArr = this.numStr.split(""); let numArrlen = this.numArr.length; $refs.li.forEach((item, index) => {let ty = this.numarr [index]; Item.style. transform = 'translateY(-${ty * 47}px)'; }); ,}}}; </script> <style lang="scss" scoped> .fp-box { display: flex; overflow: hidden; li { width: 30px; height: 47px; flex-direction: column; transition: transform 1s ease-in-out; margin-right: 4px; & > span { text-align: center; font-size: 24px; color: #3de7c9;; display: flex; display: inline-block; width: 30px; height: 47px; line-height: 47px; position: relative; // .line { // display: inline-block; // height: 1px; // background: #001347; // width: 100%; // position: absolute; // left: 0; // top: 23px; // } } } } </style>Copy the codeReference: www.jianshu.com/p/1441dc217…
Bar chart timing switch
<customBottomRightChart :type= this bar chart is a component that changes as soon as the props data I passed in changes"switchName"/>
Copy the code<div> <div id="bottomRightChart" style=" bottom: </div> </div> </template> <script> export default {props:["type"], mounted() {this.draw(); }, watch:{type(vlue){console.log(vlue) this.draw()}}, computed:{}, mixins: [echartMixins], methods: $chart = this.chart (document.getelementById (" bottomchart ")); // Initialize echarts instance this.chart = this.chart (document.getelementById (" bottomchart ")); this.chart.setOption(option1); If (this.type==' upload '){this.chart.setoption (option1); }else if(this.type==' browse '){this.chart.setoption (option2); }else if(this.type==' calculate '){this.chart.setoption (option3); ,}}}}; </script>Copy the code<div id="bottomRight" @mouseover="stopInterval" @mouseout="intervalChart"> <div class="bg-color-black"> <div class="d-flex pt-2 pl-2" style='justify-content:space-between'> <div class="d-flex"> <span style="color:#5cd9e8"> <icon name="chart-area"></icon> </span> <div class="d-flex"> <span Class ="fs-xl text mx-2"> {{total}} </span> </div> </div> <p style='color:grey; Font-size :0.2rem'> <span :class="{active: switchName==' upload '}" style="cursor:pointer; border-right:1px solid white; Padding-right :4px" @click="select(' upload ') > upload </span> <span :class="{active: switchName==' browse '}" style="cursor:pointer; border-right:1px solid white; Padding-right :4px" @click="select(' browse ') > </span> <span :class="{active: SwitchName = = 'calculated'} "style =" cursor: pointer "@ click =" select (' calculated ') "> computing < / span > < / p > < / div > < div > <! - < div style = "margin - top: 0.3 rem; Margin-bottom :0.3rem"> --> <customBottomRightChart :type="switchName"/> </div> </div> </template> <script> import customBottomRightChart from "@/components/echart/bottom/customBottomRightChart"; Export default {data() {return {total:0, switchName:' upload ', interval:null}; }, components: { customBottomRightChart }, mounted() { this.total = this.$store.state.res? .dataShareCount this.intervalChart(); }, methods: {select(name){this.switchName = name; If (this.switchName == 'upload '){this.total = this.$store.state.res? .datasharecount} else if(this.switchName == 'browse '){this.total = this.$store.state.res? .databrowSecount} else if(this.switchName == 'calculate '){this.total = this.$store.state.res? .calculatedatacount}}, stopInterval(){// Clear toggle clearInterval(this.interval); }, Interval = setInterval(()=>{if(this.switchName == 'upload '){this.switchName =' browse '} else If (this.switchName == 'browse '){this.switchName =' calculate '} else if(this.switchname == 'calculate '){this.switchName =' upload '}},2000) }}}; </script>Copy the codeThe default full screen
The full screen can only be triggered by the user, and the automatic full screen set by the program will be blocked
Buttons can be used to prompt the user to click to trigger a full screen
template
<div
style="position: fixed; top: 0%; left: 30%; z-index: 500"
@click="f11"</div> methods:{f11() {
console.log("f11");
function requestFullScreen(element) {
var requestMethod =
element.requestFullScreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject ! = ="undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if(wscript ! = =null) {
wscript.SendKeys("{F11}");
wscript.SendKeys("{F5}"); }}}// Full screen display by default
var elem = document.getElementsByTagName("html") [0]; requestFullScreen(elem); }},Copy the codeI need to refresh the elements to fit the screen, otherwise I need to set the elements one by one to width100, Height100, so I gave up, eh.
Some of the problems I encountered
- I encountered the situation that I could not find resources after the backend students helped me to pack the server
Change history to hash
- Since webpack is not used to generate HTML, the title is package.json’s name, which cannot be changed into Chinese
At this point, change the title in the HTML generated by packaging