echarts----折线图_document.queryselector('#echarts-line')-CSDN博客

本文链接：https://blog.csdn.net/grow_/article/details/129559653

实现步骤：

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

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

// 销售统计模块
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".line"));
  // 2. 指定配置和数据
  var option = {
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: ["邮件营销", "联盟广告"]
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["周一", "周二"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        name: "邮件营销",
        type: "line",
        stack: "总量",
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: "联盟广告",
        type: "line",
        stack: "总量",
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
  };

  // 3. 把配置和数据给实例对象
  myChart.setOption(option);
})();

第二步：按照需求来定制他

需求1：修改折线图大小，显示边框设置颜色：#012f4a，并且显示刻度标签。

    // 设置网格样式
    grid: { 
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,// 显示边框
      borderColor: '#012f4a',// 边框颜色
      containLabel: true // 包含刻度文字在内
    },

需求2：修改图例组件中的文字颜色 #4c9bfd，距离右侧 right 为 10%

 // 图例组件
    legend: {
      textStyle: {
        color: '#4c9bfd' // 图例文字颜色
      },
      right: '10%' // 距离右边10%
    },

需求3： x轴相关配置

* 刻度去除
* x轴刻度标签字体颜色：#4c9bfd
* 剔除坐标轴线颜色（将来使用Y轴分割线)
* 轴两端是不需要内间距 boundaryGap

    xAxis: {
      type: 'category',
      data: ["周一", "周二"],
      axisTick: {
         show: false // 去除刻度线
       },
       axisLabel: {
         color: '#4c9bfd' // 文本颜色
       },
       axisLine: {
         show: false // 去除轴线
       },
       boundaryGap: false  // 去除轴内间距
    },

需求4： y轴的定制

* 刻度去除
* 字体颜色：#4c9bfd
* 分割线颜色：#012f4a

    yAxis: {
      type: 'value',
      axisTick: {
        show: false  // 去除刻度
      },
      axisLabel: {
        color: '#4c9bfd' // 文字颜色
      },
      splitLine: {
        lineStyle: {
          color: '#012f4a' // 分割线颜色
        }
      }
    },

需求5：两条线形图定制

* 颜色分别：#00f2f1 #ed3f35
* 把折线修饰为圆滑 series 数据中添加 smooth 为 true

    color: ['#00f2f1', '#ed3f35'],
    series: [{
      name:'预期销售额',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      // 折线修饰为圆滑
      smooth: true,
      },{
      name:'实际销售额',
      data: [100, 331, 200, 123, 233, 543, 400],
      type: 'line',
      smooth: true,
    }]

需求6：配置数据

// x轴的文字
xAxis: {
  type: 'category',
  data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

// 图标数据
    series: [{
      name:'预期销售额',
      data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      type: 'line',
      smooth: true
    },{
      name:'实际销售额',
      data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     
      type: 'line',
      smooth: true
      }
    }]

全部的html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div class="line" style="width: 70%; height: 300px"></div>
    <script src="./js/echarts.js"></script>
    <script>
        // 销售统计模块
        (function () {

            // 1. 实例化对象
            var myChart = echarts.init(document.querySelector(".line"));
            // 2. 指定配置和数据
            var option = {
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    data: ["预期销售额", "实际销售额"],
                    textStyle: {
                        color: '#4c9bfd' // 图例文字颜色
                    },
                    right: '10%' // 距离右边10%
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                    borderColor: 'red',// 边框颜色
                    containLabel: true // 包含刻度文字在内
                },

                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisTick: {
                        show: false // 去除刻度线
                    },
                    axisLabel: {
                        color: '#4c9bfd' // 文本颜色
                    },
                    axisLine: {
                        show: false // 去除轴线
                    },
                },
                yAxis: {
                    type: "value",
                    axisTick: {
                        show: false  // 去除刻度
                    },
                    axisLabel: {
                        color: '#4c9bfd' // 文字颜色
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#012f4a' // 分割线颜色
                        }
                    }
                },
                color: ['#00f2f1', '#ed3f35'],
                series: [{
                    name: '预期销售额',
                    data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                    type: 'line',
                    smooth: true
                }, {
                    name: '实际销售额',
                    data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
                    type: 'line',
                    smooth: true
                }]
            };

            // 3. 把配置和数据给实例对象
            myChart.setOption(option);
            // 4.当我们浏览器缩放的时候，图表也等比例缩放
            window.addEventListener("resize", function () {
                // 让我们的图表调用 resize这个方法
                myChart.resize();
            });
        })();
    </script>
</body>

</html>