echarts图表开发中遇到的问题总结。比如：设置断点，legend换行，x轴固定值以及修改样式

echarts 遇到的问题总结：

1:散点图和折线图结合如何设置x轴的坐标是折线图的坐标，并且散点图的数据也跟着折线图的X轴进行变动 （数据为动态数据）

// 数据格式
 const data = [
        {
          updatetime: '2:00',
          maxPower: 12,
          minPower: 2,
          maxLoad: 34,
          minLoad: 17,
          sameMaxLoad: 4,
          sameMinLoad: 1
        },
        {
          updatetime: '4:00',
          maxPower: 14,
          minPower: 4,
          maxLoad: 3,
          minLoad: 7,
          sameMaxLoad: 4,
          sameMinLoad: 1
        }
      ]
      

把数据格式转成散点图和折线图对应的data的数据

散点图需要的是[2,18]这样一个数组组合而成的 注意散点图的每一个数组的第一个参数是不能为时间的，需要把事件截取“:”前面的数据，还有这个数据可以是字符串也可以是number

折线图需要的是时间和对应的数据，结构是这样[2:00,3]

散点图和折线图的区别就是每一个数组的第一个参数不同：一个是时间，一个是数字

设置x轴的type:type有以下几种类型

1：‘value’ 数值轴，适用于连续数据。

2：‘category’ 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
3：‘time’ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
4：‘log’ 对数轴。适用于对数数据。

//echarts里面具体的代码
  xAxis: [
              {
                type: 'category',
                name: '时间',
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: true, // 坐标轴轴线。
                  lineStyle: {
                    color: '#237dc1'
                  }
                },
                data: this.xAxis
              },
 // 写两个x轴，让第二个x轴隐藏，这个x轴是散点图的X轴，type设置成category，如果设置成value的，那散点图的位置和X轴时间对应的位置是不对应的             
              {
                type: 'category',
                max: this.xAxis[1000],
                show: false
              }
            ]

接下来是具体的折线和散点的series 重点在将散点图的X轴设置成第二个x轴：xAxisIndex: 1

散点和折线图的每一个data我绑的是props里面的data,因为这是个组件，最终要嵌入到父组件内，大家根据自己的需求来改动

 series: [
              {
                type: 'scatter',
                name: '散点图',
                symbolSize: 8, // 标记的大小
                symbol: 'rect',
                itemStyle: {
                  // 图形样式
                  color: '#f9e551'
                },
                data: this.maximumLoad,
                xAxisIndex: 1
              },                         
              {
                name: '折线图',
                type: 'line',
                showSymbol: false,
                smooth: true,
                stack: '次数',
                data: this.lowerLimitLoad,
                // data: [1320, 1132, 601, 234, 120, 90, 20],
                itemStyle: {
                  color: '#75fb4c', // 折线的颜色
                  borderColor: '#FFE618', //拐点的边框颜色
                  borderWidth: 0
                },
                lineStyle: {
                  color: '#75fb4c', // 折线的颜色
                  type: 'dotted' // 折线的类型
                }
              }
            ]

2:如何修改echarts图表中的legend中的icon形状，如果有多条折线或散点图，修改对应的icon 我这是修改成了正方形，使用的是svg的path路径实现的

legend可以设置宽度，设置位置，文本颜色等等参数

在data初始化数据的时候加了一个参数，是张svg图

代码实现

 data() {
    return {
      rectSvg: 'path://M-0.000,-0.000 L10.000,-0.000 L10.000,10.000 L-0.000,10.000 L-0.000,-0.000 Z' //柱状图横轴
    }
  }
  // 这个是option中的
legend: {
            data: [
            { name: '最大负荷', icon: this.rectSvg },
            { name: '最小负荷', icon: this.rectSvg },
            { name: '最大关口功率' },
            { name: '最小关口功率' },
            { name: '去年同期同一天负荷的上限' },
            { name: '去年同期同一天负荷的下限' }
          ],
              right: '22%',
              width: '60%',
              textStyle: {
                color: '#fff'
              }
            },

3:如何修改echarts图表中的tooltip中的icon形状，如果有多条折线或散点图，修改对应的icon 我是把最大负荷最小负荷设置成了正方形，别的设置成圆形 利用的是formatter： 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

