ECharts

Posted 小企鹅推雪球!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ECharts相关的知识,希望对你有一定的参考价值。

ECharts简介

  1. ECharts 是一个使用 javascript 实现的开源可视化库,涵盖各行业图表,满足各种需求
  2. Apache ECharts 提供了多种安装方式
    1. 从npm 获取:npm install echarts --save
    2. 从 CDN 获取:https://www.jsdelivr.com/package/npm/echarts
  3. 在线定制;引入部分模块以减少包体积:https://echarts.apache.org/zh/builder.html

在项目中使用Echarts-引入全部的图表和组件

  1. 引入 ECharts

    import * as echarts from 'echarts';
    
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption(
      title: 
        text: 'ECharts 入门示例'
      ,
      tooltip: ,
      xAxis: 
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      ,
      yAxis: ,
      series: [
        
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        
      ]
    );
    

按需引入ECharts 图表和组件

  1. 使用 ECharts 提供的按需引入的接口来打包必须的组件。

    // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
    import * as echarts from 'echarts/core';
    // 引入柱状图图表,图表后缀都为 Chart
    import  BarChart  from 'echarts/charts';
    // 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
    import 
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      DatasetComponentOption,
      TransformComponent
     from 'echarts/components';
    // 标签自动布局,全局过渡动画等特性
    import  LabelLayout, UniversalTransition  from 'echarts/features';
    // 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
    import  CanvasRenderer  from 'echarts/renderers';
    
    // 注册必须的组件
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
      BarChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer
    ]);
    
    // 接下来的使用就跟之前一样,初始化图表,设置配置项
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(
      // ...
    );
    
  2. 为了保证打包的体积是最小的,ECharts 按需引入的时候不再提供任何渲染器,所以需要选择引入 CanvasRenderer 或者 SVGRenderer作为渲染器,这么做的优点在于只需要使用 svg 渲染模式,打包的结果中就不会再包含无需使用的CanvasRenderer模块。

  3. makeapie.com 社区用户的作品集

ECharts 图表容器及大小

  1. ECharts需要在 html 中先定义一个

    节点,并且通过 CSS 使得该节点具有宽度和高度

  2. ECharts初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 opts.width 或 opts.height 将其覆盖。

    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));
    </script>
    
  3. 上述初始化ECharts节点的方式需要保证在调用 echarts.init 时需保证容器已经有宽度和高度了

  4. 如果图表容器不存在宽度和高度,或者,图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小。

    <div id="main"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'), null, 
        width: 600,
        height: 400
      );
    </script>
    
  5. 监听图表容器的大小并改变图表大小,当容器大小改变时,图表的大小也相应地改变。

  6. 比如,图表容器是一个高度为 400px、宽度为页面 100% 的节点,在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。

    1. 可以监听页面的window.onresize 事件获取浏览器大小改变的事件,然后调用 echartsInstance.resize改变图表的大小
      <style>
        #main,
        html,
        body 
          width: 100%;
        
        #main 
          height: 400px;
        
      </style>
      <div id="main"></div>
      <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        window.onresize = function() 
          myChart.resize();
        ;
      </script>
      
  7. 除了直接调用resize() 不含参数的形式之外,还可以指定宽度和高度,实现图表大小不等于容器大小的效果

    myChart.resize(
      width: 800,
      height: 400
    );
    

PS:容器节点被销毁以及被重建时

  1. 假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了
  2. 本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。
  3. 正确的做法是,在图表容器被销毁之后,调用 echartsInstance.dispose 销毁实例,在图表容器重新被添加后再次调用 echarts.init 初始化\\
  4. 在容器节点被销毁时,应调用 echartsInstance.dispose 以销毁实例释放资源,避免内存泄漏。

ECharts 中的样式

  1. 在 ECharts 中可以设置样式,改变图形元素或者文字的颜色、明暗、大小等。
  2. ECharts 中的常用的样式
    1. 颜色主题(Theme)
    2. 调色盘
    3. 直接样式设置(itemStyle、lineStyle、areaStyle、label、…)
    4. 视觉映射(visualMap)

颜色主题(Theme)

  1. 采用颜色主题(theme)能直接更改全局样式

  2. ECharts5 除了一贯的默认主题外,还内置了'dark'主题切换成深色模式

    var chart = echarts.init(dom, 'dark');
    
  3. 没有内置在 ECharts 中的其他的主题,需要自己加载https://echarts.apache.org/zh/theme-builder.html

调色盘

  1. 调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色

  2. 可以设置全局的调色盘,也可以设置系列自己专属的调色盘。

    option = 
      // 全局调色盘。
      color: [
        '#c23531',
        '#2f4554',
        '#61a0a8',
        '#d48265',
        '#91c7ae',
        '#749f83',
        '#ca8622',
        '#bda29a',
        '#6e7074',
        '#546570',
        '#c4ccd3'
      ],
    
      series: [
        
          type: 'bar',
          // 此系列自己的调色盘。
          color: [
            '#dd6b66',
            '#759aa0',
            '#e69d87',
            '#8dc1a9',
            '#ea7e53',
            '#eedd78',
            '#73a373',
            '#73b9bc',
            '#7289ab',
            '#91ca8c',
            '#f49f42'
          ]
          // ...
        ,
        
          type: 'pie',
          // 此系列自己的调色盘。
          color: [
            '#37A2DA',
            '#32C5E9',
            '#67E0E3',
            '#9FE6B8',
            '#FFDB5C',
            '#ff9f7f',
            '#fb7293',
            '#E062AE',
            '#E690D1',
            '#e7bcf3',
            '#9d96f5',
            '#8378EA',
            '#96BFFF'
          ]
          // ...
        
      ]
    ;
    

直接的样式设置

  1. ECharts 的 option 中,可以设置 itemStyle、lineStyle、areaStyle、label 等等,可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
  2. ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,itemStyle、label 等可能出现在不同的地方。

高亮的样式:emphasis

  1. 在鼠标悬浮到图形元素上时,一般会出现高亮的样式

  2. 默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 emphasis 属性来定制

  3. emphsis 中的结构,和普通样式的结构相同,例如:

    option = 
      series: 
        type: 'scatter',
    
        // 普通样式。
        itemStyle: 
          // 点的颜色。
          color: 'red'
        ,
        label: 
          show: true,
          // 标签的文字。
          formatter: 'This is a normal label.'
        ,
    
        // 高亮样式。
        emphasis: 
          itemStyle: 
            // 高亮时点的颜色。
            color: 'blue'
          ,
          label: 
            show: true,
            // 高亮时标签的文字。
            formatter: 'This is a emphasis label.'
          
        
      
    ;
    

以上是关于ECharts的主要内容,如果未能解决你的问题,请参考以下文章

新手求助echarts关系图

怎么用java编写echarts代码

Echarts 如何防止内存泄漏

echarts柱状图颜色设置:echarts柱状图如何设置不同颜色?(代码)

echarts怎么把代码移动在hbuilder里面

echarts散点图