第一步：安装echarts
npm install echarts --save
第二步：页面中引入
import echarts from "echarts";
第三步：定义具备高宽的DOM容器
<div id="chartLineBox" style=" 90%;height: 70vh;"> </div>
第四步：echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的折线图
注意：这里只是在mounted中生成，实际项目中会在通过接口获取数据后生成图表
（可以在methods中设置方法，在点击事件中调用此方法，什么改变就把什么当成参数）
// 折线图方法，这个是在完成上个接口后就调用这个方法
getrr(time, data, name) {
console.log(name);
this.chartLine = echarts.init(document.getElementById("myChart"));
// 指定图表的配置项和数据
var option = {
tooltip: {
//设置tip提示
trigger: "axis",
},
legend: {
//设置区分（哪条线属于什么）
data: ["历史值"],
textStyle: {
//图例文字的样式
color: "#FFFFFF",
fontSize: 12,
},
},
color: ["#f04e4e"], //设置区分（每条线是什么颜色，和 legend 一一对应）
xAxis: {
axisPointer: {
lineStyle: {
color: "#eeeeee",
2,
},
label: {
backgroundColor: "#eeeeee",
},
},
//设置x轴
type: "category",
boundaryGap: false, //坐标轴两边不留白
data: time,
name: "时间", //X轴 name
nameTextStyle: {
//坐标轴名称的文字样式
color: "#eeeeee",
fontSize: 12,
padding: [0, 0, 0, 20],
},
// X轴坐标文字颜色
axisLabel: {
show: true,
textStyle: {
color: "#FFFFFF", //这里用参数代替了
},
},
axisLine: {
//坐标轴轴线相关设置。
lineStyle: {
color: "#4a4a4a",
},
},
},
yAxis: {
name: name,
nameTextStyle: {
color: "#FFFFFF",
fontSize: 12,
padding: [0, 0, 10, 0],
},
axisLine: {
lineStyle: {
color: "#4a4a4a",
},
},
axisTick: {
//y轴刻度线
show: false,
},
splitLine: {
//网格线
// "show": false,
lineStyle: { color: "#4a4a4a" },
},
type: "value",
// 改变y轴文字颜色
axisLabel: {
textStyle: {
color: "#ffffff",
},
},
},
series: [
{
name: "历史值",
data: data,
type: "line", // 类型为折线图
// 将折线图改成平滑的曲线
// smooth: true,
lineStyle: {
// 线条样式 => 必须使用normal属性
normal: {
color: "#f04e4e",
},
},
// 添加横线的渐变的背景图
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgba(3,196,187,0.5)",
// },
// {
// offset: 1,
// color: "rgba(3,196,187,0.1)",
// },
// ]),
// },
},
// {
// name: "耗电量",
// data: this.historyList.dian,
// type: "line", // 类型为折线图
// // 将折线图改成平滑的曲线
// smooth: true,
// lineStyle: {
// // 线条样式 => 必须使用normal属性
// normal: {
// color: "#99f6f3",
// },
// },
// // 添加横线的渐变的背景图
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgba(153,246,243,0.5)",
// },
// {
// offset: 1,
// color: "rgba(153,246,243,0.1)",
// },
// ]),
// },
// },
// {
// name: "耗燃气",
// data: this.historyList.qi,
// type: "line",
// // 将折线图改成平滑的曲线
// smooth: true,
// lineStyle: {
// normal: {
// color: "#056966",
// },
// },
// // 添加横线的渐变的背景图
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgba(5,105,102,0.5)",
// },
// {
// offset: 1,
// color: "rgba(5,105,102,0.1)",
// },
// ]),
// },
// },
],
};
// 使用刚指定的配置项和数据显示图表。
this.chartLine.setOption(option);
},
后台接口传的参数格式：
res:{
code:0,
data:{
shui:[3,4,5,6,7,8,9],
qi:[33,44,55,66,77,88,99]
time:[2021-02-04,2021-02-05,2021-02-06,2021-02-07,2021-02-08,2021-02-09,2021-02-10]
}
}