Echarts常用折线和频谱以及三维散点图 _echarts

一箫一剑平生意，负尽狂名十五年。这篇文章主要讲述Echarts常用折线和频谱以及三维散点图相关的知识，希望能为你提供帮助。
1 折线图

鼠标放在点上时显示的数据效果，在代码中用到的就是??tooltip???这个参数，其中??show???的默认值是??true???，可以省略，当我们不想显示悬浮提示效果，将show修改为??false??。
??trigger??设置这个参数，效果是可以看到一个竖直的虚线，不添加则不显示。
??backgroundColor??效果是显示数据的弹窗对应的背景色，需要什么颜色自行设置。
??extraCssText??可以设置弹窗显示的阴影效果。

配置项的全部代码

options:
title:
,
// 悬浮提示
tooltip:
show: true,
trigger: axis,
backgroundColor: #fff,
textStyle:color: #4B9BFB ,
extraCssText: box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);
,
xAxis:
// name: 1/50mm/s,
type: category,
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
itemStyle:
show: false

,
yAxis:
type: value,
name: 单位：mm/s,
axisLine:
show:true,
,
// 给y轴添加单位
// axisLabel:formatter:valuemm/s
,
series: [
// name: 数据,
showSymbol: true,//是否默认展示圆点
symbol: circle,//设定为实心点
data: [0, -245, -496, -519, -543, -479, 794, -237, -568, -514, -372, -115, -664, -745, -468, -683, -732, -208, -506, -564, -376, -537, -198, -583, -65, -465, -677, -483, -546, -422, 0, -669, -193, -657, -910, -705, -627, -630, -553, 273, -468, -807, -642, -345, -51, -609, -705, -111, -423, -462, -498, -486, -563, -332, -565, -499, -339, -428, -498, -239, -319, -409, -546, -474, -481],
color: "#4786FF",
symbolSize: 6,
type: line,
lineStyle:
width: 1,
color: #4786FF,

],
dataZoom: [

show: true,
realtime: true,
start: 0,
end: 100,
height: 8, //组件高度
left: 30, //左边的距离
right: 30, //右边的距离
bottom: 0, //右边的距离
handleColor: #D3DCFD, //h滑动图标的颜色
handleStyle:
borderColor: #D3DCFD,
borderWidth: 1,
shadowBlur: 2,
background: #D3DCFD,
shadowColor: #D3DCFD,
,
backgroundColor: #f4f7f9, //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息默认true
// xAxisIndex: [0]
,

type: inside,
realtime: true,
start: 0,
end: 5,
,
],
backgroundColor: #fff

效果图如下

总结
数据可以自定义修改，想看效果图，可以将代码直接复制代码到echarts的案例左侧，然后将??option???后面的??:???修改为??=??就可以了。
2 频谱图

【Echarts常用折线和频谱以及三维散点图】

Dom中我们需要写入对应的标签,如果需要轮播效果，我们可以采用??el-carousel???标签来实现，轮播图显示的个数由??el-carousel-item??标签数量决定。

< el-carousel el-carousel @change="onChange" :autoplay="false"style="width: 100%" trigger="click">
< el-carousel-item >
< div class="chart-title"> 频谱图& nbsp; (& nbsp; < span> 最大值：< /span> < span class="chart-max"> spectrogramMax< /span> < span> 平均值：< /span> < span class="chart-min"> spectrogramAverage< /span> & nbsp; )& nbsp; < /div>
< IEcharts style="width: 850px; height: 320px; " :option="barOptions" ref="spectChart"> < /IEcharts>
< /el-carousel-item>
< /el-carousel>

需要引入什么插件，我们按需引入就行

import IEcharts from vue-echarts-v3;
import echarts/lib/chart/line;
import echarts/lib/component/dataZoom;
import echarts/lib/chart/line;
import echarts/lib/component/tooltip;

下面是频谱图的核心代码，类似于echarts中options的内容

