❤️ Data visualization ❤️: Large screen example based on Echarts + Vue [15]

  ❤️ Series articles ❤️

https://blog.csdn.net/lildkdkdkjf/article/details/120705616

In recent years, the emergence of data visualization big screen has set off a wave after wave. Many business owners want to build their own "cool hanging and exploding sky" domineering president big screen cockpit. Today, I share with you the world population statistics  - Data visualization big screen solution].

Don't say much, start sharing dry goods, welcome to discuss! QQ wechat same No.: 6550523

❤️ Effect display ❤️

1. First look at the dynamic rendering  

2. Fragment screenshot   

I   Determine the demand scheme

1. Determine the screen LED resolution for product online deployment

1920px*1080px, F11 full screen without scroll bar; Support 100% filling of the same scale screen. The proportion will be calculated automatically, the filling will be centered, and the insufficient part will be left blank.

2. Function module

  • Total population (100 million)

  • 2021 Chinese born population

  • Education level

  • Aging population analysis

  • Proportion of labor output

  • Average annual population transformation rate

  • Population sub-health distribution

3. Deployment mode  

  • Based on installation free executable program: support various mainstream operating systems such as Windows, Linux and Mac; No other environmental dependence is required;
  • Viewing mode: it can not only directly view the program interface on the server, but also open and play remotely using the browser. It supports mainstream browsers such as Chrome browser and 360 browser.

2, Overall architecture design

Echarts chart

Direct entry   Modify the file under components / to the charts you want. You can check the cases on the official website of ecars.

Render chart

  ECharts charts are   src/components/datav/index.vue   The dynamic rendering chart case created by the encapsulation component is   components   Various chart components under the directory have monitored data and screen changes, and can dynamically render chart data and size. In the module with small and large monitoring window, anti shake function is used to control the update frequency and save browser performance.

Border style

The border is a component of DataV. You only need to go to the views directory to find the corresponding location to find and replace it.

3, Coding implementation (based on length and readability, some key codes are shown here)

<template>
  <div class="left-chart-1">
    <div class="lc1-header">[2021 Chinese born population]</div>
    <div class="lc1-details">Total births<span>1000W</span></div>
    <dv-capsule-chart class="lc1-chart" :config="config" />
    <dv-decoration-2 style="height:10px;" />
  </div>
</template>

<script>
export default {
  name: 'LeftChart1',
  data () {
    return {
      config: {
        data: [
          {
            name: 'boy',
            value: 2000
          },
          {
            name: 'girl',
            value: 3000
          },
          {
            name: 'twin boys ',
            value: 1500
          },
          {
            name: 'Twin girl',
            value: 1500
          },
          {
            name: 'Twin boys and girls',
            value: 2000
          }
        ],
        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        unit: 'number'
      }
    }
  }
}
</script>

<style lang="less">
.left-chart-1 {
  width: 100%;
  height: 30%;
  display: flex;
  flex-grow: 0;
  flex-direction: column;

  .lc1-header {
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    text-indent: 20px;
    color: #096dd9;
  }

  .lc1-details {
    height: 50px;
    font-size: 16px;
    display: flex;
    align-items: center;
    text-indent: 20px;

    span {
      color: #08e5ff;
      font-weight: bold;
      font-size: 35px;
      margin-left: 20px;
    }
  }

  .lc1-chart {
    flex: 1;
  }
}
</style>
<template>
  <div class="left-chart-2">
    <div class="lc2-header">[Education level]</div>
    <div class="lc2-details">Total number of general higher education<span>245W</span></div>
    <dv-charts class="lc2-chart" :option="option" />
    <dv-decoration-2 style="height:10px;" />
  </div>
</template>

<script>
export default {
  name: 'LeftChart2',
  data () {
    return {
      option: {
        series: [
          {
            type: 'pie',
            data: [
              { name: 'Primary school culture', value: 93 },
              { name: 'Junior high school culture', value: 32 },
              { name: 'High school culture', value: 65 },
              { name: 'University Culture', value: 44 },
              { name: 'Graduate culture', value: 44 },
              { name: 'other', value: 52 }
            ],
            colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
            radius: ['45%', '65%'],
            insideLabel: {
              show: false
            },
            outsideLabel: {
              labelLineEndLength: 10,
              formatter: '{percent}%\n{name}',
              style: {
                fontSize: 14,
                fill: '#fff'
              }
            }
          }
        ]
      }
    }
  }
}
</script>

<style lang="less">
.left-chart-2 {
  width: 100%;
  height: 37%;
  display: flex;
  flex-direction: column;

  .lc2-header {
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    text-indent: 20px;
    margin-top: 30px;
    color: #096dd9;
  }

  .lc2-details {
    height: 40px;
    font-size: 16px;
    display: flex;
    align-items: center;
    text-indent: 20px;

    span {
      color: #08e5ff;
      font-weight: bold;
      font-size: 35px;
      margin-left: 20px;
    }
  }

  .lc2-chart {
    height: calc(~"100% - 80px");
  }
}
</style>

4, Online operation

Start project

It needs to be installed in advance   nodejs   And   Yarn, download the project and run it in the project home directory   yarn   Pull dependent packages. After installing the dependent package, use   vue-cli   Or directly use the command npm run serve to start the project. After starting the project, you need to manually full screen (press F11).

5, Source download

This sharing is over, welcome to discuss! Thanks for Vue big screen and datav!

❤️ Series articles ❤️

https://blog.csdn.net/lildkdkdkjf/article/details/120705616

Tags: Vue css echarts

Posted on Tue, 12 Oct 2021 02:03:53 -0400 by phphead