Because it is the end of the year, many project teams have started to make year-end reports, and the most common form of year-end reports is Kanban.

The style is beautiful, and it can be placed on a TV or a large screen, and displayed in the form of a chart, which is simple, clear, and easy to understand.

Directly on the final rendering: it is a kanban displaying customer volume/churn rate/order status/efficiency, etc.

The charts in the Kanban above are all implemented with echarts.

The area chart + histogram in this figure is realized by using echarts.

The page imports the echarts file

 <script src="../script/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="../script/echarts.min.js"></script>
    <script
      type="text/javascript"
      src="../script/echarts-liquidfill.min.js"
    ></script>

The above three files can be searched from the Internet and saved locally. Try not to quote the online address directly, otherwise when there is a problem with the network speed, the page will report an error.

In order to realize the full display of Kanban styles with different resolutions, you need to introduce the following adaptive js file.

<script src="../script/common.js"></script>

common.js——Functions that adapt to browsers with different resolutions

$(function () {
  screenSize('.pageBody');
});
function screenSize(editorDom) {
  let screenWidth = $(window).width();
  let screenHeight = $(window).height();
  let defWidth = 1920;
  let defHeight = 1080;
  let xScale = screenWidth / defWidth;
  let yScale = screenHeight / defHeight;
  $(editorDom).css('transform', 'scale(' + xScale + ', ' + yScale + ')');
  $(window).resize(function () {
    let screenWidth = $(window).width();
    let screenHeight = $(window).height();
    xScale = screenWidth / defWidth;
    yScale = screenHeight / defHeight;
    $(editorDom).css('transform', 'scale(' + xScale + ', ' + yScale + ')');
  });
}

Adaptive rendering of browsers with different resolutions 1:

Adaptive rendering of browsers with different resolutions 2:

Note: To achieve the above adaptive effect, you need to add the class name of pageBody to the outer dom.

Public encapsulation function of echarts rendering chart

At this point, the chart rendering function can be encapsulated:

The following function is the way to render area chart/line chart/histogram.
The input parameters are as follows:

1.dom: is what needs to be rendered dom element, which can be unique by specifying id in the form of dom
2.xAxis: x The display data of the axis, the format is an array, an array in the form of a string or a number.
3.series: This is the focus of the chart display, specifically the line chart.histogram/The data of the area chart is ready. At this time, you can pass in an array or an object. inside type You can specify the style type
4.color: specify different series The style color in is an array. Of course also in series Customize the color of the current type in .
5.nameArr: if y If the axis needs to specify the unit or other remarks, you can add this parameter, and the format is an array.

