Echarts 学习笔记

浏览器画图原理

Canvas
- 基于像素
- 单个 html ，类似于画笔在画布上画画
- Echarts 基于 Canvas 画图
SVG
- 基于对象模型
- 多个图形元素
- 高保真

简单例子

带标号的 4 步

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <script src="echarts.js"></script>
  </head>
  <body>
      <!-- 1. 给定一个容器并设置好宽高 -->
      <div id="main" style="width:900px;height:600px;"></div>
      <script>
          // 2. 初始化 Echarts 实例
          var myChart = echarts.init(document.getElementById('main'));
          // 3. 配置
          var option = {
              // 标题
              title:{
                  text:'Echarts 入门示例'
              },
              // 工具箱
              toolbox:{
                  show:true,
                  feature:{
                      saveAsImage:{
                          show:true
                      }
                  }
              },
              // 图例
              legend:{
                  data:['销量']
              },
              // x 轴
              xAxis:{
                  data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']    // axisLabel 可以解决 x 轴标签密集显示不全的问题
              },
              yAxis:{},
              // 数据
              series:[{
                  name:'销量',
                  type:'bar',
                  data:[5,20,36,10,10,20]
              }]
          };
          // 4. 调用
          myChart.setOption(option)
      </script>
  </body>
  </html>

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 示例

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
  var chart = echarts.init(document.getElementById('main'));
  chart.setOption({
      series: [{
          type: 'map',
          map: 'china'
      }]
  });
</script>

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

Echarts 学习笔记

浏览器画图原理

简单例子

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

进阶

推荐阅读更多精彩内容