用过很多次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
}
]
}
]
};
效果如下：
