echarts 柱状图甘特图

Autumn_yun

已于 2022-10-21 15:07:09 修改

阅读量902

点赞数

分类专栏： js 文章标签： echarts 甘特图前端

于 2022-10-21 14:57:42 首次发布

本文链接：https://blog.youkuaiyun.com/Autumn_yun/article/details/127446568

版权

本文展示了如何使用Echarts库创建柱状图和甘特图，通过详细的配置选项，包括数据、样式和标记，来展示一天中不同时间段的计划和实际用电量。示例中包含了多条线性渐变颜色的线条，用于突出最大值，并使用了markPoint和markLine来增强数据可视化的表现力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,
[
{ <