日常开发中，echarts 的使用率还是挺高的，但是每次使用的时候，总要去官网 查找对应的配置表进行配置，感觉特别麻烦，所以在日常开发中，对一些常用的配置，做一些总结，方便日后在做可视化界面开发的时候，可以直接查看这些配置，提升开发效率。
const option = {
// 左上角标题
title: {
text: "我是标题",
left: 0, // 距左侧的距离
top: 10, // 距顶部的距离
textStyle: {
fontSize: 13, // 标题大小
color: "#45F9F1", // 标题颜色
},
},
// 匹配多个颜色
color: ["#F8E71C", "#507df7", "#F5A623", "#47D1CB"],
// 顶部快捷导航的小banner
legend: {
right: 0, // 靠近最右侧显示，如果不加right 默认会居中显示
top: "5px", // 距离顶部的距离
icon: "rect", // 线条类型
itemWidth: 12, // 线条宽
itemHeight: 5, // 线条高
textStyle: {
color: "#fff", // 文字颜色
},
},
// 可视化图距上/下/左/右的距离
grid: {
top: "15%",
left: "3%",
right: "4%",
bottom: "3%",
// containLabel指的是grid 区域是否包含坐标轴的刻度标签
containLabel: true,
},
// 鼠标悬浮展示的数据
tooltip: {
// 鼠标hover显示自定义 (若没有额外的样式进行展示，可直接保留trigger这一个默认属性的展示即可)
trigger: "axis",
axisPointer: {
type: "shadow", // 鼠标hover时，整块区域覆盖阴影
},
textStyle: {
color: "#D6D6D6", // 文字颜色
},
borderColor: "rgba(0,0,0,0.8)", // 文字边框
backgroundColor: "rgba(30, 37, 45, 1)", // tooltip整块背景
formatter: function (params) {
// 注意：如果需要展示多个，在series中data的数据一定要是一个数组对象，且对象中必须有value的值
// data: [1,2,3] 等同于 data: [{value: 1}, {value: 2},{value: 3}]
// 然后将额外的需要展示的数据放到对应的每个对象里 然后展示的时候取出来就可以了)
return (
`<div style="display:inline-block;">${params[0].name}</div><br />` +
`内容: ${params[0].value}%`
);
},
},
// x轴
xAxis: [
{
// 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
type: "category",
// boundaryGap：x轴两边是否留白
boundaryGap: true,
axisLine: {
// 是否隐藏x轴线
show: true,
//x轴线的颜色以及宽度以及线条类型
lineStyle: {
color: "#E7E7E7",
width: 0,
type: "solid",
},
},
axisLabel: {
show: true,
//x轴文字的配置
textStyle: {
color: "#fff",
},
},
axisTick: {
show: false, //隐藏x轴刻度
},
axisPointer: {
// type: "none", // 取消当前轴的坐标轴指示器
lineStyle: {
color: "#ccc", // 分割线颜色
width: 1, // 分割线现宽
opacity: 0.1, // 图形透明度
},
},
data: [], // x轴的数据
},
],
// y轴
yAxis: [
{
// 'value' 数值轴，适用于连续数据
type: "value",
axisLine: {
show: true,
//y轴线的颜色以及宽度
lineStyle: {
color: "#E7E7E7",
width: 0,
type: "solid",
},
},
splitLine: {
// 修改背景线条样式
show: true, // 是否展示
lineStyle: {
type: "solid", // 分割线类型
color: "#ccc", // 分割线颜色
width: 1, // 分割线现宽
opacity: 0.1, // 图形透明度
},
},
// 正常情况下，是不需要设置（min、max）这两个值的，因为其会通过series中的data中的值自动进行计算最小值和最大值
max: 100, // Y轴最大数值
min: 0, // Y轴最小数值
},
],
series: [
{
smooth: true, // 折线图是否是圆滑曲线 平滑显示
symbol: "circle", //每个小点点的样式风格
showSymbol: false, //默认不展示小点点 经过再显示
name: "当月",
type: "line",
stack: "Total",
// itemStyle: {
// // itemStyle属性不写，会取默认颜色作为填充（正常情况下都是默认的）如有需要定制化的，可以打开此项进行相应的配置
// normal: {
// color: "#F21612", //轨迹线和小点点的颜色
// borderColor: "#F21612", //小点点的边框颜色
// },
// },
// lineStyle: {
// // lineStyle属性不写，会取默认颜色作为填充（正常情况下都是默认的）如有需要定制化的，可以打开此项进行相应的配置
// normal: {
// width: 1, //连线粗细
// color: "#F21612", //轨迹线颜色
// },
// },
// 如果是折线图、圆滑曲线，曲线下方的阴影区域(areaStyle)设置浅色
areaStyle: {
color: "#507df7", // 曲线下方阴影的颜色
opacity: 0.2, // 曲线下方阴影的透明度
origin: "start",
// 这里既可以通过上面的color和opacity进行展示，如果需要渐变色处理 也可以直接在color属性上绑定渐变色处理即可（仅保留color一项即可）
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgba(243, 78, 98, 0.8)",
// },
// {
// offset: 1,
// color: "rgba(255, 255, 255, 0)",
// },
// ]),
},
emphasis: {
focus: "series",
},
data: [120, 132, 101, 134, 90, 230, 210],
},
],
};