前言: 平常用Echarts图表比较多,在此记录一下,经常遇到的一些问题,方便以后查阅。
在这里插入图片描述

一、多条折线图 y轴数值与实际值不一致的解决方法

如图,在有多条折线图的时候,会出现折线图的实际值与Y轴数值不一致的情况;
解决方法很简单, 删除series:[ ]里的stack属性即可
在这里插入图片描述

二、tooltip提示框–自定义小圆点/formatter分别显示多个数值

一般来说,echarts的tooltip提示框中的小圆点颜色,默认和折线图中折线的颜色保持一致,如果想修改或自定义,使用formatter函数修改params中的 marker属性 即可,marker(小圆点)即为html片段,要改变小圆点颜色只需自定义html即可。。
打印params属性如下:
在这里插入图片描述

formatter: function(params) {
    var result = ''
    var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#0090ff"></span>'
    var dotHtml2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ff7800"></span>'
    result += params[0].axisValue + "</br>" + dotHtml +'个数:' + params[0].data+ "</br>" + dotHtml2 +'整改到位率:' + params[1].data
    return result

    tooltip提示框,一般默认显示折线的数据,如果想要修改对应的内容,也可通过formatter函数来完成。

formatter: function(params) {
            var res = params[0].name + '<br/>'
            for (var i = 0; i < params.length; i++) {
              if (params[i].seriesName === '销售额') {
                res += params[i].marker + '销售额: ' + params[i].data + '元'
              if (params[i].seriesName === '佣金') {
                res += '<br>' + params[i].marker + '佣金: ' + params[i].data + '元'
            return res

三、修改折线图Y轴颜色、线条

yAxis: {
          // 去掉轴多出来的-
          axisTick: {
            show: false
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed' //内容区域修改为虚线
          show: true,
          fontSize: 10,
          axisLabel: {
            formatter: '{value} 元' //Y轴刻度添加单位
          // 去掉Y轴坐标轴
          axisLine: {
            show: true,
            lineStyle: {
              type: 'dashed',  //虚线
              color: '#999'    //Y轴单位字体颜色

参考博客:
    Echarts多条折线图 y轴数值与实际值不一致的解决方法 https://blog.csdn.net/web_start/article/details/106383673
    echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等) https://blog.csdn.net/weixin_42217154/article/details/105040740
ECharts地图中tooltip提示框通过formatter分别显示多个数值 https://blog.csdn.net/giscript/article/details/52162165/

分别表示系列名,数据名,数据等。在 trigger 为 ‘axis’ 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。说到底,无论是哪种方式,最终formatter的return都是字符串,所以我们需要做的就是字符串的拼接,回调函数的方式的优势在于处理字符串更加灵活,调用属性的方式获取想要的,可读性更高。{b},{c},{d},{e},分别表示系列名,数据名,数据等去做拼接来展示,只能展示显示的图表看到的数据, 在seriesData中的data我们通常是这样的[123,456,789,147,852,963],这种包含数字的数组,如果想要实现自定义formatter我们就要将data里的数据处理一下写成数组对象的形式,如下: { name: "x... 引入该包,在 myChart.setOption(option)注册表后,调用该方法 tools.loopShowTooltip(myChart, option, { loopSeries: true }) 注:myChart为echarts实例,option为该表配置。配置中必须要有tooltip的配置才可生效 var trend = document.getElementById('fachetrend') var trenddata = [['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'], [5, 40, 30, 40, 20, 28, 32, 22, 18, 30, 33, 30]] function t 6.取消折线图线段上面的圆点、 7.让数据一样的折线段从同一起点出发:取消 stack: 'Total' 这一行... 8.解决部分线段内部数据为空时,页面折线中断的问题...... 用echarts折线图的时候,hover数据点的样式是默认,但是有的时候显示的样式和自己理想的样式有区别的时候,我们就需要自己更改样式,来满足自己的需求,呢要怎么进行更改呢,官方文档说明可以在tooltipformatter方法里面进行定义,下面我们来看一下: hover数据点的默认样式是这样的: 因为时间段比较长的时候,他只会显示年份,月份和日份,但是我如果需要加上每段数据的具体时间,也就是精确到几点几分,这个时候会怎么办呢?我们就可以在tooltipformatter里面进行自定义,手动添加一些我 1、自定义tooltip悬浮提示框内容(数据处理后加单位),需要在tooltip配置项的formatter使用回调函数的形式 参数详解:https://echarts.baidu.com/option.html#legend.formatter 2、自定义折线图线条颜色,直接在color配置项数组中写自己喜欢的颜色,在线条绘制的时候就会在数组中自动选择。 具体如下配置: option = { 1、前景:在echarts中设置多个Y轴的时候,如果不想Y轴的折线有交叉,则需要考虑一下这个方案: 每一条Y轴分为一个区域,使得每一个Y轴都是一个独立的区域,举个例子:四条Y轴,那就是每条Y轴占四分一。但是要怎么实现呢? 实现前:折线之间是有交叉的2、实现后:每条折线之间分为区域去显示,毫无交集 3、实现的方法:利用echarts 官方提供的max和min函数 max:function(value){ let lengs = 4; //四条Y轴