ECharts Chart Drawing (Vue based)

www.echartsjs.com/index.html/x axis and y axis of the font changes, the official documentation doesn’t seem to take effect, this will only take effect

    xAxis : [
        {
            type : 'category'.data : ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun'].axisTick: {
                alignWithLabel: true
            },
            axisLabel: {textStyle: {fontSize:64.color:'red'}}}].Copy the code

As for the display of 100% data, it must be a percentage. At present, I do not know how to convert the data into a percentage, so I can only deal with the data by percentage first

    series : [
        {
            name:'Direct access'.type:'bar'.barWidth: '60%'.label: {
                normal: {
                  show: true.position: "top".fontSize: 22.color: "#fe8b1e".formatter: "{c}%"} data:[20.20.20.20.20]}]Copy the code

About the view window update but the chart is not updated

<div id="dataHistogram"></div>
Copy the code
// Get the chart element in the DOM
this.myChart = echarts.init(
    document.getElementById("dataHistogram"));/ / use this. MyChart. The resize ();
this.myChart.resize();
Copy the code

Screenshot and save as image file (HTML2Canvas plug-in)

    // Get the screenshot area
     function html2canvas(document.getElementById("xxxx").get.{
        backgroundColor: null.useCORS: true
      }).then(canvas= > {
        let dataURL = canvas.toDataURL("image/png");
        let formObj = new FormData();
        formObj.append("uploadFile".this.base64ToBlob(dataURL));
      });
    // Perform the conversion
   function base64ToBlob(urlData) {
      var arr = urlData.split(",");
      var mime = arr[0].match(/ : (. *?) ; /) [1] | |"image/png";
      // Remove the url header and convert it to byte
      var bytes = window.atob(arr[1]);
      // Handle exceptions to convert ASCII codes less than 0 to greater than 0
      var ab = new ArrayBuffer(bytes.length);
      // Generate view (directly for memory) : 8-bit unsigned integer, length 1 byte
      var ia = new Uint8Array(ab);
      for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      console.log(new Blob([ab], { type: mime }));
      return new Blob([ab], {
        type: mime
      });
    }
Copy the code

Canvas dynamic particle Background (Vue plugin)

Vue-particles.netlify.com/ Forget the screenshot effect can go to the official website to see

npm install vue-particles --save-dev
Copy the code
import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
Copy the code
<template> 
  <p id="app">
   <vue-particles
    color="#dedede"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#dedede"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >
   </vue-particles>
  </p>
 </template>
Copy the code
The name of the The base type The default value instructions
color Type String The default ‘# dedede’ Particle color.
particleOpacity The Number type The default 0.7 Particle transparency
particlesNumber The Number type The default is 80 Number of particles
shapeType Type String The default ‘circle’ Available particle appearance types are: “Circle “,” Edge “,”triangle”,” Polygon “,” Star”
particleSize The type Number. The default is 80 Single particle size
linesColor Type String The default ‘# dedede’ Line color
linesWidth The Number type The default 1 Line width
lineLinked Boolean type The default true Whether the connection cable is available
lineOpacity The Number type The default 0.4 Line transparency
linesDistance The Number type The default is 150 Line distance
moveSpeed The Number type The default 3 Particle velocity
hoverEffect Boolean type The default true Whether there are Hover effects
hoverMode Type String The default true Hover modes available include: “grab”, “repulse”, “bubble”
clickEffect Boolean type The default true Is there a click effect
clickMode Type String The default true Available click modes are: “push”, “remove”, “rePulse “, “bubble”

If you want to add a component to the canvas, you need to position the component absolutely

<template>
  <div id="app" class="wrap-banner">
    <div >
        <! -- <logo class="control"></logo> -->
        <loginform class="control"></loginform>
    </div>
    <vue-particles
      class="sky"
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>
  </div>
</template>
Copy the code
<script>
import logo from '.. /components/logo.vue'
import loginform from '.. /components/loginform.vue'
export default{
  data() {return{
    }
  },
  components:{
    logo,loginform
  }
}
</script>
Copy the code
<style lang="scss"scoped> .control{ height: 320px; position: absolute; left: 60%; top: 30%; border-radius: 2em; } // Set properties to modify the canvas background#particles-js{
   // background-color: # 000000;
   background-image: url('.. /assets/bk5.jpg'); background-repeat: no-repeat; background-size: 100%; } .sky{ position: relative; top: 0; width: 100%; height: 100%; z-index: -1; }. Wrap-banner {display: flex; } </style>Copy the code

If you have any questions please answer them if I can or point out any mistakes in the article thank you