function renderBar(dom, xAxis, series, color, nameArr) {
  var option = {
    color: color,
    legend: {
      left: 'right',
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      x: 60,
      x2: 40,
      y: 60,
      y2: 30,
    },
    xAxis: {
      type: 'category',
      data: xAxis,
      axisLabel: {
        textStyle: {
          color: '#666666',
        },
      },
    },
    yAxis: [
      {
        name: nameArr[0],
        nameTextStyle: {
          color: '#fff',
        },
        max: nameArr[0] && nameArr[0].indexOf('percentage') > -1 ? 100 : null,
        axisLabel: {
          textStyle: {
            color: '#fff',
          },
          formatter: (c) => {
            if (nameArr[0] && nameArr[0].indexOf('percentage') > -1) {
              return c + '%';
            } else {
              return c;
            }
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: '#333',
          },
        },
      },
      {
        name: nameArr[1],
        nameTextStyle: {
          color: '#fff',
        },
        axisLabel: {
          textStyle: {
            color: '#666666',
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: series,
  };
  option && dom.setOption(option);
}

html code

<div class="boxWrap">
  <div class="box_tit">Customer repurchase rate/Churn rate</div>
  <div class="barCls" id="barId1"></div>
</div>

css code

.boxWrap{
    width:100%;
    border: 1px solid #555555;
    box-shadow: 0px 60px 60px 0px #2d2826 inset; 
    margin-bottom:20px;
    box-sizing: border-box;
    height:300px;
}
.box_tit{
    color:#f89d19;
    position: relative;
    font-size:24px;
    padding-left:20px;
    line-height: 24px;
    font-weight: bold;
    margin:20px 0;
}
.box_tit::before{
    content:'';
    display: block;
    position: absolute;
    left:0;
    top:0;
    width: 4px;
    height: 24px;
    background: #f89d19;
}
.barCls{
    width:100%;
    height:230px;
}

js code - the method of using the rendering function - the method of using the area chart

The renderings are as follows:

var chartDom1 = document.getElementById('barId1');
var myChart1 = echarts.init(chartDom1);
let xAxis1 = ['2022-08','2022-09','2022-10','2022-11','2022-12'];
let yAxis1 = [20，10，40，50，80，15];
renderBar(
  myChart1,
  xAxis1,
  [
    {
      name: 'Repurchase rate',
      type: 'line',//Chart type: line is a line chart
      data: yAxis1,//The data in the chart must correspond one-to-one with the x-axis of xAsix
      symbolSize: 10,//The size of the inflection point of the polyline
      itemStyle: {//The style of the inflection point of the polyline
        normal: {
          borderColor: '#f90', // Border color of inflection point of polyline
          borderWidth: 2,//The border width of the inflection point of the polyline
          lineStyle: {//The style of the polyline, you can change the width, color, etc. of the polyline
            width: 3, // The line of 0.1 is very thin,
            color: '#f90',
          },
          label: {//text style
            show: true, //turn on display
            position: 'top',//The position of text placement: top top bottom: bottom, left: left, right: right, etc., and center: placed in the middle
            formatter: '{c}%',//Since I want to display the percentage here, the value given is the value multiplied by 100, so I need to add a % to display it through the formatter customization
            textStyle: {//Text style: you can set the color, font size, font weight and other effects
              color: '#fff',
              fontSize: 16,
            },
          },
        },
      },
      areaStyle: {//Set the color of the area chart, through new echarts.graphic.LinearGradient(0,0,0,1,[xxx]);
      	//You can set the area chart with gradient color, the orientation of the gradient color of the area chart, and the initial color of the area chart, etc.
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#f90' },
          { offset: 0.2, color: '#f90' },
          { offset: 1, color: 'transparent' },
        ]),
      },
    },
    {
      name: 'Churn rate',
      type: 'line',
      symbolSize: 10,
      data: yAxis2,
      itemStyle: {
        normal: {
          borderColor: '#227bff',
          borderWidth: 2,
          lineStyle: {
            width: 3, // The line of 0.1 is very thin,
            color: '#4992FF',
          },
          label: {
            show: true, //turn on display
            position: 'top',
            formatter: '{c}%',
            textStyle: {
              color: '#fff',
              fontSize: 16,
            },
          },
        },
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#4992FF' },
          { offset: 0.2, color: '#4992FF' },
          { offset: 1, color: 'transparent' },
        ]),
      },
    },
  ],
  '',
  ['Unit: Percentage', '']
);

js code - the method of using the rendering function - the method of using the histogram

The renderings are as follows:

var chartDom6 = document.getElementById('barId6');
var myChart6 = echarts.init(chartDom6);
let xAxis6 = ['2022-08','2022-09','2022-10','2022-11','2022-12'];
let yAxis61 = [20，10，40，50，80，15];
let yAxis62 = [120，100，40，25，80，105];
renderBar(
  myChart6,
  xAxis6,
  [
    {
      name: 'sheet metal',
      type: 'bar',//Chart style set to histogram
      // stack: 1,
      barWidth: 20,//Width of histogram 20
      data: yAxis61,//The data set by series
      itemStyle: {
        normal: {/Set the color of the histogram, via new echarts.graphic.LinearGradient(0,0,0,1,[xxx]);
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#f90' },
            { offset: 0.2, color: '#f90' },
            { offset: 1, color: 'transparent' },
          ]),
          label: {
            show: true, //turn on display
            position: 'top',
            textStyle: {
              color: '#fff',
              fontSize: 16,
            },
          },
        },
      },
    },
    {
      name: 'CNC',
      type: 'bar',
      // stack: 1,
      barWidth: 20,
      data: yAxis62,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#4992FF' },
            { offset: 0.2, color: '#4992FF' },
            { offset: 1, color: 'transparent' },
          ]),
          label: {
            show: true, //turn on display
            position: 'top',
            textStyle: {
              color: '#fff',
              fontSize: 16,
            },
          },
        },
      },
    },
  ],
  '',
  ['unit: PCS']
);

Finish! ! ! A lot of accumulation, a lot of harvest! ! !