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散点图