echarts的基础知识和配置项-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts的基础知识和配置项。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

异步数据加载和更新

ECharts 中在异步更新数据的时候需要通过series的name属性对应到相应的系列，如果没有name，series就会根据数组的顺序索引，把数据跟前面的配置对应上

loading动画

如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。

ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

如果不调用hideLoading 方法，那么这个loading图标就会一直显示在echart实例上

在图表中加入交互组件

数据区域缩放组件dataZoom。

option = {
    ...,
    dataZoom: [
        {   // 这个dataZoom组件，默认控制x轴。
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
        },
        {   // 这个dataZoom组件，也控制x轴。
            type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
        }
    ],
    ...
}

如果dataZoom只配置一个slider或者inside，那么就是默认控制x轴的。如果有两个以上，则要写上索引，如下所示。

option = {
    ...,
    dataZoom: [
        {
            type: 'slider',
            xAxisIndex: 0,
            start: 10,
            end: 60
        },
    ]
}

数据可视化

数据可视化是数据到 视觉元素 的映射过程。

echarts使用visualMap 组件来提供通用的视觉映射。visualMap组件可以使用的视觉元素有：

图形类别(symbol)
图形大小(symbolSize)
颜色(color)
透明度(opacity)
颜色透明度(colorAlpha)
颜色明暗度(colorLightness)
颜色饱和度(colorSaturation)
色调(colorHue)

在图表中，把 value 的前一两个维度进行映射，取第二个维度映射到y轴。其它维度需要借助 visualMap。比如气泡图(scatter) 使用半径表示第三个维度。

visualMap 组件

visualMap 组件定义了把数据的『哪个维度』映射到『什么视觉元素上』。

现在提供如下两种类型的visualMap组件，通过 visualMap.type 来区分。定义如下：

option = {
    visualMap: [ // 可以同时定义多个 visualMap 组件。
        { // 第一个 visualMap 组件
            type: 'continuous', // 定义为连续型 visualMap
            ...
        },
        { // 第二个 visualMap 组件
            type: 'piecewise', // 定义为分段型 visualMap
            ...
        }
    ],
    ...
};

分段型视觉映射组件(piecewise)

连续型数据平均分段: 依据 visualMap-piecewise.splitNumber 来自动平均分割成若干块。
连续型数据自定义分段: 依据 visualMap-piecewise.pieces 来定义每块范围。
离散数据（类别性数据）: 类别定义在 visualMap-piecewise.categories 中。

视觉映射方式的配置

legend 图例组件

selected:初始化图例选中的状态表
```
selected: {
    // 选中'系列1'
    '系列1name': true,
    // 不选中'系列2'
    '系列2name': false
}
```
这个系列1、系列2。就是data的name,没有选中默认就是灰色的，并且也不会在图表中显示。
align: 默认left,当组件的left的值为right和纵向布局时为右对齐，极为right
padding: 默认为5

可以理解为图例组件的内边距，根据实测，只有上和左方向的padding有效。
selectedMode: 默认true，控制是否可以通过图例改变系列的显示状态。
inactiveColor: 图例关闭时候的颜色，默认是#ccc灰色。
textStyle: 图例公用的文本样式
tooltip：图例的提示，默认关闭，只能提示图例的名称。
icon: 图例项的icon，有图片还有其他几种形状。
data：默认中series中去取，图例按照这个data的顺序渲染。
backgroundColor：图例区域的背景色，默认透明
selector: 图例组件的选择器按钮，目前包括全选和反选两种功能。默认不开启。
selectorLabel:选择器按钮的文本标签样式

grid 直角坐标系内绘图网格

其实就是一个框，在框的方位内绘制直角坐标系.就是一个echarts实例内能定义许多个这样的框，然后再在这个框内画x轴和y轴。可以是数组也可以是对象，如果是只有一个就定义为对象，如果有若干个就定义为数组。

xAxis

直角坐标系grid中的x轴，一般情况下单个 grid 组件最多只能放上上下两个x轴，多于两个x轴需要配置 offset 属性防止同个位置的多个 x 轴重叠。

