ECharts的配置

ECharts的配置(一)

一.配置的五部曲

二.tooltip---------提示框组件

作用:图表的****提示框组件****

1.trigger:‘axis’ //触发方式,axis坐标轴

三.legend---------图例组件

作用:*图例组件*

四.toolbox---------工具箱组件

作用:*让图表可以下载成图片*

五.grid---------网格配置

下方是dom容器的大小

属性：

1.containLabel,是否显示刻度标签,true为显示。

2.left---------------->控制大小

3.right-------------->控制大小

4.bottom----------->控制大小

六.xAxis---------x轴的配置

作用:设置x轴的相关配置

属性:

1.type:‘category’ || ‘value’ 控制柱子的横竖显示

2.boundaryGap:true || false 是否让我们的线条和坐标轴有缝隙

3.data x轴的数据

y轴也上一样

七.series---------系列图表配置,决定显示那种类型的图表

是一个数组,数组中有若干个对象,也对应着五条线,每一个对象决定着一条线。

1.stack----数据堆叠 数组里面的数字会进行相加

2.data ---------------每条线数据

3.type---------------线条类型

4.series 里面有了name值则legend里面的data可以删掉

八.color---------颜色

作用:设置线条的颜色,后面是一个数组

九.title--------------标题

作用:设置图标的标题

十.总结

Echarts配置(二)

如果让你去配置Echarts你会如何进行配置,前几天我们熟悉了一些属性。比如一些grid，网格，legend图例，tootip提升组件，x轴,y轴,标题title，series单独去配置图表里面的没一条线等,剩下我们的都是基本靠文档进行配置:

项目的地址:echarts公开课: 可视化面板案例以及笔记

地址:Apache ECharts

点进去可以看见：

我们今天要配置的是

从网上找的资源，如冒犯联系删除。

一.图1的配置信息从左边第一个开始

还是之前的五个步骤

1.导入Echarts

2.给盒子设置大小

3.获取到真是dom

4.配置信息

5.实例化

这里面最主要的是配置信息了,所以今天主要讲解配置信息。

1.color—修改图表柱形颜色

2.修改图表的大小

3.修改x轴的文字大小

4.不显示x坐标轴的颜色

5.y轴细条样式+宽度

6.Y+X轴的分割线的样式修改

7.修改柱形为圆角以及柱子宽度 series里面设置

(1)barwidth+++++++++++柱子的宽度

(2)barBorderRadius------------圆角

8.悬浮到柱子上是影子还是直线

9.series和xAxis轴上的data显示不同

(1)series对应的是真是显示的数据

(2)xAxis对应的是相关的文字信息

在开发中series中的data是动态通过ajax获取来的,数据会随时发生变化的。

二.图2

1.不显示X轴的相关信息

2.去除刻度和线条

3.修改刻度标签的文字颜色

​

4.给每个柱子设置不同的颜色

(1)颜色和索引相互对应

(2)params代表每个柱子的信息

5.社区

1. 地址1: https://www.isqqw.com/#/homepage
2. 地址2：http://www.ppchart.com/#/

三.图3

1.去除线条数

2.修改图例组件中的文字颜色---------textStyle

3.删除保存图片

4.xAxis的配置

5.Y轴的配置

修改y轴分割线的颜色

6.series里面配置

(1)color更改每条线条的颜色

(2)将折线为圆滑添加smooth为true

7.数据更换