echarts之折线柱状图

echarts实现折线柱状图

echarts中文官网：https://echarts.apache.org/examples/zh/index.html

效果图如下：

整体代码如下（注释很详细）：

<template>
 	<div id="lineColumnarChart" style="width:100%;height:400px;"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";

// 横坐标data数据
const xData = [
  "05-01",
  "05-02",
  "05-03",
  "05-04",
  "05-05",
  "05-06",
  "05-07",
  "05-08",
  "05-09",
  "05-10",
  "05-11",
  "05-12",
  "05-13",
  "05-14",
  "05-15",
  "05-16",
  "05-17",
  "05-18",
  "05-19",
  "05-20",
];

// 折线柱状图data数据
const lineColumnarData = [
  [
    48, 65, 24, 39, 67, 48, 65, 24, 39, 67, 48, 65, 24, 39, 67, 48, 65, 24, 39,
    67,
  ],
  [
    32, 19, 72, 63, 51, 32, 19, 72, 63, 51, 32, 19, 72, 63, 51, 32, 19, 72, 63,
    41,
  ],
  [
    60, 75, 32, 53, 26, 60, 75, 32, 53, 26, 60, 75, 32, 53, 26, 60, 75, 32, 53,
    26,
  ],
  [
    32, 19, 72, 63, 51, 32, 19, 72, 63, 51, 32, 19, 72, 63, 51, 32, 19, 72, 63,
    51,
  ],
];

onMounted(() => {
  const myLineColumnarChart = echarts.init(
    document.getElementById("lineColumnarChart")
  );

  const lineColumnarOption = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(7,18,26, 1)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      axisPointer: {
        lineStyle: {
          color: "rgba(69, 173, 175, 1)",
        },
      },
    },
    // 图例组件
    legend: {
      icon: "rect",
      show: true, // 是否显示图例
      orient: "horizontal", // 图例的朝向    vertical-垂直显示  horizontal-水平显示
      data: ["尖", "峰", "平", "谷"],
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 15, // 间隔
      left: "50%", // x轴方向取值 left/center/right  具体像素值或百分比
      top: 24, // y轴方向取值 top/center/bottom
      textStyle: {
        // 设置图例文字样式
        color: "#fff",
        fontSize: 12,
      },
    },
    // 上下左右及大小-设置图表占总面积的地方
    grid: {
      left: "4%", //左侧 y轴内容距离边框的距离（类似padding-left）
      top: "27%", // 与容器顶部的距离
      right: "1%",
      bottom: "12%", // 与容器底部的距离
    },
    // grid坐标系的x轴
    xAxis: [
      {
        type: "category",
        data: xData,
        axisPointer: {
          type: "shadow",
        },
        axisTick: {
          show: false, // 不显示坐标轴刻度线
        },
        // show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
        // axisTick: {
        // 	show: false // 不显示坐标轴刻度线
        // },
        axisLine: {
          lineStyle: {
            color: "#415264",
            width: 2,
            type: "solid",
          },
        },
        axisLabel: {
          color: "#A6C6E1",
          fontSize: 12,
        },
        // splitLine: {
        // 	show: false // 不显示网格线
        // }
      },
    ],
    // grid坐标系的y轴
    yAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#284556",
          },
        },
        splitLine: {
          //分割线配置
          show: true,
          lineStyle: {
            color: "#284556",
            type: "dashed",
          },
        },
        axisLabel: {
          // formatter: "{value}",
          color: "#9FA3A8",
          fontSize: 12,
        },
      },
      {
        type: "value",
        show: false,
      },
    ],
    // 系列列表。每个系列通过 type 决定自己的图表类型
    series: [
      {
        name: "尖",
        type: "bar",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#042230",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#45B1BD",
              },
            ]),
            barBorderRadius: [2, 2, 0, 0],
          },
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value;
          },
        },
        data: lineColumnarData[0],
      },
      {
        name: "峰",
        type: "bar",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#042231",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#09B1F7",
              },
            ]),
            barBorderRadius: [2, 2, 0, 0],
          },
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value;
          },
        },
        data: lineColumnarData[1],
      },
      {
        name: "平",
        type: "line",
        lineStyle: {
          width: 1, // 设置线条宽度为5
        },
        symbol: "circle", // 设置为圆形
        symbolSize: 5, // 设置圆形的大小
        color: "#FFA668", //颜色
        itemStyle: {
          color: "#FFA668", // 设置圆形的填充颜色
          borderColor: "rgba(255,166,104, 0.4)", // 设置圆形的边框颜色
          borderWidth: 5,
        },
        tooltip: {
          valueFormatter: function (value: string) {
            return value;
          },
        },
        data: lineColumnarData[2],
      },
      {
        name: "谷",
        type: "bar",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#042231",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#3ACA73",
              },
            ]),
            barBorderRadius: [2, 2, 0, 0],
          },
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value;
          },
        },
        data: lineColumnarData[3],
      },
    ],
  };
  myLineColumnarChart.setOption(lineColumnarOption);
});
</script>

Challenges are what make life interesting and overcoming them is what makes life meaningful.‌