I. General configuration

Based on the examples in the first note, let’s introduce some common configurations in Echarts.

  • Title: Title component

Title is a common configuration for echarts ICONS, where the title object contains the text property and the textStyle property sets the title text and the color of the text. BorderWidth sets the width of the title’s border, borderColor sets the color of the border, and borderRadius sets the number of rounded corners of the border. There is also left, top to set the position of the title.

  • Tooltip: Tooltip component

    • The trigger: ‘item’ | ‘axis’, said the former data trigger, who said axis trigger;
    • TriggerOn: trigger, mouseover | click
    • The formatter: formatting, string template | callback function = “custom prompt template.

      The string template in the Formatter can be processed by querying the document according to the type of chart, or by using callback functions for highly customized tips. The callback has an arG argument, which holds a wealth of data from which you can make any type of tip you want.

      formatter: function(arg){
  return arg[0].name + The score of 'is:'+arg[0].data;
}
Copy the code

  • Toolbox: Toolbar components

    • Feature: Configure the functions of toolbox;
      • SaveAsImage: Export an image.
      • DataView: dataView function.
      • Restore: indicates the reset function.
      • DataZoom: Area zooming function
      • MagicType: Function to switch between charts.

  • Legend: legend component, used to filter series, needs to be used with series;

    • Data: Legend has a data array, which stores legends. The value of data in Legend must be the same as the value of name in series array.

For a generic configuration, this means that any type of icon can be used, and will be used frequently, so it is important. Title, Tooltip, Toolbox, Legend

Two, line chart implementation

<template>
    <div>
        <div id="main1"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
    export default {
        data() {
            return{}},mounted() {
            // Initialize the echarts object
            let myecharts = echarts.init(document.getElementById('main1'));
            // Class data is the data of the main axis
            let xData = ['Monday'.'Tuesday'.'Wednesday'.'Thursday'.'Friday'.'Saturday'.'Sunday'];
            let data = [255.421.635.582.425.852.354];
            let data2 = [552.751.935.482.725.952.454];
            const option = {
              // set the X-axis
              xAxis: {type: 'category'.data: xData,
                 // Close to the edge
                boundaryGap: true
              },
              // set the Y axis
              yAxis: {
                type: 'value'.// Flexibly set the starting point and ending point of the line chart ==> out of the zero value ratio
                scale: true
              },
              // Legend concession, corresponding to the value of name in series
              legend: {backgroundColor: 'rgba(142,212,12,1)'
                ,borderColor: 'red'
              },
              // Prompt box component
                tooltip: {
                  trigger: 'item'.// Formatter is formatted and can be a callback or custom data
                  formatter: ""
                },
              // series, indicating the core Settings of the icon type
              series: [{name: 'Sour beans'.type: 'line'.data: data,
                // Mark the maximum and minimum values of points
                markPoint: {data: [{type: 'max'}, {type: 'min'}},/ / the mean
                markLine: {
                  data: [{type: 'average'}},// Label the interval
                markArea: {
                  data: [[{xAxis: 'Tuesday'
                      },
                      {
                        xAxis: 'Wednesday'}], [{xAxis: 'Friday'}, {xAxis: 'Sunday'}}]].// Change the smoothness of the fold
                smooth: true.// Line style Settings
                lineStyle: {
                  type: 'dashed'.color: 'green',},// Line chart fill style
                areaStyle: {
                  color: 'rgba (24154135, 5)
                },
                 // Set it to push graph, so that it is not overlapping, not messy
                  stack: true}, {type: 'line'.data: data2,
                  name: 'Leek flower'.smooth: true.// Set it to push graph, so that it is not overlapping, not messy
                  stack: true./ / fill
                  areaStyle:{} }] } myecharts.setOption(option); }},</script>

<style scoped>
    #main1{
        width: 500px;
        height: 400px;
    }
</style>
Copy the code

The above is the content of today’s learning notes, the above component knowledge basically covers the knowledge we make line chart when commonly used, after learning, will not be afraid of making line chart.