The decorator on the front end of Echart, don’t you come and take a look

Article directory

☀️Author’s profile: Hello everyone, I am yyds
🐋 Personal homepage: CSDN blog of
yyds 🎁 series of columns: [Front-end]

Echarts

1. Initial understanding and basic use of Echarts

1.1Echarts

ECharts is an open source [visualization] library implemented by JavaScript, which is open sourced by Baidu. It has strong compatibility and relies on the vector graphics library
ZRender at the bottom.data visualization chart。

1.2 Advantages of Echarts

  • open source free
  • Feature rich
  • active community
  • Multiple data support
  • Streaming data support
  • mobile optimization
  • Cross-platform
  • cool special effects
  • 3D visualization of data

1.3 A basic case showing Echarts

1.4 Basic use of Echarts

1.4.1 Introducing the echarts file

  1. npm get

npm install echarts –save

  1. .download from github

Links to releases can be found on the releases page of the apache/echarts project. Click the Source code in Assets at the bottom of the download page, after decompression, the echarts.js in the dist directory is the file containing the complete ECharts functions

1.4.2 Use in the project

  1. Import the Echarts.js file (put it under the lib file)

<script src="./lib/echarts.min.js"></script>

  1. A container ready to render the chart

<!--You can set the width and height of the container here--> 
 < div  id = "echarts"  style = "width:600px;height:600px" > </ div >

You can also directly call the resize() method of the echarts instance object

myChart.resize({
  width: 800,
  height: 400
});

  1. Initialize the echarts instance object

var myChart = echarts.init(document.getElementById('main'))

  1. Prepare configuration items

This step is very important. Our final effect, whether to display a pie chart or a line chart, is basically determined by the configuration items.

var option = {
  xAxis: {
    type: 'category',
    data: [ 'Xiao Ming' , 'Xiaohong' , 'Xiao Wang' ]
 },
  yAxis: {
    type: 'value'
 },
  series: [
   {
      name: 'language' ,
       type : 'bar' ,
      data: [70, 92, 87],
   }
 ]
}

  1. Set the configuration item to the echarts instance object

myChart.setOption(option)

1.5 Some basic configuration

  • The x-axis in the xAxis
    Cartesian coordinate system, if the value of the type attribute is category, then the data data needs to be configured, representing the
    presentation on the x-axis
  • yAxis
    is the y-axis in the rectangular coordinate system. If the type attribute is configured as value, then there is no need to configure data. At this time, the y-axis will automatically go to
    the series to find data to draw the chart.
  • series
    list of series. Each series determines its own chart type by type, and data sets the data of each series

2. Understand several basic diagrams of Echarts

2.1 [Histogram]

2.1.1 Implementation

Step 1 The most basic code structure of ECharts
Step 2 Prepare the data of the x-axis
Step 3 Prepare the data of the y-axis
Step 4 Prepare the option, set the value of type in the series to: bar

<script src="lib/echarts.min.js"></script>
</head>

