echarts 柱状图曲线图

花归去2026-01-11 17:39
javascript 复制代码 
option = {
  backgroundColor: '#0C1E49',
  

  tooltip: {
    trigger: "axis",
    textStyle: {
      fontSize: 14,
      fontWeight: 400,
      color: "rgb(255, 255, 255)",
    },
    backgroundColor: "#43434391",
    borderColor: "#43434391",
  },
legend: {
         //  align: "right",
         //  right: "14%",
          top: "5%",
          //   type: "plain",
          //   formatter: ["{name}"].join("\n"),
          textStyle: {
            color: "rgba(255, 255, 255, 0.6)"
        }
        
        },
 

  grid: {
    top: "12%",
    bottom: "2%",
    right: "2%",
    left: "2%",
    containLabel: true,
  },

  xAxis: [
    {
      type: "category",
      splitLine: { show: false },
      data: ["1月", "2月", "3月", "4月", "5月", "6月",
             "7月", "8月", "9月", "10月", "11月", "12月"],
      axisTick: {
        alignWithLabel: true,
        show: true,
        length: 5,
      },
      axisLabel: {
        show: true,
        textStyle: { color: "#bfd0e1" },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.8)",
          fontSize: 13,
        },
      },
    },
  ],

  yAxis: [
    {
      type: "value",
      name: "单位：万元",
      splitLine: { show: false },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.8)",
          fontSize: 13,
        },
      },
      splitNumber: 5,
      axisLabel: {
        show: true,
        margin: 15,
        textStyle: { color: "#bfd0e1" },
      },
      axisTick: {
        show: true,
        length: 5,
      },
    },
    {
      type: "value",
      name: "",
      splitLine: { show: false },
      axisLine: { show: false },
      splitNumber: 5,
      axisLabel: {
        show: true,
        margin: 15,
        textStyle: { color: "#bfd0e1" },
      },
      axisTick: {
        show: true,
        length: 5,
      },
    },
  ],

  series: [
    /* ===== 月度计划 bar + 上下菱形 ===== */
    {
      name: "月度计划",
      type: "bar",
      barMaxWidth: "auto",
      barWidth: 20,
      data: [120, 132, 145, 134, 156, 135, 147, 120, 152, 144, 136, 158],
      itemStyle: {
        color: {
          type: "linear",
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: "#009b73" },
            { offset: 1, color: "#00e362" },
          ],
        },
      },
    },
    {
      name: "月度计划",
      type: "pictorialBar",
      barMaxWidth: 20,
      symbol: "diamond",
      symbolOffset: [-12, "40%"],
      symbolSize: [20, 10],
      color: "#00e462",
      data: [10, 21, 25, 35, 35, 10, 10, 10, 10, 10, 10, 10],
      tooltip: { show: false },
      zlevel: 2,
    },
    {
      name: "月度计划",
      type: "pictorialBar",
      barMaxWidth: 20,
      symbol: "diamond",
      symbolPosition: "end",
      symbolOffset: [-12, "-50%"],
      symbolSize: [20, 10],
      color: "#00e462",
      data: [120, 132, 145, 134, 156, 135, 147, 120, 152, 144, 136, 158],
      tooltip: { show: false },
      zlevel: 2,
    },

    /* ===== 月度完成 bar + 上下菱形 ===== */
    {
      name: "月度完成",
      type: "bar",
      barMaxWidth: "auto",
      barWidth: 20,
      data: [115, 125, 140, 130, 150, 128, 138, 110, 148, 135, 125, 150],
      itemStyle: {
        color: {
          type: "linear",
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: "#0d67b2" },
            { offset: 1, color: "#24a2f6" },
          ],
        },
      },
    },
    {
      name: "月度完成",
      type: "pictorialBar",
      barMaxWidth: 20,
      symbol: "diamond",
      symbolOffset: [12, "40%"],
      symbolSize: [20, 10],
      color: "#24a2f6",
      data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      tooltip: { show: false },
      zlevel: 2,
    },
    {
      name: "月度完成",
      type: "pictorialBar",
      barMaxWidth: 20,
      symbol: "diamond",
      symbolPosition: "end",
      symbolOffset: [11, "-50%"],
      symbolSize: [20, 10],
      color: "#24a2f6",
      data: [115, 125, 140, 130, 150, 128, 138, 110, 148, 135, 125, 150],
      tooltip: { show: false },
      zlevel: 2,
    },

    /* ===== 年累计划 / 年累完成 折线 ===== */
    {
      name: "年累计划",
      type: "line",
      smooth: true,
      symbolSize: 6,
      color: "#FFB805",
      itemStyle: {
        borderColor: "#FFB805",
        borderWidth: 2,
      },
      lineStyle: { color: "#FFB805" },
      data:  [120, 152, 197, 231, 287, 322, 369, 429, 441, 485, 521, 579],
    },
    {
      name: "年累完成",
      type: "line",
      smooth: true,
      symbolSize: 6,
      color: "#FF4545",
      itemStyle: {
        borderColor: "#FF4545",
        borderWidth: 2,
      },
      lineStyle: { color: "#FF4545" },
      data: [115, 140, 180, 210, 260, 288, 326, 336, 384, 419, 444, 594],
    },
  ],
};

