ECharts系列：基本使用及配置项

news2024/12/28 3:12:27

基本使用

配置项的写法与位置

配置项option包含属性

各个配置项属性大全

基本使用

在阅读本篇文章时请参考ECharts官网地址中的内容配合了解

首先我们知道ECharts图表中有许多类型，如折线图、柱状图、饼形图等，下面我以折线图为例讲解ECharts图表的基本使用

<!--示例代码-->
<template>
  <div class="main"></div>
</template>
<script>
import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

option && myChart.setOption(option);
</script>

效果如下：

大家可能会有疑问为什么x轴与y轴的type值不同？那么我就交换这个值演示改代码的效果。

// 代码如下，其实就是将type颠倒了
  xAxis: {
    type: 'value',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'category'
  },

所以我们得出结论xAxis与yAxis中的type属性值是呼应的，所以请大家在理解ECharts配置时一定要举一反三。

配置项的写法与位置

位置不同：在了解ECharts的配置项时，有的属性可以在option中全局配置，也可以局部配置。
写法不同：另外配置项有时候是对象，有的时候是数组，也可以是函数。
出现的位置不同代表的含义不同，但是你会发现即使形式或者位置不同但是它使用起来是一样的，下面我就以color为例演示一下

1.全局配置color且为数组类型。

option = {
  /这就是颜色的全局配置，但是如果不配置颜色echart有默认颜色这里不详解就是理解概念/
  color: ['red', 'green']    // 配置颜色会把默认颜色覆盖
}

2.局部配置color

option = {
  title: {
    textStyle: {
      color: 'red'    // 这里代表字体颜色是红色
    }
  }
}

3.对象格式color

color: {    /这里是线性渐变颜色，这里理解即可不做详解/
  type: 'linear',
  x: 1,
  y: 0,
  x2: 0,
  y2: 0,
  colorStops: [{
    offset: 0,
    color: 'rgba(240,47,194,0.7)'// 0%处的颜色
  }, {
    offset: 1,
    color: 'rgba(149,111,212,0.7)' // 100%处的颜色
  }]
}

配置项option包含属性

option = {
  title: {},    //标题，如有副标题可以写成数组
  color: [],    //颜色
  backgroundColor: '',  //背景色
  darkMode: '',  //是否是暗黑模式
  dataZoom: [],    // 
  dataset: [{}],     //数据集合
  toolbox: {},    // 
  tooltip: {},    //提示框
  grid: {},     //图表上下左右距离盒子的距离
  xAxis: {},    //x轴
  yAxis: {},    //y轴
  series: [{
    type: '' //graph关系图，line折线图，bar柱形图，boxplot箱体图等
  }],
  graphic: [],
  baseOption: {},
  legend: {},    //控制图例组件
  calculable: '',
  options: [],
  brush: {},
  animation: true,    //是否开启动画，布尔值
  animationThreshold: 2000,    //
  animationDuration: 1000,    //
  animationEasing: 'cubicOut',    //
  animationDelay: 0,  //初始动画的延迟，支持回调函数
  animationDurationUpdate: 300,  //数据更新动画的时长，支持回调函数
  animationEasingUpdate: 'cubicInOut',  //数据更新动画的缓动效果
  animationDelayUpdate: 0,  //数据更新动画的延迟，支持回调函数
  blendMode: '',  //图形的混合模式
  hoverLayerThreshold: 3000,  /**图形数量阈值**/
  useUTC: false,  //是否使用UTC时间
  options: '',
]}；