< body > 
  < div  style = "width: 600px;height: 400px" > </ div > 
  < script > //1. The most basic code structure of ECharts //2. X-axis data: ['Zhang San', 'Li Four', 'Wang Wu', 'Run Tu', 'Xiao Ming', 'Maotai', 'Er Niu', 'Da Qiang'] //3. y-axis data: [88, 92, 63, 77, 94, 80, 72, 86] //4. Set the value of type to bar var mCharts = echarts.init( document .querySelector( "div" )) // Initialize the echarts instance object var xDataArr = [ 'Zhang San' , 'Li Four' , 'Wang Wu' , 'Runtu', 'Xiao Ming' , 'Maotai' , 'Er Niu'





    , 'Daqiang' ] // Prepare x-axis data 
    var yDataArr = [ 88 , 92 , 63 , 77 , 94 , 80 , 72 , 86 ] // Specify data for each element of the x-axis 
    var option = {
       yAxis : {
         type : 'value'
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      series: [
        {
          name : 'language' ,
           type : 'bar' ,
           data : yDataArr
        }
      ]
    }
    mCharts.setOption(option)

2.1.2 Some common effects of histogram

When it comes to effects, we need to configure some properties.
About how to configure, you need to check on the pipe network

  1. marker effect

Mark the maximum and minimum values ​​of the chart and use the markPoint property to
configure them in the series
Mark the average value and use the markLine property, which is the same level as markPoint

series:  [{ 
            ......... 
   markPoint:  { 
      data:  [ 
          { 
              type:  'max' ,  name:  'max' 
          }, 
         { 
             type:  'min' ,  name:  'minimum' 
         } 
            ] 
       } ,

    markLine:  { 
      data:  [ 
          { 
           type:  'average' ,  name:  'average' 
           } 
        ] 
     } 
   }],

  1. display effect

If we want to display values ​​in the bar chart
or set the width of the bar chart, we can use the
lable, barwidth properties

series:[ 
    {       
        .... 
        label:{
        show: true //Set whether it is visible 
        rotate: 60 //Rotate the digital angle
        },
        barWidth:"30%"
    } 
    ]

2.2 Pie Chart

2.1 Implementation steps

Step 1 The most basic code structure of ECharts
Step 2 Prepare data
Step 3 Prepare configuration items Set type:pie under series

have to be aware of is

  • The data of the pie chart is an array of dictionaries consisting of name and value
  • Pie charts do not need to configure xAxis and yAxis

<script>
     //1. The most basic code structure of ECharts 
    //2. Prepare data [{name:???, value:??? },{}] 
    // Taobao: 11231 Jingdong: 22673 Vipshop: 6123 Shop No. 1: 8989 Jumei Youpin: 6700 
    //3. Set the value of type to pie 
    var mCharts = echarts.init(document.querySelector( "div" ))
     // pieData is the data that needs to be set for the pie chart, Array, the array contains one object after another, each object needs to have name and value 
    var pieData = [
      {
        name: 'Taobao' ,
         value : 11231
      },
      {
        name: 'Jingdong' ,
         value : 22673
      },
      {
        name: 'Vipshop' ,
         value : 6123
      },
      {
        name: '1st store' ,
         value : 8989
      },
      {
        name: 'Jumei Youpin' ,
         value : 6700
      }
    ]
    var option = {
      series: [
        {
          type: 'pie',
          data: pieData
        }
      ]
    }
    mCharts.setOption(option)
  </script>

2.2 Some effects of pie charts

  1. Display values
    ​​lable.show is used to display text
    lable.formatter: formatted text

  2. Nightingale Chart
    Nightingale Chart means that the radius of each sector varies with the size of the data. The larger the value is, the greater the radius of the sector.
    roseType:’radius’

  3. check effect

    1.selectedMode: ‘multiple’
    The selection mode indicates whether to support multiple selections. It is disabled by default. Boolean values ​​and strings are supported. The string value can be
    ‘single’ or ‘multiple’, which means single selection or multiple selection, respectively.
    2.selectedOffset: 30 The selected sector offset distance

< script > //1. The most basic code structure of ECharts //2. Prepare data [{name:???, value:??? },{}] // Taobao: 11231 Jingdong: 22673 Vipshop: 6123 Shop 1: 8989 Jumei Youpin: 6700 //3. Set the value of type to pie var mCharts = echarts.init( document .querySelector( "div" ))
     // pieData is the data that needs to be set for the pie chart, Array, the array contains one object after another, each object needs to have name and value var pieData = [






      {
        name : 'Taobao' ,
         value : 11231
      },
      {
        name : 'Jingdong' ,
         value : 22673
      },
      {
        name : 'Vipshop' ,
         value : 6123
      },
      {
        name : '1st store' ,
         value : 8989
      },
      {
        name : 'Jumei Youpin' ,
         value : 6700
      }
    ]
    var option = {
      series: [
        {
          type : 'pie' ,
           data : pieData,
           label : { // display of pie text 
            show: true , // display text 
            //formatter: 'hehe' // determine the content of text display 
            formatter: function ( arg ) {
               / /console.log(arg ) 
              return arg.name + 'platform' + arg.value + 'meta\n' + arg.percent + '%'
            }
          },
          // radius: ['50%', '75%'] // The 0th element represents the radius of the inner circle The 1st element is the radius of the outer circle 
          roseType: 'radius' , // Nightingale pie The radius of each area of ​​the graph is different 
          // selectedMode: 'single' // The selected effect can deviate the selected area from the dot by a small distance 
          selectedMode: 'multiple' ,
           selectedOffset : 30
        }
      ]
    }
    mCharts.setOption(option)
  </script>

2.3 Some common configurations

  • Set a title for the graph: title
  • Show tooltip: tooltip
  • Tool button: toolbox
  • Column: legend

< script > var mCharts = echarts.init( document .querySelector( "div" ))
     var xDataArr = [ 'Zhang San' , 'Li Si' , 'Wang Wu' , 'Runtu' , 'Xiao Ming' , 'Maotai' , 'two girls' , 'big strong' ]
     var yDataArr1 = [ 88 , 92 , 63 , 77 , 94 , 80 , 72 ,86 ]
     var yDataArr2 = [ 93 ,
    60 , 61 , 62 , 85 , 79 , 92 , 30 ]
     var option = {
     //set the title of the chart
      title: {
        text : 'Result display' ,
         textStyle : {
           color : 'red'
        },
      },
      // show the prompt box
      tooltip: {
        trigger : 'axis' ,
         triggerOn : 'click' ,
         formatter : function ( arg ) {
           return arg[ 0 ].name + 'score is:' + arg[ 0 ].data
        }
      },
      toolbox : {
         feature : {
           saveAsImage : {}, // export image 
          dataView: {}, // data view 
          restore: {}, // reset 
          dataZoom: {}, // area zoom
          magicType: {
            type: ['bar', 'line']
          } // Switching the dynamic chart type
        }
      },
      legend : { // legend, the data in the legend comes from the name of each object in the series, the legend can help us filter the chart 
        data: [ 'language' , 'mathematics' ]
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name : 'language' ,
           type : 'bar' ,
           data : yDataArr1
        },
        {
          name : 'mathematics' ,
           type : 'bar' ,
           data : yDataArr2
        }
      ]
    }
    mCharts.setOption(option)

3. Summary

  1. About using Echarts

First, you need to introduce the echarts file, then create a container for rendering the chart,
initialize the echarts instance object, and configure related configurations. For these configurations,
you can find how to use them on the official website, and then put the configuration in the instantiated object.

  1. About how to configure

First open the official website, Echarts official website
, click the configuration item manual under the document, where you can find the configuration you want.
Note whether each configuration item is an object or an array. It can’t be wrong,
and you need to pay attention to where the configuration items should be placed

If you think it’s not bad, I
look forward to giving the blogger a like, follow, and comment three times in a row

Leave a Comment

Your email address will not be published. Required fields are marked *