【Echarts】- 折线图

 

步骤分析

1. 封装好函数，为后续传入真实数据做准备

2. 初始化echarts

3. 设置配置项，空的option 即可

4. 创建图表

5. 查找官方示例

6. 按需求，自定义配置图表

第一步：echarts基本步骤

 function lineChart() {
  // 调用echarts的init创建一个图表实例
  // echarts.init(dom元素):dom元素就是图表的容器
   let myChart = echarts.init(document.querySelector('.line'));
  // 指定图表的配置项和数据
   let option = {};
  // 调用图表实例的setOption方法根据指定的选项绘制图表
   myChart.setOption(option);
 }

第二步：参照官方示例

（官方示例：Examples - Apache ECharts）

• tooltip -- 输入移入的提示

• title -- 标题

• xAxis -- x轴

• yAxis -- y轴

• dataZoom -- 数据缩放组件

• series -- 系列数据

以上配置项留下，其他删除

第三步：自定义配置

• 将官方示例中除了option之外的其他代码删除，并自己添加X轴数据和series中的数据。

• 系列数据

  • 增加一条线

  • 修改 name 为 '期望薪资' 和 '实际薪资'

  • 线的拐点为平滑拐点

  • 线条和X轴对齐位置，无特殊标记 symbol: 'none'

• 分析数据缩放组件 dataZoom

• 增加标题，标题颜色 #6d767e

• 分析tooltip（官方示例已带）。

• 增加图例，距离顶部20px。

• 分析坐标轴留白策略 boundaryGap

完成后的配置项 option 如下：

function lineChart() {
  let myChart = echarts.init($('.line')[0]);
  let option = {
    // 图例
    legend: {
      top: 20
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    // 标题
    title: {
      // left: 'center',
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    // X轴设置
    xAxis: {
      type: 'category',
      boundaryGap: false, // 坐标轴两侧的留白策略。false表示不留白
      data: ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥']
    },
    // Y轴
    yAxis: {
      type: 'value',
      // 我们目前的数据，最大值是 17000 
      // 坐标轴最大值 = 数据最大值 + 数据最大值 * 50%
      boundaryGap: [0, '50%'], // Y轴方向上，坐标轴延伸的值
    },
    // 数据缩放组件（三种类型，通过type来指定类型）
    // type: inside（内部、数据缩放组件集成到了X轴上，通过鼠标滚轮来缩放）
    // type: select（选择、配合工具箱使用，通过工具选框来进行缩放）
    // type: slider（滑块、单独出现一个滑块，通过滑块进行数据的缩放） -- 默认
    dataZoom: [
      {
        // type: 'slider', // 这里没有type，默认是 slider 类型
        start: 0, // 起始点 百分比
        end: 15 // 结束点 百分比
      }
    ],
    // 系列数据
    series: [
      {
        name: '期望薪资',
        type: 'line', // 表示是折线图
        smooth: true, // 使用平滑曲线
        symbol: 'none', // 表示线上的标志
        // 每一项的样式
        itemStyle: {
          color: '#ee6666'
        },
        // areaStyle: {},
        // 折线使用的数据
        data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000]
      },
      {
        name: '实际薪资',
        type: 'line', // 表示是折线图
        smooth: true, // 使用平滑曲线
        symbol: 'none', // 表示线上的标志
        // 每一项的样式
        itemStyle: {
          color: '#5470c6'
        },
        // areaStyle: {},
        // 折线使用的数据
        data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000]
      }
    ]
  };

  myChart.setOption(option);
}

lineChart();