Echarts 学习笔记

---

浏览器画图原理

• Canvas

  • 基于像素
  • 单个 html ，类似于画笔在画布上画画
  • Echarts 基于 Canvas 画图

• SVG

  • 基于对象模型
  • 多个图形元素
  • 高保真

简单例子

• 带标号的 4 步

  

  Echarts 入门示例

x 轴标签过多导致排不开的解决方法

xAxis: {
    type: 'category',
    boundaryGap: false,
    data: arr[0].xVals,
    axisLabel: {
        interval: 0,
        //  rotate:40
        formatter: function (value, index) {
            if (index % 2 != 0) {
                return "\n\n" + value;
            }
            else {
                return value;
            }
        }
    }
}

• toolbox 工具箱组件

  • show 显示
  • feature
    • dataView 数据视图
    • restore 还原
    • dataZoom 区域缩放
    • magicType 切换图表类型
    • saveAsImage 保存为图片

• tooltip 弹窗组件

  • trigger 触发类型

• 标记线和标记点

  • 标记线：markline
  • 标记点：markpoint

    series:[{
        name:'销量',
        type:'bar',
        data:[5,20,36,10,10,20],
        markPoint:{                     // 标记点
            data:[
            {
                type:'max',name:'最大值'
            },{
                type:'min',name:'最小值'
            }]
        },
        markLine:{                     // 标记线
            data:[
            {
                type:'average',name:'平均值'
            }]
        }
    }]
  

最大 / 最小 / 平均

• 地图
  • 需要在官网上下载地图
  • 有两种引入方式
    • JavaScript 示例

    • JSON 示例

      $.get('map/json/china.json', function (chinaJson) {
          echarts.registerMap('china', chinaJson);
          var chart = echarts.init(document.getElementById('main'));
          chart.setOption({
              series: [{
                  type: 'map',
                  map: 'china'
              }]
          });
      });
      

进阶

• 多个坐标轴配合

  • 两个图合并展示
  • 设置两个 Y 轴
  • 配置多个 yAxis
  • 主要是依靠给 series 中的某个对象添加 yAxisIndex:1 （根据这个值查文档）

• dataZoom 主要用于 X轴 数据非常多时

  • X轴 可以控制区域
    • 区间显示
    • 缩放显示

    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 10
    }
  

  

  dataZoom 应用

• 值域漫游（visualMap）

  • 过滤数据展现

  • 之前叫 dataRange ，现在叫 visualMap

    

    visualMap