1. 渐变色折线图
<template>
<div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import { fontChart } from "@/utils/echartPxToRem";
import * as echarts from "echarts";
export default {
data() {
return {
charts: "",
};
},
props: {
id: {
type: String,
required: true,
},
xValue: {
type: Array,
default: () => ["1.00", "2:00", "3.00", "4.00", "5.00", "6.00", "7.00", "8.00", "9.00", "10.00", "11.00", "12.00", "13.00", "14.00", "15.00", "16.00", "17.00"],
},
yValue: {
type: Array,
default: () => [30, 50, 100, 120, 170, 200, 240, 280, 290, 340, 350, 330, 280, 210, 180, 170, 120],
},
lineColor: {
type: String,
default: "#38cf8f"
},
offsetColor0: {
type: String,
default: "rgba(51, 192, 132, 1)"
},
offsetColor0_5: {
type: String,
default: "rgba(51, 192, 132, .5)"
},
offsetColor1: {
type: String,
default: "rgba(51, 192, 132, .1)"
},
},
watch: {
yValue() {
this.drawLine();
},
},
mounted() {
this.drawLine();
},
destroyed() {
window.removeEventListener("resize", this.selfAdaption);
},
methods: {
drawLine() {
this.charts = echarts.init(document.getElementById(this.id));
let option = {
// backgroundColor: "rbg(40,46,72)",
grid: {
left: "8%",
right: "5%",
top: "20%",
bottom: "2%",
containLabel: true,
},
tooltip: {
show: false,
trigger: "axis",
// 让toolltip紧跟鼠标
// 打开tooltip有可能鼠标移入的时候会出现屏幕抖动情况
// 设置transitionDuration为0可以解决此问题
transitionDuration: 0,
axisPointer: {
type: "line",
lineStyle: {
color: "rgba(50, 216, 205, 1)",
},
},
},
xAxis: [
{
type: "category",
boundaryGap: 0,
axisLine: {
show: false,
},
axisLabel: {
color: "#A1A7B3",
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
data: this.xValue,
},
],
yAxis: [
{
type: "value",
name: "单位(ppm)",
nameTextStyle: {
color: "#fff",
fontSize: fontChart(13),
align: "right"
},
padding: fontChart(5),
// max: 1000,
splitLine: {
show: false,
lineStyle: {
color: "#A1A7B3",
type: "dashed",
},
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
margin: fontChart(10),
textStyle: {
color: "#A1A7B3",
},
},
axisTick: {
show: false,
},
},
],
series: [
{
// name: "今日",
type: "line",
smooth: true,
stack: "总量",
symbolSize: 5,
showSymbol: false,
itemStyle: {
normal: {
color: "#23D0C4",
lineStyle: {
color: this.lineColor,
width: 2,
},
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: this.offsetColor0,
},
{
offset: 0.5,
color: this.offsetColor0_5,
},
{
offset: 1,
color: this.offsetColor1,
},
],
false
),
},
},
data: this.yValue,
},
],
}
this.charts.setOption(option);
window.addEventListener("resize", this.selfAdaption);
},
// 自适应
selfAdaption() {
if (!this.charts) return;
this.charts.resize();
this.drawLine();
},
},
};
</script>
2. 双折线渐变色覆盖
<template>
<div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";
import { fontChart } from "@/util/echartPxToRem";
export default {
data() {
return {
charts: "",
}
},
props: {
id: {
type: String,
required: true,
},
yUnit: {
type: String,
default: 'PUE值'
},
xValue: {
type: Array,
default: () => ['8/18', '8/19', '8/20', '8/21', '8/22', '8/23', '8/24'],
},
yValue1: {
type: Array,
default: () => [0.2, 0.6, 0.8, 0.5, 0.9, 0.7, 0.4],
},
yValue2: {
type: Array,
default: () => [0.2, 0.8, 0.9, 0.6, 0.7, 0.8, 0.5],
},
},
watch: {
yValue2(newValue) {
this.drawLine();
}
},
mounted() {
this.drawLine();
},
destroyed() {
window.removeEventListener("resize", this.selfAdaption);
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
this.charts = echarts.init(document.getElementById(this.id));
// 指定图表的配置项和数据
let option = {
// backgroundColor: "rbg(40,46,72)",
grid: {
left: "3%",
right: "4%",
top: "20%",
bottom: "2%",
containLabel: true,
},
tooltip: {
show: false,
trigger: "axis",
// 让toolltip紧跟鼠标
// 打开tooltip有可能鼠标移入的时候会出现屏幕抖动情况
// 设置transitionDuration为0可以解决此问题
transitionDuration: 0,
axisPointer: {
type: "line",
lineStyle: {
color: "rgba(50, 216, 205, 1)",
},
},
},
xAxis: [
{
type: "category",
boundaryGap: 0,
axisTick: {
show:false,
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#0f5681'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#0f5681',
type: 'dotted'
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize: fontChart(12) //更改坐标轴文字大小
}
},
data: this.xValue,
},
],
yAxis: [
{
type: "value",
name: this.yUnit,
nameTextStyle: {
color:'#fff',
fontSize:fontChart(12),
align:'right'
},
axisLine: {
lineStyle: {
color: '#0f5681'
}
},
axisTick: {
show:false,
alignWithLabel: true
},
splitLine: {
lineStyle: {
color: '#0f5681',
type: 'dashed' // solid dashed dotted
},
},
axisLabel: {
show: true,
align:'right',
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize: fontChart(12) //更改坐标轴文字大小
}
},
},
],
series: [
{
// name: "今日",
type: "line",
smooth: true,
// stack: "总量",
symbolSize: 5,
showSymbol: false,
itemStyle: {
normal: {
color: "#23D0C4",
lineStyle: {
color: '#16c694',
width: 2,
}
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#0f942c" },
{ offset: 0.7, color: "#031233" },
{ offset: 1, color: "#031233" },
])
}
},
z: 3,
data: this.yValue1,
},
{
// name: "今日",
type: "line",
smooth: true,
// stack: "总量",
symbolSize: 5,
showSymbol: false,
itemStyle: {
normal: {
color: "#23D0C4",
lineStyle: {
color: '#01a7be',
width: 2,
}
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#039fb8" },
{ offset: 0.7, color: "#031233" },
{ offset: 1, color: "#031233" },
])
}
},
data: this.yValue2,
},
],
};
// 使用刚指定的配置项和数据显示图表。
this.charts.setOption(option);
window.addEventListener("resize", this.selfAdaption);
},
// 自适应
selfAdaption() {
if (!this.charts) return;
this.charts.resize();
this.drawLine();
}
},
};
</script>
3. 自定义拐点样式折线图
<template>
<div :id="id" style="width: 100%;height:100%;"></div>
</template>
<script>
import * as echarts from 'echarts'
import { fontChart } from '@/util/echartPxToRem'
export default {
data() {
return {
charts:''
}
},
props: {
id: {
type: String,
required: true
},
xValue: {
type:Array,
default: () => ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
},
name: {
type: String,
default: '功率'
},
yUnit: {
type: String,
default: 'KW'
},
yValue: {
type:Array,
default:() => [0.8, 0.7, 0.75, 0.8, 1.1, 1, 0.95]
}
},
watch: {
yValue(newValue) {
this.drawLine()
}
},
mounted() {
this.drawLine()
},
destroyed() {
window.removeEventListener('resize', this.selfAdaption)
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
this.charts = echarts.init(document.getElementById(this.id));
// 指定图表的配置项和数据
var option = {
title: {
show: false,
text: 'Stacked Area Chart'
},
tooltip: {
show: true,
trigger: 'axis',
// backgroundColor: 'blue',
// 让toolltip紧跟鼠标
// 打开tooltip有可能鼠标移入的时候会出现屏幕抖动情况
// 设置transitionDuration为0可以解决此问题
transitionDuration: 0, // 让toolltip紧跟鼠标
axisPointer: {
type: 'cross', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
label: {
backgroundColor: '#6a7985'
},
// crossStyle: { // 横向配置
// color: 'blue'
// },
// lineStyle: { //纵向配置
// color: 'blue'
// }
}
},
legend: {
show: false,
textStyle: {
color: '#fff',
fontSize:fontChart(13)
}
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '2%',
right: '5%',
bottom: '6%',
containLabel: true
},
xAxis: [
{
type: 'category',
// name:'(时间)',
// nameTextStyle: {
// color:'#fff',
// fontSize:fontChart(12),
// verticalAlign:'top'
// },
boundaryGap: false,
data: this.xValue,
axisTick: {
show:false,
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#0f5681'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#0f5681',
type: 'dotted'
},
},
axisLabel: {
show: true,
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize: fontChart(12) //更改坐标轴文字大小
}
}
},
],
yAxis: {
type: 'value',
name: this.yUnit,
nameTextStyle: {
color:'#fff',
fontSize:fontChart(12),
align:'right'
},
axisLine: {
lineStyle: {
color: '#0f5681'
}
},
axisTick: {
show:false,
alignWithLabel: true
},
splitLine: {
lineStyle: {
color: '#0f5681',
type: 'dashed' // solid dashed dotted
},
},
axisLabel: {
show: true,
align:'right',
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize: fontChart(12) //更改坐标轴文字大小
}
},
},
series: [
{
name: this.name,
type: 'line',
// stack: 'Total',
symbol: 'circle',
symbolSize: fontChart(7),
itemStyle: {
// 线和拐点的颜色
borderColor: '#01ecf2',
color: '#0e0b12', //图例的颜色
},
emphasis: {
// focus: 'series',
itemStyle: { // 移入拐点样式配置
color: '#0e0b12', //图例的颜色
borderColor: '#b08010', //图形的描边颜色
// borderWidth: 2, // 描边的线宽
// shadowBlur: 5, // 图形的阴影大小
// shadowColor: '#F70938' // 图形的阴影颜色
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#004b85" },
{ offset: 0.7, color: "#031233" },
{ offset: 1, color: "#031233" },
])
},
lineStyle: {
color:'#01ecf2'
},
data: this.yValue
}
]
};
// 使用刚指定的配置项和数据显示图表。
this.charts.setOption(option);
window.addEventListener('resize', this.selfAdaption)
},
// 自适应
selfAdaption() {
if(!this.charts) return
this.charts.resize()
this.drawLine()
}
},
}
</script>
4. 自定义拐点 1
<template>
<div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import { fontChart } from "@/utils/echartPxToRem";
import * as echarts from "echarts";
export default {
data() {
return {
charts: "",
};
},
props: {
id: {
type: String,
required: true, //声明这个参数是否必须传入
},
xValue: {
type: Array,
default: () => [
"08:10",
"08:20",
"08:30",
"08:40",
"08:50",
"09:10",
"09:20",
"09:30",
"09:40",
"09:50",
"10:00",
"10:10",
"10:20",
"10:30",
"10:40",
"10:50",
"11:00",
"11:10",
"11:20",
"11:30",
"11:40",
"11:50",
"12:00",
"13:00"
],
},
yValue1: {
type: Array,
default: () => [1600, 1600, 1600, 1600, 1600, 1600, 1600, 1115, 1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1600,1600,1600],
},
yValue2: {
type: Array,
default: () => [1300, 1300, 1300, 1300, 1300, 1300, 1300, 1115, 1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1300,1300,1300],
},
yValue3: {
type: Array,
default: () => [1135, 1135, 1135, 1135, 1135, 1135, 1135, 1115, 1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1135,1135,1135],
},
yValue4: {
type: Array,
default: () => [900, 900, 900, 900, 900, 900, 900, 1115, 1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,1115,900,900,900],
},
},
watch: {
yValue2() {
this.drawLine();
},
},
mounted() {
this.drawLine();
},
destroyed() {
window.removeEventListener("resize", this.selfAdaption);
},
methods: {
drawLine() {
this.charts = echarts.init(document.getElementById(this.id));
let option = {
backgroundColor: "#03060F",
tooltip: {
show: true,
trigger: "axis",
// 让toolltip紧跟鼠标
// 打开tooltip有可能鼠标移入的时候会出现屏幕抖动情况
// 设置transitionDuration为0可以解决此问题
transitionDuration: 0, // 让toolltip紧跟鼠标
axisPointer: {
lineStyle: {
color: "#ffcb00",
},
}
},
legend: {
// data: ["今年", "去年"],
textStyle: {
fontSize: fontChart(12),
color: "rgba(255, 255, 255, 0.8)",
},
icon: 'roundRect',
itemWidth: fontChart(18),
itemHeight: fontChart(12),
// borderRadius: 0,
top: "2%",
right: "2%",
// bottom: '15%'
},
grid: {
bottom: '10%',
left: '10%',
right: '4%',
top: '20%'
},
xAxis: {
axisLine: {
show: false,
lineStyle: {
color: "#15faff",
},
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
//改变刻度字体样式
color: "rgba(255, 255, 255, 0.8)",
fontSize: fontChart(13)
},
},
data: this.xValue,
},
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: "#274452",
}
},
axisTick: {
show: false,
alignWithLabel: true
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#293a4c",
},
},
axisLabel: {
// formatter: "{value} %",
textStyle: {
//改变刻度字体样式
color: "rgba(255, 255, 255, 0.8)",
fontSize: fontChart(13)
},
},
},
series: [
{
name: "监测",
type: "line",
// smooth: true, // 设置拆线平滑
symbol: "circle",
symbolSize: fontChart(13),
itemStyle: {
color: "#2fece6",
},
data: this.yValue1,
},
{
name: "预测",
type: "line",
// smooth: true,
symbol: "circle",
symbolSize: fontChart(13),
itemStyle: {
color: "#f4715c",
},
data: this.yValue2,
},
{
name: "最优",
type: "line",
// smooth: true,
symbol: "circle",
symbolSize: fontChart(13),
itemStyle: {
color: "#7c2826",
},
data: this.yValue3,
},
{
name: "设计",
type: "line",
// smooth: true,
symbol: "circle",
symbolSize: fontChart(13),
itemStyle: {
color: "#ecff29",
},
data: this.yValue4,
}
]
};
this.charts.setOption(option);
window.addEventListener("resize", this.selfAdaption);
},
// 自适应
selfAdaption() {
if (!this.charts) return;
this.charts.resize();
this.drawLine();
},
},
};
</script>
5. 自定义拐点2
<template>
<div :id="id" style="width: 100%;height:100%;"></div>
</template>
<script>
import * as echarts from 'echarts'
import { fontChart } from '@/utils/echartPxToRem'
export default {
data() {
return {
charts:''
}
},
props: {
id: {
type: String,
required: true
},
xValue: {
type:Array,
default: () => ['20:00', '21:00', '22:00', '23:00', '0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
},
yValue1: {
type:Array,
default:() => [91, 90, 92, 91.5, 91, 90, 92, 91.5,91, 90, 92, 91.5,91, 90, 92, 91.5,91, 90, 92, 91.5]
},
yValue2: {
type: Array,
default: () => [84, 83, 83.5, 85,84, 83, 83.5, 85,84, 83, 83.5, 85,84, 83, 83.5, 85,84, 83, 83.5, 85,]
}
},
watch: {
yValue2() {
this.drawLine()
}
},
mounted() {
this.drawLine()
},
destroyed() {
window.removeEventListener('resize', this.selfAdaption)
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
this.charts = echarts.init(document.getElementById(this.id));
// 指定图表的配置项和数据
var option = {
grid: {
top: '18%',
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
legend: {
// data: ["推测数值", "实际数值"],
x: "40%",
y: "0%",
orient: "horizontal",
textStyle: {
color: function (data) {
const value = data.data;
if (value > 60) {
return "#FF1700";
}
if (value > 30 && value < 60) {
return "#F69729";
}
if (value > 10 && value < 20) {
return "#E6CA40";
}
if (value < 10) {
return "#00BBE6";
}
}
}
},
xAxis: {
type: "category",
name: "",
nameTextStyle: {
padding: [-550, 0, 0, -55],
color: "#5FDAFC",
},
data: this.xValue,
axisLine: {
lineStyle: {
color: "#5FDAFC",
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
// 改变轴线颜色
color: ["red"], // 使用深浅的间隔色
}
}
},
yAxis: {
type: "value",
name: "数值",
// min: minValue,
nameTextStyle: {
padding: [0, 0, 0, 30],
color: "#5FDAFC",
align: 'right'
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#5FDAFC",
},
},
splitLine: {
show: false,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ["red"],
}
}
},
emphasis: {
label: {
show: true,
},
},
series: [
{
name: "推测数值",
data: this.yValue1,
type: "line",
symbol: "square",
symbolSize: 8,
smooth: true,
itemStyle: {
normal: {
color: "#FF7E2C",
lineStyle: {
color: "#FF7E2C",
}
}
}
},
{
name: "实际数值",
data: this.yValue2,
type: "line",
symbol: "square",
symbolSize: 8,
smooth: true,
itemStyle: {
normal: {
color: "#DFFF2C",
lineStyle: {
color: "#DFFF2C",
}
}
}
}
]
}
// 使用刚指定的配置项和数据显示图表。
this.charts.setOption(option);
window.addEventListener('resize', this.selfAdaption)
},
// 自适应
selfAdaption() {
if(!this.charts) return
this.charts.resize()
this.drawLine()
}
},
}
</script>
