大家好，欢迎来到IT知识分享网。
目录
1 引入Echarts
1.1 安装
使用如下命令通过 npm 安装 ECharts
npm install echarts --save
注：本文安装Echarts版本为：“echarts”: “5.2.1”
1.2 引入
安装完成以后，可以将echarts全部引入，这样一来，我们可以在该页面使用echarts所有组件；引入代码如下：
import * as echarts from "echarts";
1.3 基本使用
vue+Echarts基本使用请见：在Vue项目中引入 ECharts
2 基本折线图
如果我们想建立一个横坐标是类目型（category）、纵坐标是数值型（value）的折线图，我们可以使用这样的方式，将series中type设置为line即可，如下：
const option = {
xAxis: {
data: this.xData
},
yAxis: {
},
series: [
{
data: this.yData,
type: "line"
}
]
};
vue完整代码如下：
<template>
<div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
myChart: {
},
xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
yData: [23, 24, 18, 25, 27, 28, 25], //人数数据
myChartStyle: {
float: "left", width: "100%", height: "400px" } //图表样式
};
},
mounted() {
this.initEcharts();
},
methods: {
initEcharts() {
const option = {
xAxis: {
data: this.xData
},
yAxis: {
},
series: [
{
data: this.yData,
type: "line" // 类型设置为折线图
}
]
};
this.myChart = echarts.init(document.getElementById("mychart"));
this.myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
this.myChart.resize();
});
}
}
};
</script>
以上代码效果如图：
3 复杂折线图
3.1 多条折线
通常我们折线图中会出现多组数据进行对比展示，当出现多组数据的时候，我们在series中多设置对象值即可，当出现多组数据时，为了清晰展示每一条线展示的数据，我们会用到以下两个属性：
legend:data对应折线名称以及数量，位置属性bottom；
label：折线上文本标签，默认不展示，通过show控制文本标签是否展示；position控制展示位置，textStyle文本样式；
如下：
const option = {
xAxis: {
data: this.xData
},
legend: {
// 图例
data: ["人数", "任务"],
bottom: "0%"
},
yAxis: {
},
series: [
{
name: "人数",
data: this.yData,
type: "line", // 类型设置为折线图
label: {
show: true,
position: "top",
textStyle: {
fontSize: 16
}
}
},
{
name: "任务",
data: this.taskData,
type: "line", // 类型设置为折线图
label: {
show: true,
position: "bottom",
textStyle: {
fontSize: 16
}
}
}
]
};
其中有个小tip，设置文本标签时，为了避免文本密集，对文本的位置进行设置；
如图所示：
完整vue代码如下：
<template>
<div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
myChart: {
},
xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
yData: [23, 24, 18, 25, 27, 28, 25], //人数数据
taskData: [10, 11, 9, 17, 14, 13, 14], //任务数据
myChartStyle: {
float: "left", width: "100%", height: "400px" } //图表样式
};
},
mounted() {
this.initEcharts();
},
methods: {
initEcharts() {
const option = {
xAxis: {
data: this.xData
},
legend: {
// 图例
data: ["人数", "任务"],
bottom: "0%"
},
yAxis: {
},
series: [
{
name: "人数",
data: this.yData,
type: "line", // 类型设置为折线图
label: {
show: true,
position: "top",
textStyle: {
fontSize: 16
}
}
},
{
name: "任务",
data: this.taskData,
type: "line", // 类型设置为折线图
label: {
show: true,
position: "bottom",
textStyle: {
fontSize: 16
}
}
}
]
};
this.myChart = echarts.init(document.getElementById("mychart"));
this.myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
this.myChart.resize();
});
}
}
};
</script>
3.2 动态变化折线图
动态变化折线图参见：vue+Echarts绘制动态折线图
4 笛卡尔坐标系中的折线图
如果我们希望折线图在横坐标和纵坐标上都是连续的，即在笛卡尔坐标系中，应该如何实现呢？答案也很简单，只要把 series 的 data 每个数据用一个包含两个元素的数组表示就行了。
option = {
xAxis: {
},
yAxis: {
},
series: [
{
data: [
[20, 120],
[50, 200],
[40, 50]
],
type: 'line'
}
]
};
如图：
5 平滑曲线图
平滑曲线图也是折线图的一种变形，这种更柔和的样式也是一种不错的视觉选择。使用时，只需要将折线图系列的 smooth 属性设置为 true 即可。
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
smooth: true
}
]
};
如图所示：
结合平滑曲线以及自定义坐标形式，其实我们可以使用Echarts绘制数学公式中的曲线图，以下我们给出一个vue+Echarts绘制
y = x 2 y=x^2 y=x2
的曲线；
如图所示：
完整vue代码如下：
<template>
<div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
myChart: {
},
seriesData: [[]],
myChartStyle: {
float: "left", width: "100%", height: "400px" } //图表样式
};
},
mounted() {
this.initDate(); //数据初始化
this.initEcharts();
},
methods: {
initDate() {
for (let i = 0; i < 5; i++) {
this.seriesData[i] = [i, i * i];
}
},
initEcharts() {
const optionFree = {
xAxis: {
},
yAxis: {
},
series: [
{
data: this.seriesData,
type: "line",
smooth: true
}
]
};
this.myChart = echarts.init(document.getElementById("mychart"));
this.myChart.setOption(optionFree);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
this.myChart.resize();
});
}
}
};
</script>
6 折线图样式设置
6.1 折线的样式
折线图中折线的样式可以通过 lineStyle 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等，这里，我们以设置颜色（color）、线宽（width）和折线类型（type）为例说明。
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
lineStyle: {
normal: {
color: 'green',
width: 4,
type: 'dashed'
}
}
}
]
};
如图：
这里设置折线宽度时，数据点描边的宽度是不会跟着改变的，而应该在数据点的配置项中另外设置。
6.2 数据点的样式
数据点的样式可以通过 series.itemStyle 指定填充颜色（color）、描边颜色（borderColor）、描边宽度（borderWidth）、描边类型（borderType）、阴影（shadowColor）、不透明度（opacity）等。与折线样式的设置十分相似，这里不再展开说明。
6.3 其他配置
其他配置如轴坐标属性配置请见轴坐标配置
7 总结
折线图在现实中应用非常广泛，掌握这些基本知识。我们除了能绘制简单折线图以外，还能应对一些非常复杂的情况，如处理数学公式等。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/23562.html