??start???和??end??用来控制缩放的比例位置。
??backgroundColor??用来设置未缩放位置的颜色。
??showDetail???用来设置拖拽时候是否显示详细数值信息，默认值??true??。

dataZoom: [
show: true,
realtime: true,
start: 0,
end: 55, //控制两个柱形的距离
height: 8, //组件高度
left: 30, //左边的距离
right: 30, //右边的距离
bottom: 0, //右边的距离
]

参数解释

x轴的数据就放在xAxis中的??data??中。
我们可以在data的每个成员之间加入????, 来增加间隔距离。
type可以设置为??category??
??axisLabel??用来设置x轴数据之间的距离
当x轴的文字描述太长显示不全时，我们可以使用??rotate??来设置倾斜的角度。
频谱图可以设置??legend???的data为??[pictorialBar, bar]??。
??lineStyle???可以设置线的一些样式，所用到的属性有??color???, ??width???, ??opacity???, ??type??，其中type可以设置为虚线、实线。
坐标中刻度的显示可以通过设置??axisTick???中的??show???参数来实现，??false???为不显示对应的刻度，??true??表示显示对应的刻度。

全部的配置代码如下：

barOptions:
legend:
data: [pictorialBar, bar]
,
tooltip:
show: true,
trigger: axis,
backgroundColor: #fff,
textStyle:color: #4B9BFB ,
extraCssText: box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);
,
xAxis:
type: category,
// data: [20, 30],
data: [20Hz, , 46Hz, , 69Hz, , 105Hz, , 160Hz, , 244Hz, , 371Hz, , 565Hz, , 859Hz, , 1.30KHz, , 1.98KHz, , 3.02KHz, , 4.60KHz, , 7.00KHz, , 10.6KHz, , 20KHz],
axisTick:
show: false,
alignWithLabel: true
,
axisLabel:
rotate:40,
margin: 10 //x轴数据距离x轴的距离
,
,
yAxis:
// splitLine: show: false,
type: value,
axisLine:
show: true, //---是否显示
,
axisLabel:
interval: 0,
margin: 10, //y轴数据距离y轴的距离

,
axisTick:
show: false, //显示每个值对应的刻度
,
nameGap: 10,
splitLine://---grid 区域中的分隔线
show: true, //---是否显示，category类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
lineStyle:
color: #DADADA,
width: 1,
opacity: 0.57,
type: dashed, //---类型
,
,
,
// animationEasing: elasticOut,
series: [
type: pictorialBar,
symbol: bar,
data: [
value: 65,
symbolRepeat: true,
symbolSize: [20, 10],
symbolMargin: 4,
,
value: 65,
symbolRepeat: true,
symbolSize: [20, 10],
symbolMargin: 4,
],
itemStyle:
color: #2C90F1
,
],
dataZoom: [
show: true,
realtime: true,
start: 0,
end: 55, //控制两个柱形的距离
height: 8, //组件高度
left: 30, //左边的距离
right: 30, //右边的距离
bottom: 0, //右边的距离
handleColor: #D3DCFD, //h滑动图标的颜色
handleStyle:
borderColor: #D3DCFD,
borderWidth: 1,
shadowBlur: 2,
background: #D3DCFD,
shadowColor: #D3DCFD,
,
backgroundColor: #f4f7f9, //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息默认true
//xAxisIndex: [0, 1] //这行代码会__dzAxisProxy报错
,

type: inside,
realtime: true,
start: 0,
end: 10,
,
],
itemStyle:normal:label:show: true
,

频谱图的效果如下：

使用方法
如果想要看效果图，可以直接去echarts官网，将上面的代码复制到echarts案例上，只需要将??barOptions:???修改成??option=??就可以了。

3 三维散点分布图参数解释

