效果如下
代码：
<template>
<div style="width: 406px; height: 190px" id="it_r_two"></div>
</template>
<script>
export default {
name: "it_r_two",
data() {
return {};
},
mounted() {
this.drawLine();
},
methods: {
// 自适应字体大小变化
WidthAdaptive(res) {
var windth = window.innerWidth;
let fontSize = windth / 1920;
return fontSize * res;
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("it_r_two"));
let xLabel = [
"08/02",
"08/03",
"08/04",
"08/05",
"08/06",
"08/07",
"08/08",
];
let goOutSchool = ["3", "1", "6", "3", "1", "6", "3"];
let goOutSchool2 = ["2", "5", "1", "4", "3", "6", "9"];
let option = {
backgroundColor: "transparent",
legend: {
icon: "rect",
itemWidth: this.WidthAdaptive(14),
itemHeight: this.WidthAdaptive(4),
itemGap: this.WidthAdaptive(14),
padding: this.WidthAdaptive(2),
textStyle: {
color: "rgba(201, 229, 255, 1)",
fontSize: this.WidthAdaptive(12),
padding: [3, 0, 0, 0],
},
},
grid: {
top: "18%",
left: "10%",
right: "10%",
bottom: "12%",
// containLabel: true
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: "#8C9493",
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "rgba(201, 229, 255, .8)",
fontSize: this.WidthAdaptive(12),
padding: this.WidthAdaptive(2),
},
formatter: function(data) {
return data;
},
},
splitLine: {
show: false,
lineStyle: {
color: "#192a44",
},
},
axisTick: {
show: false,
},
data: xLabel,
},
],
yAxis: [
{
name: "单位：MW",
nameTextStyle: {
color: "rgba(201, 229, 255, .8)",
fontSize: this.WidthAdaptive(12),
},
splitLine: {
lineStyle: {
type: "dashed",
color: "rgba(112,112,112,0.5)",
},
},
axisLine: {
show: false,
lineStyle: {
color: "#8C9493",
},
},
axisLabel: {
show: true,
textStyle: {
color: "rgba(201, 229, 255, .8)",
fontSize: this.WidthAdaptive(12),
padding: this.WidthAdaptive(3),
},
},
axisTick: {
show: false,
},
},
{
name: "单位：水/t",
nameTextStyle: {
color: "rgba(201, 229, 255, .8)",
fontSize: this.WidthAdaptive(12),
},
splitLine: {
lineStyle: {
type: "dashed",
color: "rgba(112,112,112,0.5)",
},
},
axisLine: {
show: false,
lineStyle: {
color: "#8C9493",
},
},
axisLabel: {
show: true,
textStyle: {
color: "rgba(201, 229, 255, .8)",
fontSize: this.WidthAdaptive(12),
padding: this.WidthAdaptive(3),
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: "电耗趋势",
type: "line",
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: this.WidthAdaptive(2),
color: "rgba(59, 157, 255, 1)", // 线条颜色
},
borderColor: "rgba(0,0,0,.4)",
},
itemStyle: {
color: "rgba(59, 157, 255, 1)",
borderColor: "#646ace",
borderWidth: this.WidthAdaptive(20),
},
tooltip: {
show: true,
},
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(59, 157, 255, .5)",
},
{
offset: 1,
color: "rgba(59, 157, 255, 0)",
},
],
false
),
shadowColor: "rgba(10,219,250, 0.5)", //阴影颜色
shadowBlur: this.WidthAdaptive(20), //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
data: goOutSchool,
},
{
name: "水耗趋势",
type: "line",
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
yAxisIndex: 1,
smooth: true,
lineStyle: {
normal: {
width: this.WidthAdaptive(2),
color: "rgba(255, 173, 14, 1)", // 线条颜色
},
borderColor: "rgba(0,0,0,.4)",
},
itemStyle: {
color: "rgba(255, 173, 14, 1)",
borderColor: "#646ace",
borderWidth: this.WidthAdaptive(20),
},
tooltip: {
show: true,
},
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(255, 173, 14, .5)",
},
{
offset: 1,
color: "rgba(255, 173, 14, 0)",
},
],
false
),
shadowColor: "rgba(10,219,250, 0.5)", //阴影颜色
shadowBlur: this.WidthAdaptive(20), //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
data: goOutSchool2,
},
],
};
window.onresize = function() {
myChart.resize();
};
myChart.setOption(option);
},
},
};
</script>
<style scoped></style>
标签：WidthAdaptive,show,color,曲线,阴影,rgba,折线图,true,255 From： https://www.cnblogs.com/a973692898/p/17408933.html