ECharts常见图表配置
用过很多次ECharts图表，每次用的时候都要查文档，也想过进行记录，总是忙于手头工作或者因为惰性没有落实到文章，这次痛定思痛趁着假期记录下，以下代码基于echarts 5.0.0版本，出于偷懒，直接copy的项目代码，简单做了调整，可以直接放到ECharts对应示例使用，注释应该是够用的，有问题欢迎留言讨论。
横向柱状图
// 坐标轴文字样式
const YDataTextStyle = {
color: "#C1E0F9",
fontSize: 13,
align: "right",
fontFamily: "PingFangSC-Regular",
};
option = {
grid: {
top: 10,
left: 75,
bottom: 10,
right: 20,
},
xAxis: {
type: "value",
show: false,
},
yAxis: {
// 坐标轴线
axisLine: {
show: false,
},
// 坐标轴刻度
axisTick: {
show: false,
},
// 坐标轴数据
data: [
{ value: "走访宣传", textStyle: YDataTextStyle },
{ value: "安全隐患", textStyle: YDataTextStyle },
{ value: "疫情防控", textStyle: YDataTextStyle },
{ value: "市容环境", textStyle: YDataTextStyle },
{ value: "出租屋管理", textStyle: YDataTextStyle },
{ value: "社会秩序", textStyle: YDataTextStyle },
{ value: "公共服务", textStyle: YDataTextStyle },
{ value: "拆迁纠纷", textStyle: YDataTextStyle },
],
},
series: [
{
// 类型
type: "bar",
// 数据
data: [377, 452, 645, 730, 824, 945, 967, 1264],
// 柱子宽度
barWidth: 12,
// 顶部文字
label: {
show: true,
position: "right",
valueAnimation: true,
fontFamily: "youse",
fontSize: 14,
color: "#A8DAFC",
// {a}：系列名 {b}：数据名 {c}：数据值
formatter: "{c}",
// 距离图形距离
distance: 15,
},
// 是否显示柱子背景色
showBackground: true,
// 柱子背景色样式
backgroundStyle: {
color: "rgba(122,188,248,.04)",
},
// 柱子样式
itemStyle: {
// 边框
borderColor: "#42B1F8",
borderWidth: 0.2,
// 颜色
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
// 渐变色
colorStops: [
{
offset: 0,
color: "rgba(123,133,167,0.00)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(66,177,248,0.40)", // 100% 处的颜色
},
],
},
},
},
],
};复制代码效果如下：
纵向柱状图
option = { grid: { top: 30, left: 35, bottom: 50, right: 10, }, legend: { bottom: 5, data: ["热线电话", "巡查上报"], textStyle: { fontFamily: "PingFangSC-Regular", fontSize: 12, color: "#fff", }, }, xAxis: [ { type: "category", axisTick: { show: false, }, axisLabel: { color: "#C1E0F9", fontSize: 13, fontFamily: "PingFangSC-Regular", }, data: ["5月", "6月", "7月", "8月", "9月", "10月"], }, ], yAxis: [ { type: "value", position: "left", axisLine: { show: false, // 横坐标线 lineStyle: { color: "#9EACC1", opacity: 0.1, }, }, axisLabel: { color: "#8497AC", fontSize: 12, fontFamily: "PingFangSC-Regular", }, axisTick: { show: false, }, // 水平分隔线样式 splitLine: { lineStyle: { color: "#9EACC1", opacity: 0.1, }, }, }, ], series: [ { name: "热线电话", type: "bar", data: [500, 250, 325, 190, 240, 260], // 多个并排柱子设置柱子之间的间距 barGap: "50%", // 柱子宽度 barWidth: 14, // 顶部文字 label: { show: true, position: "top", valueAnimation: true, fontFamily: "Akrobat-Black", fontSize: 16, color: "#65DDBC", formatter: "{c}", // 距离图形距离 distance: 5, }, // 柱子样式 itemStyle: { // 边框 borderColor: "#00E2B4", borderWidth: 0.2, // 颜色 color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(0,226,180,0.4)", // 底部颜色 }, { offset: 1, color: "rgba(123,133,167,0.00)", // 顶部颜色 }, ], }, }, }, { type: "line", data: [500, 250, 325, 190, 240, 260], lineStyle: { opacity: 0, }, showSymbol: true, // 顶点偏移 symbolOffset: [-11, 0], // 设定为实心点 symbol: "circle", // 设定实心点的大小 symbolSize: 5, // 设定实线点的颜色 color: "#65DDBC", }, { name: "巡查上报", type: "bar", data: [180, 100, 175, 110, 90, 60], // 多个并排柱子设置柱子之间的间距 barGap: "50%", // 柱子宽度 barWidth: 14, // 顶部文字 label: { show: true, position: "top", valueAnimation: true, fontFamily: "Akrobat-Black", fontSize: 16, color: "#FFBB40", formatter: "{c}", // 距离图形距离 distance: 5, }, // 柱子样式 itemStyle: { // 边框 borderColor: "#FFBB40", borderWidth: 0.2, // 颜色 color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(255,187,64,0.36)", // 底部颜色 }, { offset: 1, color: "rgba(123,133,167,0.00)", // 顶部颜色 }, ], }, }, }, { type: "line", data: [180, 100, 175, 110, 90, 60], lineStyle: { opacity: 0, }, showSymbol: true, // 顶点偏移 symbolOffset: [11, 0], // 设定为实心点 symbol: "circle", // 设定实心点的大小 symbolSize: 5, // 设定实线点的颜色 color: "#FFBB40", }, ],};复制代码效果如下：
环形图
// 色值数组
const colors = [
'#00B1FF',
'#65DDBC',
'#9070CA',
' #FFBB40',
'#EA5B51',
'#0069FF'
],
// chart饼图色值数组
colorsForChart = [],
// 数据数组
data = [11.2, 17.6, 25.6, 9.6, 20.8, 15.2],
// chart饼图数据数组
dataForChart = [];
// 设计图饼图之间有间隙，所以数据之间添加固定间隙数值，颜色之间添加tranparent做饼图间隙
// 注：这里只是一个思路，不适合照搬
colors.forEach((item, index) => {
colorsForChart.push(item, 'transparent');
dataForChart.push(data[index], 1.5);
});
colors.forEach((item, index) => {
colorsForChart.push(item, 'transparent');
dataForChart.push(data[index], 1.5);
});
option = {
series: [
{
type: 'pie',
radius: ['93%', '100%'],
color: colorsForChart,
label: {
show: false
},
data: dataForChart
}
]
};复制代码效果如下：
仪表盘
option = { series: [ { type: "gauge", // 仪表盘半径 radius: "85%", // 最小的数据值 min: 0, // 最大的数据值 max: 30, // 仪表盘起始角度 startAngle: 210, // 仪表盘结束角度 endAngle: -30, // 仪表盘指针样式 这里用来设置仪表盘色值 itemStyle: { color: "#65DDBC", }, // 进度条 progress: { show: true, width: 3, }, // 仪表盘轴线 axisLine: { lineStyle: { width: 3, color: [[1, "#213B69"]], }, }, // 刻度样式 axisTick: { show: false, }, // 分隔线样式 splitLine: { show: false, }, // 刻度标签 axisLabel: { show: false, }, // 标题 title: { show: false, }, // 仪表盘详情，用于显示数据 detail: { // 中心偏移量 offsetCenter: [0, 0], // 中心文字样式 textStyle: { color: "#65DDBC", fontSize: 20 }, }, // 仪表盘指针 pointer: { show: false, }, // 表盘中指针的固定点 anchor: { show: false, }, // 系列中的数据内容数组 data: [ { value: 16, }, ], }, ],};复制代码效果如下：
作者：王振宇
链接：https://juejin.cn/post/7014771532237013000