ECharts数据可视化折线图

销售统计( sales )-线形图

实现步骤：

• 寻找官方的类似示例，给予分析, 引入到HTML页面中
• 按照需求来定制它。

第一步：寻找官方的类似示例，给予分析。

官方参考示例：
链接: Examples - Apache ECharts.

旧版本官方参考示例：
链接: Documentation - Apache ECharts

完整js代码

// 销售统计模块
(function() {
   
  // (1)准备数据
  var data = {
   
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
    ]
  };
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".line"));
  // 2. 指定配置和数据
  var option = {
   
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
   
      // 通过坐标轴来触发
      trigger: "axis"
    },
    legend: {
   
      // 距离容器10%
      right: "10%",
      // 修饰图例文字的颜色
      textStyle: {
   
        color: "#4c9bfd"
      }
      // 如果series 里面设置了name，此时图例组件的data可以省略
      // data: ["邮件营销", "联盟广告"]
    },
    grid: {
   
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true,
      borderColor: "#012f4a",
      containLabel: