line: simple line

简单折线图

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>
<div id="main" style="width: 800px;height:600px;"></div>

JavaScript

var myChart = echarts.init(document.getElementById('main'));
        
        
 var option =  {
  "tooltip": {
    "trigger": "axis",
    "formatter": function (params) {
      let result = `<b>${params[0].data.day}</b><br>`;

      params.reverse().forEach(item =>
        result += `${item.marker} ${item.seriesName}: ${item.data.count} (${Math.round(item.data.value || 0)}%)<br>`);

      return result;
    },
    "confine": true
  },
  "legend": {
    "selectedMode": true,
    "orient": "vertical",
    "right": 0,
    "top": "center",
    "icon": "pin",
    "data": [
      "Approuvée",
      "Certifiée",
      "Non certifiée"
    ]
  },
  "toolbox": {
    "show": false,
    "feature": {
      "saveAsImage": {
        "show": true
      }
    }
  },
  "textStyle": {
    "fontFamily": "Open sans",
    "fontWeight": "500",
    "textFill": "#626262"
  },
  "grid": {
    "left": "40px",
    "right": "120px",
    "height": "80%",
    "top": "15px"
  },
  "xAxis": [
    {
      "type": "category",
      "data": [
        "29/05",
        "30/05",
        "31/05",
        "01/06",
        "02/06",
        "03/06",
        "04/06",
        "05/06",
        "06/06",
        "07/06",
        "08/06",
        "09/06",
        "10/06",
        "11/06",
        "12/06"
      ],
      "axisLine": {
        "lineStyle": {
          "color": "#626262"
        }
      },
      "axisTick": {
        "show": false
      },
      "splitLine": {
        "show": false
      }
    }
  ],
  "yAxis": [
    {
      "type": "value",
      "boundaryGap": [
        "0%",
        "100%"
      ],
      "min": 0,
      "max": 100,
      "scale": true,
      "name": "%",
      "interval": 25,
      "axisLabel": {
        "formatter": "{value} %",
        "color": "#626262"
      },
      "axisLine": {
        "show": false
      },
      "axisTick": {
        "show": false
      },
      "splitLine": {
        "lineStyle": {
          "color": "#eee",
          "type": "solid"
        }
      }
...