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

基本使用

配置项的写法与位置

配置项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: '',
]}；