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/bottomtextStyle: {// 设置图例文字样式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.