One: ECharts features

ECharts, an open source visualization library implemented using JavaScript, can run smoothly on PCs and mobile devices, compatible with most current browsers (IE9/10/11, Chrome, Firefox, Safari, etc.), and relies on the vector graphics library ZRender , providing intuitive, interactive and highly customizable data visualization charts.
ECharts provides regular line charts, histograms, scatter charts, pie charts, candlestick charts, box charts for statistics, maps, heat maps, and line charts for geographic data visualization, and relational data visualizations. Relationship diagrams, treemaps, sunburst diagrams, parallel coordinates for multidimensional data visualization, as well as funnel diagrams for BI, dashboards, and support for mashups between diagrams.
Official website : https://echarts.apache.org/zh/index.html
insert image description here

Two: ECharts download

Apache ECharts supports multiple download methods, here we enter the official website to download
insert image description here

Three: ECharts quick start

Select at https://www.jsdelivr.com/package/npm/echartsdist/echarts.js , click and save as echarts.js a file .

Introducing Apache ECharts

Create a new file in the directory you just echarts.jssaved , with the following content:index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

draw a simple graph

After </head>the , add:

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

Then you can initialize an echarts instance through the echarts.init method and generate a simple histogram through the setOption method. The following is the complete code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
    
    
        title: {
    
    
          text: 'ECharts 入门示例'
        },
        tooltip: {
    
    },
        legend: {
    
    
          data: ['销量']
        },
        xAxis: {
    
    
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {
    
    },
        series: [
          {
    
    
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

insert image description here

Four: Example

We can click on the sample interface on the official website to find the report statistics needed for our project.
insert image description here
Modifying the code can achieve the desired result. When writing a project, we can pass the front end to our project for use

Apache ECharts is an open source JavaScript-based visual chart library