echarts各个配置项概念

发表于 2022-01-15 分类于 Develop ， Javascript ， Echarts 本文字数： 2.4k 阅读时长 ≈ 2 分钟

echarts 是百度开源的一个绘制图表库，号称是百度最良心的作品。本文将主要介绍 echarts 配置的相关概念，在使用时，可以按需去查找相关 api。

安装

1	npm install echarts --save

使用

在 vue 中使用时示例如下：

<template>
  <div id="main" :style="height: 200px; width: 200px" />
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      // 参数
      const option = {
        legend: {
          right: '0',
          orient: 'vertical'
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 94],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' }
            ]
          }
        ]
      }

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>

<style>
</style>

参考：获取 Apache ECharts

图表容器大小

如上例所示，在定义 <div> 节点的时候，通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小（推荐）。也可以通过配置 option.width 或 option.height 将其覆盖。

响应容器大小的变化

可以监听页面的 window.onresize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小。

该方法仅在窗口大小改变时，才会触发 resize，具有一定的局限性。

样式

颜色主题

系统除了默认外，内置了 dark 主题，在初始化时，传入的第二个参数即为主题的名称。

1	var chart = echarts.init(dom, 'dark');

自动注册和加载主题

// 假设主题名称是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {
  echarts.registerTheme('vintage', JSON.parse(themeJSON));
  var chart = echarts.init(dom, 'vintage');
});

调色盘

可以在 option.color 中设置全局调色盘，color 是一个颜色数组，也可以在 series 中单独设置调色盘颜色。

直接样式设置

直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中，很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

数据集

数据集（dataset）是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持 数据集 开始，更推荐使用 数据集 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

本文未完待续...