Ecarts Study Guide for data visualization

Introduction to visual panel

In response to the current trend of data visualization, more and more enterprises need to use visual charts to display and reflect the data in many scenarios (marketing data, production data and user data), so as to make the data more intuitive and highlight the data characteristics.

01 - using technology

The following knowledge is required to complete the project:

  • div + css layout
  • flex layout
  • Less
  • Native js + jquery usage
  • rem adaptation
  • echarts Foundation

02 case adaptation scheme

  • The design draft is 1920px

    1. flexible.js divides the screen into 24 equal parts

    2. The benchmark value of the cssrem plug-in is 80px

      Plug in - configure button - configure extension settings - set in Root Font Size.

      But don't forget to restart the vscode software to ensure that it takes effect

03 - Basic Setting

  • body set the background image, zoom to 100%, and the row height is 1.15
  • css initialization

04 header layout

  • The height is 100px
  • Background image, displayed in the container
  • Zoom to 100%
  • h1 the title part is white and 38 pixels are displayed in the middle, and the row height is 80 pixels
  • The right of the time module showTime is 30px, the line height is 75px, the text color is rgba(255, 255, 255, 0.7) and the text size is 20 pixels
// Format: current time: 17-0:54:14, March 2020
<script>
            var t = null;
            t = setTimeout(time, 1000);//Start running
            function time() {
                clearTimeout(t);//Clear timer
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();//When getting
                var m = dt.getMinutes();//Get points
                var s = dt.getSeconds();//Get seconds
                document.querySelector(".showTime").innerHTML = 'Current time:' + y + "year" + mt + "month" + day + "-" + h + "Time" + m + "branch" + s + "second";
                t = setTimeout(time, 1000); //Set the timer and run the cycle     
            }
 </script>
  • css style of header part
header {
  position: relative;
  height: 1.25rem;
  background: url(../images/head_bg.png) no-repeat top center;
  background-size: 100% 100%;
  h1 {
    font-size: 0.475rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
  }
  .showTime {
    position: absolute;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    font-size: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
  }
}

05 mainbox main module

  • You need an inner margin of 10px on the left and right

  • The column container is divided into three columns, accounting for 3:5:3

css Style:

.mainbox {
  padding: 0.125rem 0.125rem 0;
  display: flex;
  .column {
    flex: 3;
  }
  &:nth-child(2) {
    flex: 5;
  }
}

06 - common panel module panel

  • The height is 310px
  • 1px solid rgba(25, 186, 139, 0.17) border of 1 pixel
  • There is a line Jpg background picture
  • padding is about 0 at the top, 15px at the bottom and 40px at the bottom
  • The bottom outer margin is 15px
  • Use the panel box before and after to make the upper two corners with the size of 10px and the line with the size of 2px solid #02a6b5
  • Add a new box before and after to make the two corners on the lower side with a width and height of 10px
.panel {
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../images/line\(1\).png);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
  .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }
}

07 column bar module (layout)

  • The height of the title module h2 is 48px, the text color is white, and the text size is 20px

  • Icon content module chart height 240px

  • The above can be used as the public style part of the panel

  h2 {
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
  }
  .chart {
    height: 3rem;
    background-color: pink;
  }

08 - middle layout

  • Above is the no digital module
  • The following is the map module
  1. The digital module no has a background color rgba(101, 132, 226, 0.1); There is an inner margin of 15 pixels
  2. Note that the middle column has an outer margin of about 10px and 15px below
  3. The no module is divided up and down, with numbers (no HD) above and related text descriptions (no BD) below
  4. The no HD digital module has a frame 1px solid rgba(25, 186, 139, 0.17)
  5. The no HD digital module is divided into two small li. The height of each small li is 80px, the text size is 70px, the color is #ffeb7b, and the font is the icon font electronicFont
  6. No HD uses after and before to make two small corners, with frame 2px solid #02a6b5 width of 30px and height of 10px
  7. The small vertical line can be 1px wide if the first small li after is given, and the background color is rgba(255, 255, 255, 0.2); 50% top 25% height
  8. There are also two small li in no BD. the height is 40px, the text color is rgba(255, 255, 255, 0.7), the text size is 18px, and the upper and inner margins are 10px
