echarts 柱状图 甘特图

option = {
title: {
text: “一天分布”,
subtext: “纯属虚构”,
},
tooltip: {
trigger: “axis”,
},
toolbox: {
show: true,
feature: {
saveAsImage: {},
},
},
xAxis: {
type: “category”,
boundaryGap: true,
splitLine: {
show: true,
},
data: [
“00:00”,
“01:15”,
“02:30”,
“03:45”,
“05:00”,
“06:15”,
“07:30”,
],
},
yAxis: {
type: “value”,
splitLine: {
show: false,
},
axisLabel: {
formatter: “{value} W”,
},
},
series: [
{
name: “计划”,
type: “line”,
smooth: true,
showSymbol: false,
symbol: false,
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0.7,
color: “#993CED”, // 0% 处的颜色
},
{
offset: 1,
color: “#993CED”, // 100% 处的颜色
},
],
false
),
width: 50,
},
},
markPoint: {
data: [
{
name: “最大值”,
type: “max”,
valueIndex: 0,
},
],
},
data: [300, 300, 300, 300, 300, 300],
markLine: {
data: [
[
{
// 一条线的终点
coord: [“00:00”, 300],
symbol: “none”,
},
{
name: “”,
// 起始点，根据x轴坐标自定义，可画斜线
label: {
position: “start”,
},
coord: [“00:00”, 0],
symbol: “none”,
},
],
[
{ coord: [“01:15”, 200], symbol: “none” },
{
name: “”,
label: {
position: “start”,
},
coord: [“01:15”, 0],
symbol: “none”,
},
],
[
{ coord: [“02:30”, 100], symbol: “none” },
{
name: “”,
label: {
position: “start”,
},
coord: [“02:30”, 0],
symbol: “none”,
},
],
],
},
},
{
name: “用电量”,
type: “line”,
smooth: true,
showSymbol: false,
symbol: false,
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0.7,
color: “#993CED”, // 0% 处的颜色
},
{
offset: 1,
color: “#993CED”, // 100% 处的颜色
},
],
false
),
width: 50,
},
},
markPoint: {
data: [
{
name: “最大值”,
type: “max”,
valueIndex: 0,
},
],
},
data: [“-”, 200, 200, 200, 200, 200],
},
{
name: “用电量”,
type: “line”,
smooth: true,
showSymbol: false,
symbol: false,
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0.7,
color: “#993CED”, // 0% 处的颜色
},
{
offset: 1,
color: “#993CED”, // 100% 处的颜色
},
],
false
),
width: 50,
},
},
markPoint: {
data: [
{
name: “最大值”,
type: “max”,
valueIndex: 0,
},
],
},
data: [“-”, “-”, 100, 100],
},
],
};