1.折线图两条数据曲线分别渐变，同时两个图例也渐变
A.图例渐变
//图例渐变
legend: {
icon: "rect",
itemWidth: 62,
itemHeight: 3,
right: 5,
textStyle: {
fontSize: 14,
color: "#6C7B8A",
},
data: [{
name: '充电',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0,1, 1, [
{
offset: 0,
color: " rgba(12, 165, 235, 1)", // 起始颜色
},
{
offset: 1,
color: "rgba(97, 206, 89, 1)", // 结束颜色
},
])
},
},
{
name: '放电',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: " rgba(98, 178, 237, 1)", // 起始颜色
},
{
offset: 0.5,
color: "rgba(250, 200, 87, 1)", // 结束颜色
},
{
offset: 1,
color: " rgba(242, 78, 40, 1)", // 结束颜色
},
]),
},
}]
},
B.曲线渐变
series: [
{
name: "充电",
type: "line",
stack: "Total",
smooth: true,
symbol: "none",
data: props.chartData.YDataA,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: " rgba(12, 165, 235, 1)", // 起始颜色
},
{
offset: 1,
color: "rgba(97, 206, 89, 1)", // 结束颜色
},
]),
},
},
},
{
name: "放电",
type: "line",
stack: "Total",
smooth: true,
symbol: "none",
data: props.chartData.YDataB,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: " rgba(98, 178, 237, 1)", // 起始颜色
},
{
offset: 0.5,
color: "rgba(250, 200, 87, 1)", // 结束颜色
},
{
offset: 1,
color: " rgba(242, 78, 40, 1)", // 结束颜色
},
]),
},
},
},
],
C.完整代码
<template>
<div class="chart-container">
<!-- 报告期极值电压曲线 -->
<div id="chartACXC"></div>
</div>
</template>
<script>
const echarts = require("echarts");
import {
getCurrentInstance,
onMounted,
reactive,
defineProps,
watch,
toRef,
} from "vue";
export default {
props: ["chartData"],
setup(props) {
const {
proxy } = getCurrentInstance();
watch(
() => props.chartData,
(newValue) => {
initEcharts();
}
);
const state = reactive({
color: ["#00C991", "#40E88D", "#005376", "#00A19D"],
});
const initEcharts = () => {
//初始化图标内容
let myChart = echarts.init(document.getElementById("chartACXC"));
const option = {
title: {
text: "报告期极值电压曲线",
// subtext: "V",
// itemGap: 30, // 调整主副标题之间的间距
// top: "0%",
// left: "1%",
textStyle: {
color: "#86A3C0",
fontSize: 20,
fontWeight: 400,
},
// subtextStyle: {
// color: "##BDCADB",
// fontSize: 14,
// fontWeight: "normal",
// align: "right",
// },
},
grid: {
left: 40,
top: 90,
bottom: 20,
right: 0,
},
tooltip: {
show: true,
backgroundColor: "#1B2440",
trigger: "axis",
borderColor: "#1B2440",
padding: 8,
textStyle: {
color: "#86A3C0",
},
axisPointer: {
type: "line",
},
formatter: function (params) {
var result =
'<div style="width:150px;display:flex;justify-content:space-between;margin-bottom:20px;">' +
"<div>" +
"时间:" +
"</div>" +
"<div>" +
params[0].name +
"</div>" +
"</div>"; // 获取当前坐标轴的名称
let max = 0;
let min = 0;
params.forEach(function (item) {
// 遍历所有的数据项
result +=
'<div style="width:150px;display:flex;justify-content:space-between;margin-bottom:20px;">' +
"<div>" +
item.seriesName +
":" +
"</div>" +
"<div>" +
item.value +
"</div>" +
"</div>";
if (item.seriesName == "最高电压") {
max = item.value;
} else {
min = item.value;
}
});
result =
result +
'<div style="width:150px;display:flex;justify-content:space-between;">' +
"<div>" +
"差值:" +
"</div>" +
"<div>" +
(max - min).toFixed(2) +
"</div>" +
"</div>";
return result;
},
},
legend: {
icon: "rect",
itemWidth: 62,
itemHeight: 3,
right: 5,
right: "15%",
textStyle: {
fontSize: 14,
color: "#6C7B8A",
data: [{
name: '最高电压',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0,1, 1, [
{
offset: 0,
color: " rgba(12, 165, 235, 1)", // 起始颜色
},
{
offset: 1,
color: "rgba(97, 206, 89, 1)", // 结束颜色
},
])
},
},
{
name: '最低电压',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: " rgba(98, 178, 237, 1)", // 起始颜色
},
{
offset: 0.5,
color: "rgba(250, 200, 87, 1)", // 结束颜色
},
{
offset: 1,
color: " rgba(242, 78, 40, 1)", // 结束颜色
},
]),
},
}]
},
},
xAxis: [
{
type: "category",
data: props.chartData.XData,
axisPointer: {
type: "line", //tooltip 是直线
},
axisLine: {
//不显示x轴
show: true,
lineStyle: {
color: "rgba(108,123,138,0.08)",
},
},
axisTick: {
//不显示x轴刻度
show: false,
},
axisLabel: {
textStyle: {
color: "#6C7B8A", //更改坐标轴文字颜色
fontSize: 12, //更改坐标轴文字大小
},
},
},
],
yAxis: [
{
type: "value",
name: "V", // 设置 Y 轴标题
nameLocation: "end", // 标题位置居中
nameTextStyle: {
// 标题的样式设置
fontSize: 14,
fontWeight: "normal",
color: "#BDCADB",
},
axisLabel: {
textStyle: {
color: "#6C7B8A", //更改坐标轴文字颜色
fontSize: 12, //更改坐标轴文字大小
},
},
axisLine: {
//不显示y轴
show: true,
lineStyle: {
color: "rgba(108,123,138,0.08)",
},
},
splitLine: {
show: true,
type: "solid",
lineStyle: {
color: "rgba(108,123,138,0.08)",
},
},
},
],
series: [
{
name: "最高电压",
type: "line",
// stack: "Total",
smooth: true,
symbol: "none",
data: props.chartData.YDataA,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: " rgba(12, 165, 235, 1)", // 起始颜色
},
{
offset: 1,
color: "rgba(97, 206, 89, 1)", // 结束颜色
},
]),
},
},
},
{
name: "最低电压",
type: "line",
// stack: "Total",
smooth: true,
symbol: "none",
data: props.chartData.YDataB,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: " rgba(98, 178, 237, 1)", // 起始颜色
},
{
offset: 0.5,
color: "rgba(250, 200, 87, 1)", // 结束颜色
},
{
offset: 1,
color: " rgba(242, 78, 40, 1)", // 结束颜色
},
]),
},
},
},
],
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
};
onMounted(() => {
initEcharts();
});
return {
props,
initEcharts,
state,
};
},
};
</script>
<style lang="less">
#chartACXC {
width: 100%;
height: 350px;
box-sizing: border-box;
}
</style>
D.效果
