如图：
image.png
1.echarts npm
npm install echarts --save
2.main.js引入 echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.页面代码：
<template>
<div>
<div id="container" style="width: 100%;height: 300px;"></div>
</div>
</template>
<script>
export default {
name: '',
data() {
return {}
},
created() {
this.$nextTick(() => {
let optionLine = {
backgroundColor: 'rgba(33, 43, 55, 0.4)',
//设置canvas内部表格的内距
grid:{
x:20,
y:30,
x2:30,
y2:30,
},
//标题样式
title:{
text:'',
top:'0',
left:13,
textStyle:{
color:'#fff',
fontSize:14,
fontWeight:'normal'
}
},
//悬浮显示
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
//渐变背景
shadowStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: '',
},
{
offset: 1, color: '',
}
],
global: false // 缺省为 false
}
}
},
//提示框隐藏，写的好硬。。
formatter:function () {
return 123
},
backgroundColor:'rgba(50,50,50,0)',
textStyle:{
color:'rgba(50,50,50,0)',
},
},
xAxis: {
type: 'category',
boundaryGap: false, //折线图不从0刻度开始
// 坐标网格
splitLine: {
show:true,
lineStyle:{
width:0.6,
color: 'rgba(255,255,255,0.2)',
type:'dashed'
}
},
//设置x轴坐标线的样式
axisLine: {
lineStyle: {
type: 'solid',
color: 'rgba(255,255,255,0.3)',//x轴坐标线的颜色
width:'1'//x轴坐标线的宽度
}
},
//x轴刻度数值颜色
axisLabel: {
interval:1,
textStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
data: []
},
yAxis: {
type: 'value',
nameGap:0,
// 坐标网格
splitLine: {
lineStyle:{
width:0.6,
color: 'rgba(255,255,255,0.2)',
type:'dashed'
}
},
//设置y轴坐标线的样式
axisLine: {
lineStyle: {
type: 'solid',
color: 'rgba(216,216,216,0.2)',//x轴坐标线的颜色
width:'1'//x轴坐标线的宽度
}
},
axisLabel:{
inside : true,//数值朝内
margin : 5,
textStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
axisTick:{//刻度轴隐藏
show:false
}
},
series: [{
data: [],
type: 'line',
symbolSize:8, //拐点圆的大小
color:[], //折线条的颜色1
areaStyle: {
color: '', //折线区域的背景颜色2
opacity:0.3,
},
//显示数据
itemStyle:{
normal:{
label:{
show:true,
color:'#fff',
}
}
},
}]
};
let myChartLine = this.$echarts.init(document.getElementById('container'))
optionLine.title.text = '测试'
optionLine.xAxis.data = [1,2,3,4,5,6,7]
optionLine.series[0].data = [10,20,30,40,304,304,90]
optionLine.series[0].color = ['rgb(43,255,234)']
optionLine.series[0].areaStyle.color = 'rgb(43,255,234)'
optionLine.tooltip.axisPointer.shadowStyle.color.colorStops[0].color = 'rgba(43,255,234,.1)'
optionLine.tooltip.axisPointer.shadowStyle.color.colorStops[1].color ='rgba(2,207,206,.6)'
myChartLine.setOption(optionLine);
window.addEventListener("resize", () => {
myChartLine.resize()
})
})
}
}
</script>
<style>
.index{
width: 100%;
height: 100%;
}
</style>
因为项目需求不同，样式也是千变万化，写的多了些。且项目中是多个折线图，故我把动态添加的数据都提出来了写。
悬浮本还有个小白框显示具体信息，但是我在这里不需要，所以为了隐藏这个框也是费了好大的功夫。
看的人各取所需把。
网友评论