《图解Vue中Echarts Line实例：基础折线图如何实现？》

本文共计458个文字，预计阅读时间需要2分钟。

result

code:

<template>
<div class="chart" style="height: 300px; width: 800px;"></div>
</template>

<script>
export default {
methods: {
initChart() {
const dom = document.querySelector(".chart");
const chart = this.$echarts.init(dom);
const option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line",
},
],
};
chart.setOption(option);
},
},
mounted() {
this.initChart();
},
};
</script>

创建步骤

• 定义一个dom，然后获取
• 初始化表格​​const chart = this.$echarts.init(dom);​​
• 定义option，并且为表格示例设置option，渲染界面

知识点： xAxis.type

这里讲下xAxis的type的使用，xAxis组件是直角坐标系 X 轴，这个组件里面有很多属性， 它里面有个type的属性，​​xAxis.type = 'category'​​​ 它代表坐标轴类型。
可选：

• ​​'value'​​ 数值轴，适用于连续数据。
• ​​'category'​​​ 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从​​series.data​​​ 或​​dataset.source​​​ 中取，或者可通过​​xAxis.data​​ 设置类目数据。
• ​​'time'​​ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
• ​​'log'​​ 对数轴。适用于对数数据。

有时我们希望线能平滑一些，而不是折线，这时只需要在series里面添加​​smooth: true​​即可。

代码：