先看一下整体效果哦
我这个是在vue项目中写echarts 所以我会提前用依赖下载echarts 然后import引入 进行使用
话不多说 上代码
html
<div id="memory-left"></div>
css
#memory-left {
width: 74%;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 3px -1px #ccc,
//底部阴影
2px 0 3px -1px #ccc; //右边阴影;
}
methods方法中
memoryLeft(id) {
this.memoryleftone = echarts.init(document.getElementById(id));
this.memoryleftone.setOption({
title: {
text: "内存占用情况",
left: "10",
top: 10,
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 10,
textStyle: {
color: "#607181",
fontWeight: "bolder",
fontFamily: "思源黑体",
fontSize: 20,
},
},
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(0, 255, 233,0)",
},
{
offset: 0.5,
color: "rgba(255, 255, 255,1)",
},
{
offset: 1,
color: "rgba(0, 255, 233,0)",
},
],
global: false,
},
},
},
},
grid: {
top: "15%",
left: "10%",
right: "10%",
bottom: "5%",
containLabel: true,
},
xAxis: {
// 坐标轴
axisLine: {
show: false,
},
axisTick: {
//y轴刻度线
show: false,
},
type: "category",
axisLine: {
show: true,
},
splitArea: {
// show: true,
color: "#f00",
lineStyle: {
color: "#f00",
},
},
splitLine: {
show: false,
},
boundaryGap: true,
data: [
"2020-1-10",
"2020-2-10",
"2020-3-10",
"2020-4-10",
"2020-5-10",
"2020-6-10",
"2020-7-10",
"2020-8-10",
"2020-9-10",
],
},
yAxis: {
type: "value",
// 坐标轴
axisLine: {
show: false,
},
axisTick: {
//y轴刻度线
show: false,
},
},
series: [
{
data: [4.37, 4.91, 5.84, 10.06, 8.14, 5.91, 5.23, 6.13, 5.14],
type: "line",
smooth: true,
// 是否有图形标志
symbol: "circle",
symbolSize: 10,
// 标志线的颜色
lineStyle: {
normal: {
color: "#FFAA4E",
shadowColor: "rgba(0, 0, 0, 0)",
shadowBlur: 0,
shadowOffsetY: 6,
shadowOffsetX: 6,
},
},
// 提示文字
label: {
show: true,
position: "top",
textStyle: {
color: "#000",
fontSize: 13,
},
},
// 提示字的属性 颜色
itemStyle: {
color: "#FFAA4E",
// borderColor: "rgb(108,78,0)",
borderWidth: 8,
shadowColor: "rgba(0, 0, 0, 0)",
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
// 当线去了某个点的时候会不会出现弹框
tooltip: {
show: true,
},
},
],
});
},
提前在data 里声明哦
memoryleftone:""
在mouted()里面调用哦
this.memoryLeft("memory-left");
一定要对应好自己的id值名称