echarts常用配置项

1.修改图表图例颜色

在legend配置项中定义textStyle属性设置颜色即可。

let option = {
    legend: {
        textStyle: {
            color: 'white'
        },
    },
}

2.修改图表x/y轴线条颜色

在x/y轴中添加axisLine配置项进行修改即可。

let option = {
    xAxis: {
        axisLine: {
            lineStyle: {
                color: "rgb(35, 208, 229)"
            }
        },
    },
    yAxis: {
        axisLine: {  
            lineStyle: {
                color: "rgb(35, 208, 229)",
            }
        },
    },
}

3.修改图表默认的颜色

在series中添加color配置项设置颜色即可。

let option = {
  series: [
    {
      color: ["rgb(40,135,193)"],
      type: "bar",
      data: [425, 821, 522, 522],
    },
    {
      color: ["rgb(231,137,58)"],
      type: "line",
      data: [21, 85, 98, 21],
    },
  ],
};

4.在图表x/y轴添加描述文字

在x/y轴加一个name属性即可。

let option = {
    yAxis: {
        name: "（万辆）",
    },
}

5.去掉图表背景的网格线

在x/y轴中添加splitLine属性将show设置为false值即可。

let option = {
    xAxis: {
        splitLine: {
            show: false
        },
    },
}

6.设置柱图的宽度

在series中加上barWidth属性设置需要的值即可。

let option = {
    series: [
        {type: 'bar', barWidth: 12,}，
        {type: 'bar', barWidth: 12,}
    ]
}

7.设置图表x轴文字的倾斜

在x轴中加上axisLabel属性设置需要的角度值即可。

let option = {
    xAxis: {
        axisLabel: {
            interval: 0,
            rotate: 40,//倾斜度数
        },  
    },
}

8.设置图表的背景颜色

在option中加上backgroundColor配置项设置颜色即可。

let option = {
    backgroundColor: ["rgb(5,7,59)"],
}

9.饼图展示信息让其值及百分比都展示

在series配置中加上itemStyle配置项根据需要显示即可。

let option = {
    series: [
        itemStyle: {
            normal: {
                label: {
                    show: true, //显示
                    formatter: '{b} : {c} ({d}%)', //b:名称；c：值；d：所占百分比
                },
                labelLine: {
                    show: true, //显示
                },
            }
        },
    ]
}

10.调整柱图与顶部图例的间距

在option中添加grid配置项设置需要的值即可。

let option = {
        grid: {
            left: '5%',
            right: '6%',
            bottom: '3%',
            top: "20%",
            containLabel: true
        },
    }

11.饼图中间添加文字描述

在option下面加上需要的文字即可。

let option = {
        title: {
            text: "86.5%", //值
            left: "center", //居中
            top: "50%", //距离顶部50%
            textStyle: { //文字样式
                color: "rgb(30,30,30)", //文字颜色
                fontSize: 16, //文字大小
                align: "center" //居中
            }
        },
        graphic: {
            type: "text", //类型
            left: "center", //居中
            top: "40%", //距离顶部40%
            style: {
                text: "处罚率", //值
                textAlign: "center", //居中
                fontSize: 16, //字体大小
            }
        },
    }

12.饼图指示线显隐

在series配置项中加上labelLine属性让其true或false即可。

let option = {
    series: [{
        labelLine: {
            show: false,
          },
    }]
}

13.图表宽高自适应

主要是通过resize()方法实现，在图表容器的外面再套一层div，然后给图表的div宽高都设置成100%，给外面的div设置宽高即可。

<div class="columnarStyle">
		<div id="columnarChart" :style="{ width: '100%', height: '100%' }"></div>
</div>

methods: {
    radarEcharts() {
      let radarVariable = document.getElementById("radarChart"); //获取id
      let myChartOne = this.$echarts.init(radarVariable); //初始化图表
      let option = {
        //配置项
        // ......
      };
      window.addEventListener("resize", function () {
        myChartOne.resize(); //myChartOne就是上面初始化定义的值
      });
    },
  },

14.调整饼图与标题的间距

在option中的legend配置项里面设置top的值即可。

let option = {
    legend: {
        top: '0%',
        left: 'center'
    },
}

15.将柱图顶端改成圆弧形

在option中添加itemStyle配置项设置其弧度即可。

let option = {
    itemStyle:{
        barBorderRadius:[20,20,0,0]//从左至右依次为上左、上右、下右、下左
    },
},

16.图表添加下载功能

在option中加上toolbox配置项设置其中属性即可。

let option = {
    toolbox: {
        feature: {
            saveAsImage: {
                title: '保存为图片',//标题可自行调整
                type: 'png',//下载为png格式
            }
        }
    },
}

17.x/y字数过多展示省略号

在xAxis/yAxis方法中加入以下代码即可。

axisLabel: {
  formatter: function (value) {
    if (value.length > 4) {
      return `${value.slice(0, 4)}...`;
    }
    return value;
  },
},

18.调整饼图的位置

在series中加上center配置项设置对应的值即可。

let option = {
    series: [{
        center: ["50%", "48%"],//水平 垂直
    }]
}

19.鼠标移入echarts屏幕抖动

出现该问题是因为使用tooltip配置项后，鼠标悬浮事件频繁触发导致的，解决办法就是在tooltip中加上transitionDuration属性将值设置为0即可。

let option = {
    tooltip: {
            transitionDuration:0,//让提示框跟随鼠标提示
      },
}

