美文网首页
Echarts 学习笔记

Echarts 学习笔记

作者: _月光临海 | 来源:发表于2017-09-04 10:19 被阅读0次

浏览器画图原理

  • 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 学习笔记

    浏览器画图原理 Canvas基于像素单个 html ,类似于画笔在画布上画画Echarts 基于 Canvas 画...

  • Echarts学习笔记

    因为最近做毕设,需要爬取数据并将数据进行分析可视化。同学推荐说echarts挺不错的,所以就试试,果然,官网上有很...

  • 学习笔记《ECharts》

    ECharts 是百度 EFE(Excellent FrontEnd)团队出品的一个图形库,显示效果比上一代产品类...

  • echarts学习笔记

    问:如何修改雷达图的字体大小? 答: 问:原代码:myChart.on("click", (params) => ...

  • Echarts学习笔记

    介绍和安装 介绍 Echarts是一个用于绘制可视化图表的工具,包括但不限于多种类型的统计图、树图、关系图、地图等...

  • echarts学习笔记

    echarts入门 echarts官网:https://echarts.apache.org[https://ec...

  • echarts学习笔记(1)

    关于echarts的了解 echarts为数据可视化提供商业图表插件,因为金融实训的关系关注到这个产品(之前也在百...

  • echarts API 学习笔记

    echarts API (echarts 圆饼图官网默认样式修改) app.title = '环形图'; opti...

  • echart学习之(一)熟悉坐标,网格

    一.学习echarts前面的准备 echarts2的官网 http://echarts.baidu.com/ech...

  • 2020-05-27 Echarts学习

    学习网站:https://echarts.apache.org/zh/tutorial.html#ECharts%...

网友评论

      本文标题:Echarts 学习笔记

      本文链接:https://www.haomeiwen.com/subject/sfvjjxtx.html