1. 渐变色折线图

Echart常用折线图-编程知识网

<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.  双折线渐变色覆盖

Echart常用折线图-编程知识网

<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. 自定义拐点样式折线图

Echart常用折线图-编程知识网

<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) returnthis.charts.resize()this.drawLine()}},
}
</script>

4. 自定义拐点 1

Echart常用折线图-编程知识网

<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 

Echart常用折线图-编程知识网

<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) returnthis.charts.resize()this.drawLine()}},
}
</script>