20.数据量大时为x/y轴添加滚动条

在option中添加dataZoom配置项设置其中属性即可。

let option = {
    dataZoom: [
        {
            type: 'slider',//类型
            show: true,//显示
            yAxisIndex: [0],//使用y轴的index,默认值为0
            left: '93%',//距离左边位置百分比
            start: 0, //数据窗口范围的起始百分比
            end: 40//数据窗口范围的结束百分比
        },
        {
            type: 'inside',//类型
            yAxisIndex: [0],//使用y轴的index,默认值为0
            start: 0,//数据窗口范围的起始百分比
            end: 36//数据窗口范围的结束百分比
        }
    ],
 }

21.图表没有数据显示“暂无数据”字样

通过判断数组的长度来让“暂无数据”显示隐藏即可。

 let showed = this.rightPie.length ? false : true
 let option = {
	 title: {
    	show: showed, // 是否显示title
    	text: '暂无数据',//显示的文本
    	left: 'center',//水平方向居中
    	top: 'center',//垂直方向居中
	},
 }

22.修改标题的icon图标

通过icon属性选择自己想要的类型即可。

let option = {
	legend: {
  		textStyle: {
    		color: "black",//设置文字颜色
    		fontSize: '14' // 文字大小
  		},
  		itemWidth: 14, // icon宽度
  		itemHeight: 14, // icon高度
  		icon: "roundRect", //控制形状,其中包括 circle，rect，roundRect，triangle，diamond，pin，arrow，none
	},
}

23.饼图外部文字过长显示不全问题

把这个方法放在series配置项里面即可。

label: {
        show: true,
        fontSize: "12",
        normal: {
            formatter(v) {
                let text = v.name;
                return text.length < 4 ?
                    text :
                    `${text.slice(0, 4)}\n${text.slice(4)}`;
            },
        },
    },

24.柱状图数值直接显示在柱子上

把label配置项放在series配置项中需要显示的对象里面即可。

label: {
  show: true,
// formatter: '{b}\n{c}%', //如果需要单位加上这行代码即可 
},

25.图表切换全屏

将toolbox方法放在option中即可实现该操作。

如果你用的是 svg 图片，复制 svg 标签中 d 的属性值（d=“”，引号中的内容拿出来）粘到 icon:"path://" 后面即可；

如果你用的是外链图片，需要这样写： icon:'image://https://s1.ax1x.com/2022/04/19/L0GpM4.png' ，相当于是 image:// + “外链地址”。

toolbox: {
      show: true,//是否显示工具栏
      feature: {
        myFull: {
          show: true,
          title: "全屏查看",
          icon: "",
          onclick: () => {
            let element = document.getElementById("pillarsChart");
            // 一些浏览器的兼容性
            if (element.requestFullScreen) {
              // HTML W3C 提议
              element.requestFullScreen();
            } else if (element.msRequestFullscreen) {
              // IE11
              element.msRequestFullScreen();
            } else if (element.webkitRequestFullScreen) {
              // Webkit (works in Safari5.1 and Chrome 15)
              element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
              // Firefox (works in nightly)
              element.mozRequestFullScreen();
            }
            // 退出全屏
            if (element.requestFullScreen) {
              document.exitFullscreen();
            } else if (element.msRequestFullScreen) {
              document.msExitFullscreen();
            } else if (element.webkitRequestFullScreen) {
              document.webkitCancelFullScreen();
            } else if (element.mozRequestFullScreen) {
              document.mozCancelFullScreen();
            }
          },
        },
        saveAsImage: { show: true },
      },
    },

26.隐藏x/y轴刻度线

在x/y轴中添加axisTick配置项设置true/false即可。

xAxis: {
    axisTick: {
        show: false,  //隐藏刻度线
    },
},

27.设置面积图渐变色

在series方法中添加areaStyle配置项即可实现。

series: [
  {
    type: "line",
    yAxisIndex: 1,
    areaStyle: {},
    smooth: false, //面积图是否改成弧形状
    lineStyle: {
      width: 2, //外边线宽度
      color: "rgb(124,255,255)", //外边线颜色
    },
    showSymbol: false, //去除面积图节点圆
    areaStyle: {
      //区域填充渐变颜色
      color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "rgba(124,255,255, 0.3)", //0%处颜色
          },
          {
            offset: 1,
            color: "rgba(44,56,74, 1)", //100%处颜色
          },
        ],
      },
    },
  },
];

28.x/y轴字数过多设置省略号

在xAxis/yAxis方法中添加axisLabel配置项设置匹配条件即可。

axisLabel: {
    formatter: function (value) {
        if (value.length > 3) {
            return `${value.slice(0, 3)}...`;
        }
        return value;
    },
},

29.echarts 地图上展示数值

在series方法中添加label配置项设置匹配条件即可。

series: [
  {
     label: {
      normal: {
        show: true,
        color: "#e0e0e0",
        formatter: function (params) {
           return (
                  params.name +
                  (!params.value ? "" : "(" + params.value + ")")
                ); //地图上展示文字 + 数值
        },
      }
    },
  }
]

30.echarts 饼图数据太小不显示

在series方法中添加minAngle属性设置最小角度即可。

series: [
  {
    minAngle: 3,//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。
  },
],

31.echarts中y轴坐标不为小数

在yAxis方法中添加minInterval属性设置为1即可。

 yAxis: {
   minInterval: 1,
 },