1.6-echarts简易指南

echarts官方文档

常用api

• init 初始化
• dispose 销毁
• setOption 用于更新
• getOption 获取配置

常用配置

• title 标题
• legend 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
• grid 布局 上下左右宽度等
• xAxis x坐标轴
• yAxis y坐标轴

   yAxis: {
        type: 'category',
        data: categoryData,
        axisLabel: {
          interval: 0,  //  全显示
          rotate: 35,  //  倾斜
          formatter: val => {
            return `${valArr[val]}-${val}`;
          },
        },
      },

• dataZoom 缩放 inside：鼠标滚轮缩放 slider：旁边缩放条缩放 select

      dataZoom: [
        // 缩放，鼠标滚轮缩放和滚动条缩放
        {
          type: 'inside',
          start: 0,
          end: 5,
        },
        {
          type: 'slider',
          start: 0,
          end: 5,
        },
      ],

• tooltip 提示框

      tooltip: {
        trigger: 'axis',
        axisPointer: {  // 坐标轴指示器
          axis: 'x',
          type: 'cross',
        },
        formatter: params => {
          const val = params[0].value;
          return `${valArr[val[1]]}-${val[1]}`;
        },
      },
position回调函数返回位置信息
// 模拟原始tooltips
        formatter:(params) => {
          let returnVal = `${params[0].axisValue}<br />`;
          params.forEach(x=>{
            returnVal += `${x.seriesId}:${x.data[1]}<br />`;
          });
          return returnVal;
        },

• toolbox 导出图片，数据视图，动态类型切换，数据区域缩放，重置
• brush 刷子展示部分数据
• singleAxis 单轴
• timeline 播放
• dataset 数据集
• series 系列，有line bar scatter等

custom 调用ZRender

https://ecomfe.github.io/zrender-doc/public/

事件

    myChart.setOption(options,true);  //  为true就会重新渲染
    myChart.on('updateAxisPointer', (e) => {  // 触发Axis事件
      this.draw(e.dataIndex)
    })