1.生产总数和销售总数的直观柱状图(非堆叠),重叠柱状图
2.代码:
const option = {
backgroundColor: "#fff",
title: {
text: `自动派单使用情况分析`,
textStyle: {
rich: {
a: {
fontSize: 16,
fontWeight: 600,
},
},
},
subtext: "2023~2024",
top: "3%",
left: "center",
itemGap: 20,
subtextStyle: {
color: "#6C7B8A",
fontSize: 16,
fontWeight: 600,
},
},
legend: {
top: "15%",
right: "10%",
icon: "circle",
},
tooltip: {
show: true,
trigger: "axis",
backgroundColor: "rgba(255,255,255)",
axisPointer: {
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#A7D6FF",
},
{
offset: 0.5,
color: "#fff",
},
{
offset: 1,
color: "#A7D6FF",
},
],
global: false,
},
},
},
},
grid: {
top: "25%",
left: "9%",
right: "8%",
bottom: "12%",
},
xAxis: {
type: "category",
axisLabel: {
padding: [0, 10, 0, 0],
interval: 0,
rotate: 45,
},
},
yAxis: [
{
type: "value",
min: 0,
name: "数量",
splitNumber: 6,
splitLine: { show: true },
axisLabel: {
//坐标轴刻度标签的相关设置。
show: true,
textStyle: {
color: "#737373",
fontSize: 14,
},
},
axisLine: {
show: true,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "rgba(131,101,101,0.2)",
type: "dashed",
},
},
show: true,
},
{
type: "value",
max: 100,
nameTextStyle: {
color: "#666666",
},
position: "right",
axisLine: {
lineStyle: {
color: "#cdd5e2",
},
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
formatter: "{value} %", //右侧Y轴文字显示
textStyle: {
color: "#666666",
fontSize: 14,
},
},
},
],
series: [
{
type: "bar",
miniBarWidth: 20,
z: "-1",
barGap: "-100%",
},
{
type: "bar",
miniBarWidth: 20,
},
{
name: "环比",
type: "line",
zlevel: 11,
yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
smooth: true, //平滑曲线显示
symbol: "circle", //标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
normal: {
color: "#34b063",
borderColor: "rgba(52,176,99, 0.5)", //圆点透明 边框
borderWidth: 7,
label: {
show: false, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "#50c878",
fontSize: 12,
fontWeight: 400,
},
formatter: function (res) {
if (res.value) {
return res.value + "%";
} else {
return 0;
}
},
},
},
},
lineStyle: {
color: "#50c878",
},
data: [
16.8, 58.37, 11.55, 37.88, 42.23, 21.02, 31.2, 45.6, 88.9, 60.7, 75.3,
33.6,
],
},
],
color: ["#ccc", "#4474c4"],
dataset: {
source: [
["111", "年度EBITDA目标", "累计EBITDA"],
["组织1", 26.947840915347587, 23.434275047578243],
["组织2", 86.81567149391756, 5.657076223365802],
["组织3", 19.66516804789249, 21.65491007516144],
["组织4", 78.24499918224117, 17.532816749568585],
["组织5", 9.068230301905844, 18.72748416004701],
["组织6", 97.12694214494779, 4.426496960413959],
["组织7", 51.36793101571185, 14.31612203508518],
["组织8", 2.6917695675537257, 2.7258768801158917],
["组织9", 15.581908368970376, 16.137144766976142],
["组织10", 31.898641586056375, 5.917170937924663],
["组织11", 31.223132285415687, 1.8969062401314285],
["组织12", 70.46729231458406, 5.534117977852744],
],
},
};