echarts配置项理解(echarts的使用)
但是在开发过程中，我发现echarts的文档配置项太多，第一次开发的时候实在是头疼，因为我找不到自己想要的配置项，而且我也不知道有的需求是否会有，所以第一次开发的时候踩了很多坑，当时也求助了很多人，发现有的需求可以通过配置项去实现，有的特殊需求可能需要自己手写
所以就把这个记录记录一下，希望能给同样成长的你带来帮助
安装
npm install echarts --save复制代码
引入
全部引入
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]
}
]
});复制代码也可以使用这种写法
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);复制代码上面的代码会引入所有 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模块。
我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。
配置项
下面没有具体的取值分析，你可以在这里查找到自己所需要的配置项，然后在文档中查找一下
公共配置项：
显示和隐藏：show
标题：title
标题：text
标题样式：textStyle
文字大小：fontSize
副标题：subtext
副标题样式：subtextStyle
文字大小：fontSize
显示与隐藏：show
距盒子左边框：left
距盒子上边框：left
图例：legend
显示和隐藏：show
类型：type
内边距：padding 如果看起来不明显，可以设置border来显示边框再进行设置
边框的颜色： borderColor
边框线宽：borderWidth
height：图例所在的大盒子的高度
是否可以点击图例来进行控制图表中的相关数据的显示和隐藏：selectedMode
图例列表的布局朝向：orient
图例列表的位置控制：
Top
Left
图例的间隔：itemGap
单个图例的宽度：itemWidth
高度：itemHeight
自定义格式化图例文本：formatter 这个比较复杂，根据需求会单独讲一下
位置：grid
距盒子上边框：top
距盒子右边框：right
距盒子下边框：bottom
距盒子左边框：left
x轴：xAxis
X轴代表的内容名称：name
坐标轴的类型：type 有时间、数值、对数等
坐标轴的刻度：axisTick
显示与隐藏：show
刻度线是否与x轴刻度(也就是下图中的mon、tue等)对齐：alignWithLabel
数据：data
坐标轴刻度的相关设置：axisLabel
显示与隐藏：show
字体大小：fontSize
坐标轴刻度标签的显示间隔，在类目轴中有效：interval
y轴：yAxis
显示的位置：position 因为y轴有时候在左边，有时候在右边
坐标轴类型：type
刻度名称：data
分割的段数：splitNumber 要注意有生效条件
坐标轴的最小间隔大小：minInterval
坐标轴当前状态下显示的最大值：max 要注意该属性设置后，你的数据超过了这个值，它的图会向上延伸，但是不会自动适应
坐标轴两边留白(当)：boundaryGap 这个配置项的应用场景我还没遇到，在网上查到一个是坐标轴的数据和边上的文字会重合，如下图，这个时候通过设置该属性进行两边留白。 需要注意的是该属性有生效要求，类目轴和非类目轴的设置和表现形式都不一样。
z轴
图表类型：series
折线图：type: 'line'
数据：data ['11', '12'] 这种数据格式也可以识别，不用再次转换
颜色：color 除了英文的red等颜色识别，可以设置rbg颜色['rgb(51, 148, 246)']
每一项值的标记：symbol 也就是图中描点还是画三角来表示值(实心圆为'circle')
标记的大小：symbolSize
条形图：type: 'bar'
数据：data ['11', '12'] 这种数据格式也可以识别，不用再次转换
以上就是我暂时遇到的配置项，可以满足简单的定制化需求
如果你有其他问题，可以查阅当前分类的文章解决方案
如果你有更好的看法可以在下面留言求助或交流♥️
后续会继续完善和修改
作者：任平生_掘金
链接：https://juejin.cn/post/7032965047525572615