我这里面做了判断，如果tooltip的全部都用同一个icon不需要做判断，直接给div设置样式就可以了

  tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                show: true
              },
              formatter: params => {
                // 获取xAxis data中的数据
                let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
                params.forEach(item => {
                  if (item.seriesName === '最小负荷' || item.seriesName === '最大负荷') {
                    dataStr += `<div>
                    <div style="margin: 0 8px;">
                      <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
                      <span>${item.seriesName}</span>
                      <span style="float:right;color:#000000;margin-left:20px;">${item.data[1]}</span>
                    </div>
                  </div>`
                  } else {
                    dataStr += `<div>
                    <div style="margin: 0 8px;">
                      <span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:10px;background-color:${
                        item.color
                      };"></span>
                      <span>${item.seriesName}</span>
                      <span style="float:right;color:#000000;margin-left:20px;">${
                        item.seriesName === '去年同期同一天负荷的上限' ||
                        item.seriesName === '去年同期同一天负荷的下限'
                          ? item.data
                          : item.data[1]
                      }</span>
                    </div>
                  </div>`
                  }
                })
                return dataStr
              }
            },

4:如何修改echarts图表中折线图的拐点，不显示拐点这个icon

如图，我是把这个拐点的圈给去掉了

showSymbol： 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。

具体代码如下：

{
                name: '折线图',
                type: 'line',
                showSymbol: false,
                smooth: true,
                stack: '次数',
                data: this.upperLimitLoad,
                itemStyle: {
                  color: '#fbe651', // 每一个点
                  borderColor: '#FFE618', //拐点的边框颜色
                },
                lineStyle: {
                  color: '#fbe651', // 折线的颜色
                  type: 'dotted' // 折线的类型
                }
              },

5:echarts 线图图例去掉圆圈

单独设置某一条折线形状 设置itemStyle的opacity的值为0即可

 legend: {
              data: [
                { name: '去年同期同一天负荷的上限', itemStyle: { opacity: 0 } },
                { name: '去年同期同一天负荷的下限', itemStyle: { opacity: 0 } }
              ],
              right: '22%',
              width: '60%',
              textStyle: {
                color: '#fff'
              }
            },

6:echarts图标设置legend换行

实现思路：legend设置成数组，来进行换行，注意需要给数组的每一项都设置样式。
具体代码如下：

legend: [
              {
                x: 'center',
                data: [
                  { name: '最大负荷', icon: this.rectSvg },
                  { name: '最小负荷', icon: this.rectSvg },
                  { name: '最大关口功率' },
                  { name: '最小关口功率' }
                ],
                left: 'center', //设置legend居中
                width: '442',
                itemGap: 31, //每一个item之间的间距
                textStyle: {
                  color: '#fff',
                  padding: [5, 0, 2, 0],//设置图标和文字居中
                  rich: {
                    a: {
                      verticalAlign: 'middle' //设置图标和文字居中
                    }
                  }
                }
              },
              {
                x: 'center',
                top: '7%',
                data: [
                
                  { name: '去年同期同一天负荷的上限', itemStyle: { opacity: 0 } },
                  { name: '去年同期同一天负荷的下限', itemStyle: { opacity: 0 } }
                ],
                left: 'center',
                width: '442',
                itemGap: 88, //每一个item之间的间距
                textStyle: {
                  color: '#fff',
                  padding: [5, 0, 2, 0],
                  rich: {
                    a: {
                      verticalAlign: 'middle'
                    }
                  }
                }
              }

            ],

7:echarts折线图如何设置断点

如图上圈出来的那两部分，是未连接的断点

具体实现思路就是将圈出来的这些后台返的数据是0或者是undifined以及null的点，替换成’-‘,这样这些没数据的点就会形成断点，具体代码如下：

如果你是后端返的数据需要自己去遍历处理一下，做个判断，如果是0或者是undifined以及null的点，替换成’-‘即可，既可形成 断点。

8:echarts图表如何固定X轴数据:如图所示

只需将X轴的配置文件加上max: 和splitNumber

#####1：splitNumber：坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
#####2：max：坐标轴刻度最大值。可以设置成特殊值 ‘dataMax’，此时取数据在该轴上的最大值作为最大刻度。

不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

在类目轴中无效。

我的设置具体代码

xAxis: {
              type: 'value',
              name: '负载率%',
              splitLine: {
                show: false
              },
              axisLine: {
                show: true, // 坐标轴轴线。
                lineStyle: {
                  color: '#237dc1'
                }
              },
              max: 100,
              splitNumber: 11
},

总结：

第一次做echarts图表，包括了折线图，柱状图，散点图，饼图，还有折线和散点结合的图，柱状和折线结合的图，在这期间遇到了很多问题，不会的时候就扒文档或者百度，其实主要还是经验太少，对文档不够熟悉，所以总结了我在开发过程中遇到的问题，如果有错误，请大家指出，大家一起加油啊，努力学习。

代码007普通

打赏 收藏 海报 链接