ECharts(一)

最新推荐文章于 2024-08-11 15:08:24 发布

努力转行的任同学...

最新推荐文章于 2024-08-11 15:08:24 发布

阅读量302

点赞数

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/qq_43408367/article/details/121759308

版权

ECharts 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

ECharts简介

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

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

引入 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 图表和组件

使用 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({
  // ...
});

为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入 CanvasRenderer 或者 SVGRenderer作为渲染器,这么做的优点在于只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的CanvasRenderer模块。
makeapie.com 社区用户的作品集

ECharts 图表容器及大小

ECharts需要在 HTML 中先定义一个

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

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>

上述初始化ECharts节点的方式需要保证在调用 echarts.init 时需保证容器已经有宽度和高度了

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

<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'), null, {
    width: 600,
    height: 400
  });
</script>

监听图表容器的大小并改变图表大小,当容器大小改变时，图表的大小也相应地改变。

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

可以监听页面的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>

除了直接调用resize() 不含参数的形式之外，还可以指定宽度和高度，实现图表大小不等于容器大小的效果
```
myChart.resize({
  width: 800,
  height: 400
});
```

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

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

ECharts 中的样式

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

颜色主题（Theme）

采用颜色主题（theme）能直接更改全局样式
ECharts5 除了一贯的默认主题外，还内置了'dark'主题切换成深色模式
```
var chart = echarts.init(dom, 'dark');
```
没有内置在 ECharts 中的其他的主题，需要自己加载https://echarts.apache.org/zh/theme-builder.html

调色盘

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

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

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'
      ]
      // ...
    }
  ]
};

直接的样式设置

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

高亮的样式：emphasis

在鼠标悬浮到图形元素上时，一般会出现高亮的样式
默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 emphasis 属性来定制

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.'
      }
    }
  }
};