option = {

backgroundColor: '#0C1E49',

tooltip: {

trigger: "axis",

textStyle: {

fontSize: 14,

fontWeight: 400,

color: "rgb(255, 255, 255)",

},

backgroundColor: "#43434391",

borderColor: "#43434391",

},

legend: {

// align: "right",

// right: "14%",

top: "5%",

// type: "plain",

// formatter: "{name}".join("\n"),

textStyle: {

color: "rgba(255, 255, 255, 0.6)"

}

},

grid: {

top: "12%",

bottom: "2%",

right: "2%",

left: "2%",

containLabel: true,

},

xAxis: [

{

type: "category",

splitLine: { show: false },

data: ["1月", "2月", "3月", "4月", "5月", "6月",

"7月", "8月", "9月", "10月", "11月", "12月"],

axisTick: {

alignWithLabel: true,

show: true,

length: 5,

},

axisLabel: {

show: true,

textStyle: { color: "#bfd0e1" },

},

axisLine: {

show: true,

lineStyle: {

color: "rgba(255,255,255,0.8)",

fontSize: 13,

},

},

},

],

yAxis: [

{

type: "value",

name: "单位：万元",

splitLine: { show: false },

axisLine: {

show: true,

lineStyle: {

color: "rgba(255,255,255,0.8)",

fontSize: 13,

},

},

splitNumber: 5,

axisLabel: {

show: true,

margin: 15,

textStyle: { color: "#bfd0e1" },

},

axisTick: {

show: true,

length: 5,

},

},

{

type: "value",

name: "",

splitLine: { show: false },

axisLine: { show: false },

splitNumber: 5,

axisLabel: {

show: true,

margin: 15,

textStyle: { color: "#bfd0e1" },

},

axisTick: {

show: true,

length: 5,

},

},

],

series: [

/* ===== 月度计划 bar + 上下菱形 ===== */

{

name: "月度计划",

type: "bar",

barMaxWidth: "auto",

barWidth: 20,

data: 120, 132, 145, 134, 156, 135, 147, 120, 152, 144, 136, 158,

itemStyle: {

color: {

type: "linear",

x: 0, y: 0, x2: 0, y2: 1,

colorStops: [

{ offset: 0, color: "#009b73" },

{ offset: 1, color: "#00e362" },

],

},

},

},

{

name: "月度计划",

type: "pictorialBar",

barMaxWidth: 20,

symbol: "diamond",

symbolOffset: -12, "40%",

symbolSize: 20, 10,

color: "#00e462",

data: 10, 21, 25, 35, 35, 10, 10, 10, 10, 10, 10, 10,

tooltip: { show: false },

zlevel: 2,

},

{

name: "月度计划",

type: "pictorialBar",

barMaxWidth: 20,

symbol: "diamond",

symbolPosition: "end",

symbolOffset: -12, "-50%",

symbolSize: 20, 10,

color: "#00e462",

data: 120, 132, 145, 134, 156, 135, 147, 120, 152, 144, 136, 158,

tooltip: { show: false },

zlevel: 2,

},

/* ===== 月度完成 bar + 上下菱形 ===== */

{

name: "月度完成",

type: "bar",

barMaxWidth: "auto",

barWidth: 20,

data: 115, 125, 140, 130, 150, 128, 138, 110, 148, 135, 125, 150,

itemStyle: {

color: {

type: "linear",

x: 0, y: 0, x2: 0, y2: 1,

colorStops: [

{ offset: 0, color: "#0d67b2" },

{ offset: 1, color: "#24a2f6" },

],

},

},

},

{

name: "月度完成",

type: "pictorialBar",

barMaxWidth: 20,

symbol: "diamond",

symbolOffset: 12, "40%",

symbolSize: 20, 10,

color: "#24a2f6",

data: 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,

tooltip: { show: false },

zlevel: 2,

},

{

name: "月度完成",

type: "pictorialBar",

barMaxWidth: 20,

symbol: "diamond",

symbolPosition: "end",

symbolOffset: 11, "-50%",

symbolSize: 20, 10,

color: "#24a2f6",

data: 115, 125, 140, 130, 150, 128, 138, 110, 148, 135, 125, 150,

tooltip: { show: false },

zlevel: 2,

},

/* ===== 年累计划 / 年累完成 折线 ===== */

{

name: "年累计划",

type: "line",

smooth: true,

symbolSize: 6,

color: "#FFB805",

itemStyle: {

borderColor: "#FFB805",

borderWidth: 2,

},

lineStyle: { color: "#FFB805" },

data: 120, 152, 197, 231, 287, 322, 369, 429, 441, 485, 521, 579,

},

{

name: "年累完成",

type: "line",

smooth: true,

symbolSize: 6,

color: "#FF4545",

itemStyle: {

borderColor: "#FF4545",

borderWidth: 2,

},

lineStyle: { color: "#FF4545" },

data: 115, 140, 180, 210, 260, 288, 326, 336, 384, 419, 444, 594,

},

],

};