三维散点图需要我们引入两个插件??echarts 4.9.0??? 对应的??echarts-gl 1.1.2??。
需要注意的是，两个插件版本不一致会导致三维散点分布图无法显示。
涉及的参数有??xAxis3D???, ??yAxis3D???,??zAxis3D???以及??grid3D??。
涉及调节宽高的参数??boxWidth???,??boxHeight???,??boxDepth???,??top??。
每个坐标系下面的name对应的是显示的坐标名。
显示的点都放在series的??data??中。

全部配置代码

option =
tooltip: ,
xAxis3D:
name: "x",//x轴显示为x
type: value,
// min: dataMin,//获取数据中的最值
// max: dataMax
min: 0,
max: 80,
interval: 20,//坐标轴刻度标签的显示间隔，在类目轴中有效
axisTick:
show: false, //显示每个值对应的刻度
,
axisLine://x轴坐标轴，false为隐藏，true为显示
show: true
,
axisLabel:
show: false////是否显示刻度 (刻度上的数字，或者类目)， false为隐藏，true为显示
,
itemStyle:
borderColor: "#fff",
backgroundColor: "#fff"
,
,
yAxis3D:
name: "y",//y轴显示为y
type: value,
splitNumber: 5,
axisTick:
show: false, //显示每个值对应的刻度
,
min: 0,
max: 360,
interval: 90
,
zAxis3D:
name: "z",//z轴显示为z
type: value,
min: -20,
max: 60,
interval: 20,
axisTick:
show: false, //显示每个值对应的刻度
,
,
grid3D:
axisLine:
lineStyle://坐标轴样式
color:#070707,//轴线颜色
opacity:.8,//(单个刻度不会受影响)
width: 1//线条宽度

,
axisPointer:
lineStyle:
color: #f00//坐标轴指示线
,
show: false//不坐标轴指示线
,
viewControl:
// autoRotate: true,//旋转展示
// projection: orthographic
// beta:0,
distance:230, //与视角的距离，值越大，图离视角越远，图越小
alpha:7, //绕x轴旋转的角度（上下旋转），增大，视角顺时针增大（向上）
beta:20, //绕y轴旋转的角度（左右旋转），增大，视角逆时针增大（向右）
center:[-15,-5,-20]//第一个参数：增大，视角沿x轴正方向水平右移动（图向左）；第二个参数：增大，视角沿y轴正方向垂直向上移动（图向下）；第三个参数：增大，视角向z轴正方向移动（图变小）
,
boxWidth: 120,
boxHeight: 70,
boxDepth: 120,
top: -100
,

series: [
type: scatter3D,
dimensions: [x, y, z//悬浮到点时弹出的显示框信息
],
// encode:
// x: [3, 1, 5],// 表示维度 3、1、5 映射到 x 轴。
// y: 1,// 表示维度 2 映射到 y 轴。
// z: 3,
// tooltip:[a,c,b], // 表示维度 3、2、4 会在 tooltip 中显示。
// label: a// 表示 label 使用维度 3。
// ,
data: [
[0, 0, 0],
[1, 0, 0],
[0, 1, 0],
[0, 1, 1],
[21, 24, 25],
[22, 25, 26],
],
symbolSize: 4,//点的大小
// symbol: triangle,
itemStyle:
// borderWidth: 1,
color: "#87f0e5",
// borderColor: rgba(255,255,255,0.8)//边框样式
,
emphasis:
itemStyle:
color: #ccc//高亮

,
// itemStyle:
//color: "#87f0e5"
//
],
backgroundColor: "#e8e8e8"
;

效果图如下

4 折线图和散点图

vue中引入相关的dom代码

< IEchartsstyle="width: 850px; height: 320px; " :option="partialOptions2" ref="partialEchart"> < /IEcharts>

项目中按需引入插件

import echarts/lib/component/dataZoom;
import echarts/lib/chart/line;
import echarts/lib/component/tooltip;

参数解释

