vue-echarts的基本使用
1.安装echarts
yarn add echarts
2.安装vue-echarts
yarn add vue-echarts
如果是在vue2下使用 需要安装 @vue/composition-api
3.全局导入
4.在vue文件中引入vChart组件
5.使用v-chart
echarts配置项
1.legend 图例组件
1.orient:'horizontal', //布局朝向 可选：horizontal vertical
2.top:'center',//图例组件离容器上侧的距离 可选：'自定义','top','middle', 'bottom'
3.left:'center',//图例组件离容器左侧的距离 可选：'自定义','center','left','right'
4.width //图例组件的宽度
5.height //图里组件的高度
6.itemWidth //图例组件的标记的宽度
7.itemHeight //图例组件的标记的高度
8.itemStyle //图里组件的图例样式
2. grid 直角坐标系内绘图网格
单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴
1.show 是否显示
2.left //grid 组件离容器左侧的距离
3.top //grid 组件离容器上方的距离
2.right //grid 组件离容器右侧的距离
2.bottom //grid 组件离容器下方的距离
3. yAxis 直角坐标系grid中的y轴
1.alginTicks //Boolean 在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效。
2.position //y 轴的位置。 'left' 'right'
3.type //坐标轴类型
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 [series.data] 或 [dataset.source] 中取，或者可通过 [yAxis.data]设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。、
4.name //坐标轴名称
5.nameLocation //坐标轴名称显示位置 'start' 'middle'` 或者 'center' 'end'
6.nameTextStyle //坐标轴名称的文字样式。 可以设置color fonyStyle fontSize ...
7.nameGap //坐标轴名称与轴线之间的距离。
8.nameRotate //坐标轴名字旋转，角度值。
9.inverse //是否反向坐标轴
10.boundaryGap //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
类目轴中 `boundaryGap` 可以配置为 `true` 和 `false`。默认为 `true`，这时候[刻度]只是作为分隔线，标签和数据点都会在两个[刻度]之间的带(band)中间。
非类目轴，包括时间，数值，对数轴，`boundaryGap`是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 [min] 和 [max]后无效
示例 --- boundaryGap: ['20%', '20%']
11.min 坐标轴刻度最小值。
12.max 坐标轴刻度最大值
13.scale 只在数值轴中（[type]: 'value'）有效。
是否是脱离 0 值比例。设置成 `true` 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
在设置 [min] 和 [max] 之后该配置项无效。
14.splitNumber
坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
在类目轴中无效。
15.minInterval
自动计算的坐标轴最小间隔大小。
例如可以设置成`1`保证坐标轴分割刻度显示成整数。
16.*axisLine //坐标轴轴线相关设置。
17.*axisTick //坐标轴刻度相关设置。
19.*axisLabel //坐标轴刻度标签的相关设置。
20.*splitLine //坐标轴在 [grid] 区域中的分隔线。相关设置
21.*data //类目数据，在类目轴（[type]: `'category'`）中有效。
如果没有设置 [type]，但是设置了 `axis.data`，则认为 `type` 是 'category'。
4.xAxis 直角坐标系grid中的x轴
同y轴
5.series
1.type //图的类型 ~ line bar pie radar ....
2.name //系列名称，用于[tooltip]的显示，[legend] 的图例筛选，在 `setOption` 更新数据和配置项时用于指定对应的系列。
3.*label //文本标签，可用于说明图形的一些数据信息，比如值，名称等。
4.*labelLine 标签的视觉引导线配置。
5.*itemStyle //图形样式
6.data 系列中的数据内容数组。数组项通常为具体的数据项
7.position //label的位置 支持：`top` / `left` / `right` / `bottom` / `inside` / `insideLeft` / `insideRight` / `insideTop` / `insideBottom` / `insideTopLeft` / `insideBottomLeft` / `insideTopRight` / `insideBottomRight`。
6.color 全局样式
调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
本文仅大致记录 详细用法见官网 -> echarts
