目录
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 总结
折线图在现实中应用非常广泛,掌握这些基本知识。我们除了能绘制简单折线图以外,还能应对一些非常复杂的情况,如处理数学公式等。