/* Declaration font*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}

Map module production:

  1. The height of the map module is 810px, which contains four boxes chart module sphere box rotation 1 rotation 2
  2. The size of the sphere picture module map1 is 518px. The background picture should be added because it needs to be scaled 100% and positioned to the most central transparency. 3
  3. Rotate 1 map 2 with a size of 643px. Add a background picture because it needs to be scaled to 100% and positioned to the central transparency. 6 do a rotation animation and press the sphere with z-index
  4. Rotate 2 map3 with a size of 566px. Add a background picture because you want to zoom 100% and position it in the center. Note that the rotation animation is counterclockwise
 <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>125811</li>
                        <li>104563</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>Front end demand</li>
                        <li>Market supply</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="chart"></div>
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
            </div>

Middle style

/* Declaration font*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
  .no-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    &::before {
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      top: 0;
      left: 0;
    }
    &::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      right: 0;
      bottom: 0;
    }
    ul {
      display: flex;
      li {
        position: relative;
        flex: 1;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.875rem;
        color: #ffeb7b;
        padding: 0.05rem 0;
        font-family: electronicFont;
        font-weight: bold;
        &:first-child::after {
          content: "";
          position: absolute;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
          right: 0;
          top: 25%;
        }
      }
    }
  }
  .no-bd ul {
    display: flex;
    li {
      flex: 1;
      height: 0.5rem;
      line-height: 0.5rem;
      text-align: center;
      font-size: 0.225rem;
      color: rgba(255, 255, 255, 0.7);
      padding-top: 0.125rem;
    }
  }
}
.map {
  position: relative;
  height: 10.125rem;
  .chart {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 10.125rem;
    width: 100%;
  }
  .map1,
  .map2,
  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.475rem;
    height: 6.475rem;
    background: url(../images/map.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
  }
  .map2 {
    width: 8.0375rem;
    height: 8.0375rem;
    background-image: url(../images/lbx.png);
    opacity: 0.6;
    animation: rotate 15s linear infinite;
    z-index: 2;
  }
  .map3 {
    width: 7.075rem;
    height: 7.075rem;
    background-image: url(../images/jt.png);
    animation: rotate1 10s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes rotate1 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}

09 echarts introduction

Common data visualization libraries:

  • D3.js Javascript visual tool library with the highest evaluation on the Web at present (difficult to start)
  • ECharts.js Baidu produced an open source Javascript data visualization library
  • Highcharts.js foreign front-end data visualization library, non-commercial and free, is used by many large foreign companies
  • AntV ant financial service's new generation of data visualization solutions, etc
  • Highcharts and Echarts are like the relationship between Office and WPS

ECharts, an open-source visualization library implemented by JavaScript, can run smoothly on PC and mobile devices. It is compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.), and the underlying layer depends on vector graphics library ZRender , provide intuitive, interactive and highly personalized data visualization charts.

vernacular:

Official website address: https://www.echartsjs.com/zh/index.html

10 echarts experience

Official course: [five minutes to start echarts]( https://www.echartsjs.com/zh/tutorial.html#5 Minutes (ECharts)

  • Download echorts https://github.com/apache/incubator-echarts/tree/4.5.0

Use steps:

  1. Introduce the ecarts plug-in file into the html page
  2. Prepare a DOM container of size
<div id="main" style="width: 600px;height:400px;"></div>
  1. Initialize the ecarts instance object
var myChart = echarts.init(document.getElementById('main'));
  1. Specify configuration items and data (options)
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
  1. Set the configuration item to the ecarts instance object
myChart.setOption(option);

11 echarts basic configuration

This requires students to know the main functions of the following configuration modules

Main configurations to understand: series xAxis yAxis grid tooltip title legend color

  • series

    • List of series. Each series determines its own chart type by type
    • Vernacular: icon data, specify what type of icon, and multiple charts can overlap.
  • xAxis: the x-axis in the rectangular coordinate system grid

    • boundaryGap: the blank strategy on both sides of the coordinate axis is true. At this time, the scale is only used as a separation line, and the label and data point will be in the middle of the band between the two scales.
  • yAxis: y axis in rectangular coordinate system grid

  • Grid: drawing grid in rectangular coordinate system.

  • title: title Component

  • tooltip: prompt box component

  • legend: legend component

  • Color: palette color list

    Data stacking: after the series on the same category axis are configured with the same stack value, the values of the next series will be added to the values of the previous series.

option = {
    // Color sets the color of our lines. Note that there is an array behind it
    color: ['pink', 'red', 'green', 'skyblue'],
    // Set the title of the chart
    title: {
        text: 'Line chart stack 123'
    },
    // Prompt box component of chart 
    tooltip: {
        // Trigger mode
        trigger: 'axis'
    },
    // Legend components
    legend: {
       // If there is a name value in series, the data in legend can be deleted
    },
    // Grid configuration grid can control the size of line chart and bar chart
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        // Whether to display the scale label. If it is true, it will be displayed; otherwise, it is vice versa
        containLabel: true
    },
    // Toolbox components can be saved as pictures and other functions
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    // Set the relevant configuration of the x-axis
    xAxis: {
        type: 'category',
        // Is there a gap between our lines and coordinate axes
        boundaryGap: false,
        data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
     // Set the relevant configuration of y-axis
    yAxis: {
        type: 'value'
    },
    // Series chart configuration, which determines which type of chart to display
    series: [
        {
            name: 'Mail marketing',
            type: 'line',
           
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: 'Alliance advertising',
            type: 'line',

            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'Video advertising',
            type: 'line',
          
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: 'Direct access',
            type: 'line',
          
            data: [320, 332, 301, 334, 390, 330, 320]
        }
    ]
};

12 - histogram chart (two steps)

  • Find similar examples on the official website, analyze them appropriately, and introduce them into HTML pages
  • Customize charts according to requirements
  1. Import into html page
// Histogram 1 module
(function() {
  // Instantiate object
  let myChart = echarts.init(document.querySelector(".bar .chart"));
  // Specify configuration and data
  let option = {
    color: ["#3398DB"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // Axis indicator, axis trigger active
        type: "shadow" // The default is straight line, and the options are: 'line' | 'shadow'
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      {
        name: "Direct access",
        type: "bar",
        barWidth: "60%",
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };

  // Configure to instance object
  myChart.setOption(option);
})();
  1. Customized according to demand

    • Modify chart column color #2f89cf

    • Change the chart size from top to 10px and bottom to 4% grid to determine the size of our histogram

    color: ["#2f89cf"],
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    
    • X-axis related settings xAxis
      • The text color is set to RGBA (255255255,. 6) and the font size is 12px
      • The style of the X axis is not displayed
    // Sets the x-axis label text style
    

//Text color and size of x axis
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
//The x-axis style is not displayed
axisLine: {
show: false
//If you want to set a separate line style
// lineStyle: {
// color: "rgba(255,255,255,.1)",
// width: 1,
// type: "solid"
}
}

- Y Axis related customization
  - Set text color to   rgba(255,255,255,.6)   Font size is 12 px
  - Y Change the grid line bar style to 1 pixel  rgba(255,255,255,.1) frame
  - The color of the separator line is modified to 1 pixel  rgba(255,255,255,.1)   

~~~JavaScript
// y-axis text label style
axisLabel: {
      color: "rgba(255,255,255,.6)",
       fontSize: "12"
},
 // y-axis line style
 axisLine: {
      lineStyle: {
         color: "rgba(255,255,255,.1)",
         // width: 1,
         // type: "solid"
      }
5232},
 // y-axis separator line style
splitLine: {
    lineStyle: {
       color: "rgba(255,255,255,.1)"
     }
}
  • Change the column shape to fillet and the column width in series
series: [
      {
        name: "Direct access",
        type: "bar",
        // Modify column width
        barWidth: "35%",
        data: [10, 52, 200, 334, 390, 330, 220],
        itemStyle: {
          // Modify column fillets
          barBorderRadius: 5
        }
      }
    ]
  };
  • Replace corresponding data
// Replace data in x-axis
 data: [ "Tourism industry","Education and training", "Game industry", "Medical industry", "E-commerce industry", "Social industry", "Financial industry" ],
// series replacement data
 data: [200, 300, 300, 900, 1500, 1200, 600]
  • Let the chart follow the screen adaptively
  window.addEventListener("resize", function() {
    myChart.resize();
  });

13 - bar chart 2 customization

  • Find similar examples on the official website, analyze them appropriately, and introduce them into HTML pages
  • Customize charts according to requirements

Requirement 1: modify the graph size grid

  // Icon location
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%"
    },

Requirement 2: x-axis is not displayed

   xAxis: {
      show: false
    },

Demand 3: y-axis related customization

  • The y-axis and associated scale are not displayed
//Do not display y-axis lines
axisLine: {
    show: false
        },
// Do not display scale
axisTick: {
   show: false
},
  • The color of the y-axis text is set to white
   axisLabel: {
          color: "#fff"
   },

Requirement 4: modify the relevant styles of the first group of columns (strip)

name: "strip",
// Distance between columns
barCategoryGap: 50,
//Width of column
barWidth: 10,
// Set column to fillet
itemStyle: {
    normal: {
      barBorderRadius: 20,       
    }
},
  • Set the percentage display data in the first group of columns
// Text labels on graphics
label: {
    normal: {
         show: true,
         // Display in graphics
         position: "inside",
         // Display format of text
         formatter: "{c}%"
     }
},
  • Set different colors for the first set of columns
// Declare color array
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 2. Set a return value function for the color attribute in itemStyle
  itemStyle: {
          normal: {
            barBorderRadius: 20,  
            // params sends in the column object
            console.log(params);
            // dataIndex is the index number of the current column
            return myColor[params.dataIndex];
          }
         
},

Requirement 5: modify the relevant configuration of the second group of columns (frame)

  	    name: "frame",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,
        itemStyle: {
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15
        },
        data: [19325, 23438, 31000, 121594, 134141, 681807]
      }

Requirement 6: add a second set of data to the y-axis

yAxis: [
      {
      type: "category",
      data: ["Indonesia", "U.S.A", "India", "China", "World population(ten thousand)"],
      // Lines that do not display the y axis
      axisLine: {
        show: false
      },
      // Do not display scale
      axisTick: {
        show: false
      },
      // Set the text color inside the scale label to white
      axisLabel: {
        color: "#fff"
      }
    },
      {
        show: true,
        data: [702, 350, 610, 793, 664],
           // Lines that do not display the y axis
      axisLine: {
        show: false
      },
      // Do not display scale
      axisTick: {
        show: false
      },
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: "#fff"
          }
        }
      }
    ],

Requirement 7: set up two groups of column stacking and replacement data

// Add to the first object in the series 
yAxisIndex: 0,
// Add to the second object of series 
yAxisIndex: 1,
// data in the first object of series
data: [70, 34, 60, 78, 69],
// data in the second object of series
data: [100, 100, 100, 100, 100],
// y-axis replacement first object replacement data
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
// y-axis replacement second object replacement data
data:[702, 350, 610, 793, 664],

Full code:

// Histogram 2
(function() {
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  // 1. Instantiate object
  var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  // 2. Specify configuration and data
  var option = {
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%"
      // containLabel: true
    },
    // Information about the x-axis is not displayed
    xAxis: {
      show: false
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
        // Lines that do not display the y axis
        axisLine: {
          show: false
        },
        // Do not display scale
        axisTick: {
          show: false
        },
        // Set the text color inside the scale label to white
        axisLabel: {
          color: "#fff"
        }
      },
      {
        data: [702, 350, 610, 793, 664],
        inverse: true,
        // Lines that do not display the y axis
        axisLine: {
          show: false
        },
        // Do not display scale
        axisTick: {
          show: false
        },
        // Set the text color inside the scale label to white
        axisLabel: {
          color: "#fff"
        }
      }
    ],
    series: [
      {
        name: "strip",
        type: "bar",
        data: [70, 34, 60, 78, 69],
        yAxisIndex: 0,
        // Modify the fillet of the first set of columns
        itemStyle: {
          barBorderRadius: 20,
          // At this time, you can change the color of the column
          color: function(params) {
            // params sends in the column object
            console.log(params);
            // dataIndex is the index number of the current column
            return myColor[params.dataIndex];
          }
        },
        // Distance between columns
        barCategoryGap: 50,
        //Width of column
        barWidth: 10,
        // Displays the text within the column
        label: {
          show: true,
          position: "inside",
          // {c} It will be automatically parsed into the data in data
          formatter: "{c}%"
        }
      },
      {
        name: "frame",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,
        yAxisIndex: 1,
        data: [100, 100, 100, 100, 100],
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15
        }
      }
    ]
  };

  // 3. Configure to instance object
  myChart.setOption(option);
})();

14 - line chart 1 personnel change module production

  • Find similar examples on the official website, analyze them appropriately, and introduce them into HTML pages
  • Customize charts according to requirements

Requirement 1: modify the size of the line chart, display the border, set the color: #012f4a, and display the scale label.

    // Set grid style
    grid: { 
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,// Show border
      borderColor: '#012f4a ', / / border color
      containLabel: true // Including scale text
    },

Requirement 2: modify the text color #4c9bfd in the legend component, and the right from the right is 10%

 // Legend components
    legend: {
      textStyle: {
        color: '#4c9bfd '/ / legend text color
      },
      right: '10%' // 10% to the right
    },

Requirement 3: x-axis related configuration

  • Scale removal
  • x axis scale label font color: #4c9bfd
  • Eliminate x axis color (use Y axis split line in the future)
  • The two ends of the shaft do not need inner spacing boundaryGap
    xAxis: {
      type: 'category',
      data: ["Monday", "Tuesday"],
	  axisTick: {
         show: false // Remove tick marks
       },
       axisLabel: {
         color: '#4c9bfd '/ / text color
       },
       axisLine: {
         show: false // Remove axis
       },
       boundaryGap: false  // Remove the spacing in the shaft
    },

Requirement 4: customization of y-axis

  • Scale removal
  • Font color: #4c9bfd
  • Split line color: #012f4a
    yAxis: {
      type: 'value',
      axisTick: {
        show: false  // Remove scale
      },
      axisLabel: {
        color: '#4c9bfd '/ / text color
      },
      splitLine: {
        lineStyle: {
          color: '#012f4a '/ / split line color
        }
      }
    },

Requirement 5: customization of two linear graphs

  • Color: #00f2f1 #ed3f35
  • Modify the polyline as smooth, and add smooth to the series data as true
    color: ['#00f2f1', '#ed3f35'],
	series: [{
      name:'New fans',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      // The polyline is modified to be smooth
      smooth: true,
      },{
      name:'New tourists',
      data: [100, 331, 200, 123, 233, 543, 400],
      type: 'line',
      smooth: true,
    }]

Requirement 6: configuration data

// x-axis text
xAxis: {
  type: 'category',
  data: ['1 month', '2 month', '3 month', '4 month', '5 month', '6 month', '7 month', '8 month', '9 month', '10 month', '11 month', '12 month'],
// Icon data
    series: [{
      name:'New fans',
      data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      type: 'line',
      smooth: true
    },{
      name:'New tourists',
      data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     
      type: 'line',
      smooth: true
      }
    }]

Demand 7: click 2020 for new demand, and the data in 2021 will change

The following is the data sent from the background (requested by ajax)

 var yearData = [
      {
        year: '2020',  // particular year
        data: [  // Two arrays because there are two lines
             [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
             [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]
      },
      {
        year: '2021',  // particular year
        data: [  // Two arrays because there are two lines
             [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
     		[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          ]
      }
     ];
  • tab bar switching event
  • Click the 2020 button to replace the data in the first object of the series with the data in the 2020 object [0]
  • Click the 2020 button to replace the data in the second object of the series with the data in the 2020 object [1]
  • The 2021 button works the same way

Full code:

// Broken line diagram 1 module fabrication
(function() {
  var yearData = [
    {
      year: "2020", // particular year
      data: [
        // Two arrays because there are two lines
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ]
    },
    {
      year: "2021", // particular year
      data: [
        // Two arrays because there are two lines
        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
      ]
    }
  ];
  // 1. Instantiate object
  var myChart = echarts.init(document.querySelector(".line .chart"));
  // 2. Specify configuration
  var option = {
    // Use this color to change the color of the two lines
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      // If the series object has a name value, legend does not need to write data
      // Modify legend component text color
      textStyle: {
        color: "#4c9bfd"
      },
      // This 10% must be quoted
      right: "10%"
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // Show border
      borderColor: "#012f4a ", / / border color
      containLabel: true // Including scale text
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1 month",
        "2 month",
        "3 month",
        "4 month",
        "5 month",
        "6 month",
        "7 month",
        "8 month",
        "9 month",
        "10 month",
        "11 month",
        "12 month"
      ],
      axisTick: {
        show: false // Remove tick marks
      },
      axisLabel: {
        color: "#4c9bfd "/ / text color
      },
      axisLine: {
        show: false // Remove axis
      }
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false // Remove tick marks
      },
      axisLabel: {
        color: "#4c9bfd "/ / text color
      },
      axisLine: {
        show: false // Remove axis
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a "/ / split line color
        }
      }
    },
    series: [
      {
        name: "New fans",
        type: "line",
        // true can make our polyline display with radians
        smooth: true,
        data: yearData[0].data[0]
      },
      {
        name: "New tourists",
        type: "line",
        smooth: true,
        data: yearData[0].data[1]
      }
    ]
  };

  // 3. Configure to instance object
  myChart.setOption(option);
  // 4. Let the chart automatically adapt to the screen
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  // 5. Click switch effect
  $(".line h2").on("click", "a", function() {
    // alert(1);
    // console.log($(this).index());
    // After clicking a, find the related object of the corresponding yearData according to the index number of the current a
    // console.log(yearData[$(this).index()]);
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    // Re rendering required
    myChart.setOption(option);
  });
})();

15 - line chart 2 production of playback volume module

  • Find similar examples on the official website, analyze them appropriately, and introduce them into HTML pages
  • Customize charts according to requirements

Requirement 1: replace the legend component. The text color is RGBA (255255255,. 5). The text size is 12

 legend: {
      top: "0%",
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
},

Requirement 2: modify chart size

grid: {
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },

Requirement 3: modify x-axis related configuration

  • Change the text color to RGBA (255255255,. 6) and the text size to 12
  • The color of the x-axis is RGBA (255255255,. 2)
     // The text color is RGBA (255255255,. 6) and the text size is 12
     axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
         // The color of the x-axis is RGBA (255255255,. 2)
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)"
          }
        },

Requirement 4: modify the relevant configuration of y-axis

        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
	   // Change the color of the split line
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      

Requirement 5: modify the configuration of two line modules (pay attention to customization in series)

       //The first line is smooth
       smooth: true,
        // Change the style of the line individually
        lineStyle: {
            color: "#0184d5",
            width: 2 
        },
         // Filled area
        areaStyle: {
              // Gradient, just copy
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)"   // The starting color of the gradient
                },
                {
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)"   // The end color of the gradient line
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
        },
        // Set inflection point and dot
        symbol: "circle",
        // Inflection point size
        symbolSize: 8,
        // Set inflection point color and border
       itemStyle: {
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
        },
        // The inflection point is not displayed at the beginning, and the mouse passes through the display
        showSymbol: false,
       name: "Forwarding volume",
        type: "line",
        smooth: true,
        lineStyle: {
          normal: {
            color: "#00d887",
            width: 2
          }
         },
         areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0, 216, 135, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(0, 216, 135, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        // Set inflection point and dot
        symbol: "circle",
        // Inflection point size
        symbolSize: 5,
        // Set inflection point color and border
         itemStyle: {
            color: "#00d887",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
        },
        // The inflection point is not displayed at the beginning, and the mouse passes through the display
        showSymbol: false,

Requirement 6: replace data

// x-axis replacement data
data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
// data of the first object in series
 data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40],
// data of the second object in series
 data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],

16 pie chart 1 age distribution module production

  • Find similar examples on the official website, analyze them appropriately, and introduce them into HTML pages
  • Customize charts according to requirements

Custom chart requirements 1:

  • The modified legend component is displayed at the bottom and centered.
  • Change the width and height of each small icon to 10px
  • The text size is 12 colors RGBA (255255255,. 5)
 legend: {
      // 0% from bottom
      bottom: "0%",
      // Width and height of small icons
      itemWidth: 10,
      itemHeight: 10,
      data: ['Direct access', 'Mail marketing', 'Alliance advertising', 'Video advertising', 'Search Engines'],
      // Change the text of the legend component to 12px
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
 },

Customization requirements 2:

  • Modify horizontal center vertical center
  • Modify the radius of inner circle and outer circle to ["40%", "60%"] teacher pink friendly tips. For example, the broken line chart and histogram with rectangular coordinate system modify the size of the graph through grid, while our pie chart modifies the size through radius
series: [
      {
        name: "age distribution",
        type: "pie",
        // Sets the position of the pie chart in the container
        center: ["50%", "50%"],
        //  Changing the radius of the inner circle and the radius of the outer circle as a percentage is relative to the width of the container
        radius: ["40%", "60%"],
        // Do not display label text
        label: { show: false },
        // Do not show connectors
        labelLine: { show: false },
      }
    ]

Customization requirement 3: replace data

// data in legend can be omitted
data: ["0 Under years old", "20-29 year", "30-39 year", "40-49 year", "50 Over years old"],
//  Data in series
 data: [
          { value: 1, name: "0 Under years old" },
          { value: 4, name: "20-29 year" },
          { value: 2, name: "30-39 year" },
          { value: 2, name: "40-49 year" },
          { value: 1, name: "50 Over years old" }
 ] ,

Customization requirement 4: change color

color: [
          "#065aab",
          "#066eab",
          "#0682ab",
          "#0696ab",
          "#06a0ab",
        ],
 // 4. Let the chart automatically adapt to the screen
  window.addEventListener("resize", function() {
    myChart.resize();
  });

17 - pie chart 2 regional distribution module production (Nightingale Rose)

  • Find similar examples on the official website, analyze them appropriately, and introduce them into HTML pages
  • Customize charts according to requirements

Step 2: customize according to requirements

  • Requirement 1: color setting
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
  • Requirement 2: modify the pie chart size (series object)
radius: ['10%', '70%'],
  • Requirement 3: change the display mode of pie chart to radius mode
 roseType: "radius",
  • Requirement 4: data usage and replacement (data object in series object)
          { value: 20, name: 'Yunnan' },
          { value: 26, name: 'Beijing' },
          { value: 24, name: 'Shandong' },
          { value: 25, name: 'Hebei' },
          { value: 20, name: 'Jiangsu' },
          { value: 25, name: 'Zhejiang' },
          { value: 30, name: 'Sichuan' },
          { value: 42, name: 'Hubei' }
  • Requirement 5: the font is slightly smaller, 10 px (set in the series object)

    The text label on the pie chart graph can control some styles of the text of the pie chart. Label object settings

series: [
      {
        name: "Area model",
        type: "pie",
        radius: [30, 110],
        center: ["50%", "50%"],
        roseType: "radius",
        // The text label controls the relevant style of pie chart text. Note that it is an object
        label: {
          fontSize: 10
        },
      }
    ]
  };
  • Requirement 6: prevent the guide line from being too long when zooming. The guide line is slightly shorter (the labeline object setting in the series object)
    • Connection chart 6 px
    • Connecting text 8 px
+        // Text adjustment
+        label:{
+          fontSize: 10
+        },
+        // Guide line adjustment
+        labelLine: {
+          // Line length of connecting sector diagram
+          length: 6,
+          // Length of connecting text line
+          length2: 8
+        } 
+      }
+    ],

  • Requirement 6: when the browser zooms, the chart automatically adapts.
// Monitor the browser zoom, and call the zoom resize function for the chart object
window.addEventListener("resize", function() {
    myChart.resize();
  });

18 echarts community introduction

community These are places where active users of echart can communicate and contribute customized charts.

  • Here you can find some highly customized charts based on echart, which is equivalent to plug-ins developed based on jquery. Here are third-party charts developed based on echart.

19 echarts map usage (extension)

Examples of reference communities: https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (simulated aircraft route)

Implementation steps:

  • First, you need to download China js provides the js file of China map
  • Second, because there are many codes in it, we create a new js file mymap js introduction
  • Just use the configuration provided by the community.

Modification required:

  • Remove the title component
  • Remove background color
  • Modify the provincial background #142957 areaColor in the map
  • Zoom in the map by setting zoom to 1.2
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: '#142957',
          borderColor: '#0692a4'
        },
        emphasis: {
          areaColor: '#0b1c2d'
        }
      }
    },

Conclusion: this example is an extended case. You can see more cases in the community in the future.

20 - Final constraint scaling

/* Constrain screen size */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}

Keywords: data visualization echarts

Added by dw89 on Fri, 28 Jan 2022 10:25:21 +0200