gridIndex x轴所在 grid 的索引。默认是0，如果需要画超过一个grid，则需要指定缩影，不然定义再多个x轴都会被画在第一个grid上。
position 可选top或者bottom。如果只定义了一条x轴的话，默认是在下方。定义第二条轴的时候不指定的话会根据第一条轴的位置选定在另外一侧。
offset x轴相对默认位置的偏移，在相同的position上有多个X轴的时候才有用。单位应该是px像素。为正值时会往屏幕上方偏移，为负值时会往屏幕下方偏移。但不会改变y轴的0起始点。y轴的0起始点仍然在grid的左下角开始的位置。
realtimeSort 动态排序柱图。设为true时，表示X轴开启实时排序效果，仅当 X 轴的 type 是 value时有效。那么Y轴的数据的位置就不会按Y轴的data数组的顺序渲染，而是看那个y轴对应的x轴数据大而渲染在上方，如果y轴开启了inverse,那么x轴数据大的对应的y轴坐标会渲染在下方。
sortSeriesIndex 动态排序柱状图用于排序系列的id。目前只支持一个系列的柱状图排序效果，所以这个值只能取0.仅当 X 轴 realtimeSort 为 true 并且 type 时 value 时有效
type 坐标轴的类型，可选值
- value 数值轴，适用于连续数据
- category 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或者 dataset.source 中获取，也可以通过 xAxis.data 设置类目数据
- time 时间轴，用于连续的时序数据，与数值轴相比时间轴带有事件的格式化，在刻度计算上也有所不同。会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
- log 对数轴。适用于对数数据。
name 坐标轴的名称，至多只有一个方向上的坐标轴（x轴或者y轴可以建立多个轴），后面建立的超过一个以上的坐标轴会影响到前面先建立的另一种类的坐标轴导致渲染不正常。
nameGap 坐标轴名称与轴线之间的距离。默认15px。可以离开grid的
nameRotate 旋转坐标轴名字
inverse 是否反向坐标轴，默认false。反向后，第一根x轴永远会在第一根y轴在0点相交。
boundaryGap 坐标轴两边的留白策略，类目轴(category)和非类目轴的设置和表现不一样。

在类目轴中默认是true，false可以让柱子在x轴的刻度的中间。
min 坐标轴刻度的最小值

可以设置成特殊值 dataMin ，此时取数据在该轴上的最小值作为最小刻度

不设置是会自动计算最小值保证坐标轴刻度的均匀分布。

在类目轴中可以设置序数（如[‘类A’、‘类b’、‘类c’]），序数2和-3表示从类c开始渲染，实际上就只会渲染类c这一个数据.实际上写负数只会不停的在最小值刻度前面加刻度，所以最好不要写负数

当设置成函数时，可以根据计算得出数据最大最小值设定坐标轴的最小值
```
min: function (value) {
    return value.min - 20;
}
```
其中value：{min：多少, max: 多少}，是回调函数传入的一个对象。
scale

只在数值轴中(type: ‘value’)有效。

是否是脱离0值比例。设置成true后坐标刻度不会强制包含0刻度。在双数值轴中的散点图中比较有用。
splitNumber

坐标轴的分割段数，这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后的坐标轴刻度显示的易读性调整。默认值是5

在类目轴中无效。类目轴是有几个就显示几个
minInterval

自动计算的坐标轴最小间隔大小。

例如可以设置成1保证坐标轴分割刻度显示成整数
```
{
    minInterval: 1
}
```
只在数值轴或时间轴中（type: ‘value’ 或 ‘time’）有效。
maxInterval

自动计算的坐标轴最大间隔大小。

例如，在时间轴（（type: ‘time’））可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。
```
{
    maxInterval: 3600 * 24 * 1000
}
```
只在数值轴或时间轴中（type: ‘value’ 或 ‘time’）有效。
interval

强制设置坐标轴分割间隔

tooltip

tooltip不支持rich，formatter返回的是html片段，可以在这个返回的片段里面增加类名。以达到更改tooltip文字格式的效果。

tooltip同样不支持lineHeight。一般情况下只设置padding的值，而不用设置lineHeight。

trigger

触发类型。有item和axis；item是鼠标要在这个数据项的图形上才能触发，实测在折线图中这种触发方式触发不了。axis看意思是只要你在坐标轴该数据范围内就会触发对应的tooltip。在没有坐标轴的图形中写axis会导致tooltip触发不了。
triggerOn

触发条件，有mousemove和click，在鼠标移入或则单机的时候触发。
- axisPointer
  
  坐标轴指示器配置项。有直线指示器，阴影指示器，十字准星指示器
- axis
  
  指示器显示的坐标轴，默认会显示在类目轴或者时间轴。
- snap
  
  是否自动吸附到点上

axisPointer坐标轴指示器

坐标轴指示器是指示坐标轴当前刻度的工具。

写在最外面的是坐标轴指示器（axisPointer）的全局公用设置。而不是配置坐标轴指示器。坐标轴指示器需要在轴上或者tooltip上配置。

echarts的基础知识和配置项

应该是tooltip的坐标轴指示器。黑色部分显示的是axisPointer的label。

优先级：轴上的axisPointer（例如 xAxis.axisPointer） > tooltip配置的axisPointer > 最外面配置的axisPointer

type：有线和阴影两种。线有lineStyle可以设置直线和虚线

可以使用：在加上x轴上的配置就可以和y轴联动。文章来源地址https://www.toymoban.com/news/detail-509087.html

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'cross'
    },
}

series

label、itemStyle和emphasis状态可以换着写，但是select状态不可以。
可以通过-200%的bargap让柱子或者极坐标图换一个方向

到了这里，关于echarts的基础知识和配置项的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！