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

Posted 2022-03-08 qq59c60c7350339

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 频谱图

• 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代码

<IEcharts  style="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
,

效果图如下

小结

新知识需要我们不断的去探索，遇到问题时，我们不仅要去解决，更要学习别人的思路，懂得举一反三，才能将别人的知识变成自己的。了解完这些知识后，可以再去找几个案例自己手动实现来加深巩固。

最后

关注公众号【前端每日技巧】，写作不易，希望能点赞