坐标系就形成需要定义??xAxis???和??yAxis??。
通过??xAxis???中的??type???和??axisLabel??来设置类型和间隔。
??axisLabel???中的数字是对data的数据进行划分，例如我们设置data为??[0,...,360]??这样一个0到360的数组。
如果??axisLabel???设置为59，那么只会显示??[0, 60, 120, 180, 240, 300, 360]??效果，如图中所示的x轴，同理y轴也可以这样设置。
图中红色的线，我们可以设置??markLine??。
我们可以设置??dataZoom??来控制放缩效果。
散点图的属性使用??scatter??

type: category,
data: [0,...,360], //中间省略了0-360中间的数
axisLabel:
interval:59

我们也可以用另一种方式,??type???设置为??value???，??min???表示最小值，??max???表示最大值，??interval??表示间隔为20，效果如图的y轴所示。

type: value,
min: -20,
max: 60,
interval: 20,

全部配置代码如下

partialOptions2:
title:
,
// 悬浮提示
tooltip:
show: true,
trigger: axis,
backgroundColor: #fff,
textStyle:color: #4B9BFB ,
extraCssText: box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);
,
xAxis:
// name: 1/50mm/s,
type: category,
// type: value,
data: [],
itemStyle:
show: false
,
axisTick:
show: false,
alignWithLabel: true
,
// 让起点从x轴0开始，左侧不留白
boundaryGap: false,
// min:0,
// max: 360,
// interval: 60
axisLabel:
// minInterval: 0,
// maxInterval: 360,
interval:59

,
yAxis:
type: value,
// name: 单位：dBmV,
min: -20,
max: 60,
interval: 20,
axisLine:
show:true,
,
// 给y轴添加单位
// axisLabel:formatter:valuemm/s
,
series: [
// name: 数据,
showSymbol: true,//是否默认展示圆点
symbol: circle,//设定为实心点
data: [[0,20], [100,58], [200, 0],[260, -20], [360, 20]],
// data: [0, 20, 58, -20, 20],
color: "#49d86b",
symbolSize: 1,
type: line,
smooth: true,
// 设置折线图的颜色
normal:
color: "#49d86b", //改变折线点的颜色
,
// lineStyle:
//width: 1,
//color: red,
// ,
// type: line,
,

// name: 数据,
showSymbol: true,//是否默认展示圆点
symbol: circle,//设定为实心点
symbolSize: 2,
data: [],
color: "#3dcbdb",
// symbolSize: 6,
type: scatter,
// 设置折线图的颜色
// normal:
//color: "#1F824E", //改变折线点的颜色
// ,
// lineStyle:
//width: 1,
//color: red,
// ,
// type: line,
,
// y轴设置的直线

type: "line", //如果将 markLine 单独写在一个对象里，就必须加 type ，不然报错。
markLine:
symbol: "none", //相当于["none", "none"] [虚线，没有箭头]
data: [
yAxis: 0, //控制y轴横线的值
silent: true, // true 不响应鼠标事件
],
label:
// position:"end", //将警示值放在哪个位置，三个值“start”,"middle","end"开始中点结束
// fontSize: 14,
// formatter: function ()
//return "17"
//
// formatter: "0"
,
lineStyle:
color: "#ec3d35",
width: 2,
type: "solid", //实线，不写默认虚线
,

],
dataZoom: [

show: true,
realtime: true,
start: 0,
// end: 5,
end: 100,
height: 8, //组件高度
left: 30, //左边的距离
right: 30, //右边的距离
bottom: 0, //右边的距离
handleColor: #D3DCFD, //h滑动图标的颜色
handleStyle: n
borderColor: #D3DCFD,
borderWidth: 1,
shadowBlur: 2,
background: #D3DCFD,
shadowColor: #D3DCFD,
,
backgroundColor: #f4f7f9, //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息默认true
// xAxisIndex: [0]
,

type: inside,
realtime: true,
start: 0,
end: 5,
,
],
itemStyle :normal: label : show: true
,