不多说,上代码!
封装代码
主要代码:
axisLabel: {
show: true,
rotate: 0, //角倾斜显示
formatter: function (val) {
return val.split("").join("\n");
}, //横轴信息文字竖直显示
},
<template>
<div id="machine" />
</template>
<script>
import echarts from "echarts";
export default {
props: ["id"],
data() {
return {
charts: "",
};
},
mounted() {
this.$nextTick(() => {
this.initChart("machine");
});
},
methods: {
initChart(id) {
this.charts = echarts.init(document.getElementById(id), "blue");
this.charts.setOption({
color: ["#13F4CD", "#349bf1", "#fd8e22", "#f74e36"],
tooltip: {
trigger: "axis",
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月份",
"九月份",
"十月份",
"十一月份",
"十二月份",
],
axisLabel: {
show: true,
rotate: 0, //角倾斜显示
formatter: function (val) {
return val.split("").join("\n");
}, //横轴信息文字竖直显示
textStyle: {
color: ["rgb(142, 199, 220)"],
},
},
axisLine: {
lineStyle: {
color: "#023c7a",
width: 1,
},
},
},
],
yAxis: [
{
type: "value",
axisLabel: {
formatter: "{value} °C",
},
splitLine: {
lineStyle: {
color: "#023c7a",
width: 1,
},
},
axisLine: {
lineStyle: {
color: "#023c7a",
width: 1,
},
},
axisLabel: {
show: true,
textStyle: {
color: ["rgb(142, 199, 220)"],
},
},
},
],
series: [
{
name: "测试数据1",
type: "line",
smooth: true,
stack: "总量",
areaStyle: {
normal: {
//前四个参数代表位置 左下右上，暗青色到亮青色，
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, color: "rgba(12,180,250, 1)" }, //从上往下的渐变
{
offset: 1, color: "rgba(63, 208, 249, 0)" },
]),
},
lineStyle: {
shadowColor: "#5cfbff", //透明的颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1, //透明度
shadowBlur: 8, //阴影大小
type: "solid", //实线
width: 2,
},
},
data: [400, 500, 800, 600, 550, 400, 600, 400, 800, 500, 200, 800],
},
{
name: "测试数据2",
type: "line",
smooth: true,
stack: "总量",
label: {
normal: {
show: true,
position: "top",
},
},
areaStyle: {
normal: {
//前四个参数代表位置 左下右上，暗青色到亮青色，
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, color: "rgba(12,180,250, 1)" }, //从上往下的渐变
{
offset: 1, color: "rgba(63, 208, 249, 0)" },
]),
},
},
lineStyle: {
shadowColor: "#5cfbff", //透明的颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1, //透明度
shadowBlur: 8, //阴影大小
type: "solid", //实线
width: 2,
},
data: [400, 800, 500, 600, 550, 800, 300, 400, 600, 700, 400, 800],
},
],
});
},
},
};
</script>
最后效果:
