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:'{value}mm/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" height="350px" style="width: 100%" trigger="click">
    
        <div class="chart-title">频谱图 ( 最大值：<span class="chart-max">{{spectrogramMax}}平均值：<span class="chart-min">{{spectrogramAverage}} ) 

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

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">

• 项目中按需引入插件

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:'{value}mm/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}}
},

效果图如下

小结

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

最后

关注公众号【前端每日技巧】，写作不易，希望能点赞👍️加收藏❤️和转发。