相关推荐
Csvn3 小时前
🧩「找不到模块」排查全记录——Monorepo 下 TypeScript 路径别名的 5 种「不通」与根治方案
前端
腻害兔3 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解：字典、短信、邮件、通知——后台系统的“基础设施四件套“！
java·前端·vue.js·产品经理·ai编程
SeaTunnel3 小时前
从 Python Script 地狱到标准化数据集成框架
大数据·开发语言·python·程序员·代码·seatunnel
CodexDave3 小时前
MySQL事务隔离级别与MVCC机制解析
前端·数据库·mysql·nginx·性能优化·负载均衡
碎光拾影3 小时前
ARM交叉工具链各工具作用及IMX6ULL平台LED+蜂鸣器裸机程序实现
java·开发语言·数据库
Marst Code4 小时前
(python)2026Plotly 库评估：交互式可视化到底值不值得引入？
开发语言·python
Ai_easygo4 小时前
AI Agent开发入门——从ReAct到Tool Calling，拆解Agent的底层运行逻辑
前端·人工智能·react.js
研☆香4 小时前
分析制作html页面，如何划分页面结构
前端
Miao121314 小时前
微服务 API 测试实践：海外某民宿平台如何构建模式驱动测试基础设施
java·开发语言
腻害兔4 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解：支付模块 yudao-module-pay，一个让产品经理都看懂的支付中台设计
java·前端·vue.js·产品经理·ai编程
热门推荐
01GitHub 镜像站点022026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片03如何新建文件夹？ 电脑新建文件夹的4种方法04幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南05AI科技热点日报 | 2026年07月01日06国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08【AI前线观察】2026年国产开源大模型全面横评：从 DeepSeek V4 到 Kimi K3，谁才是开发者的最优选择？092026 年 AI 大模型 & AI 编程工具实战全总结102026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？