vue引入Echarts画折线图、平滑曲线图、转化数学公式详解

最新推荐文章于 2024-06-07 10:49:07 发布

ঞৣ忘ོ忧༊°

最新推荐文章于 2024-06-07 10:49:07 发布

阅读量2.2k

点赞数 1

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/weixin_70032683/article/details/127166056

版权

本文详细介绍了如何在Vue项目中引入和使用Echarts来绘制基本和复杂的折线图，包括普通折线图、多条折线对比图、平滑曲线图以及自定义坐标形式的数学公式曲线。通过实例代码，展示了如何配置Echarts选项以实现各种折线图效果，并提供了数据点和折线的样式设置方法。

摘要由CSDN通过智能技术生成

1 引入Echarts
1.1 安装
使用如下命令通过 npm 安装 ECharts

npm install echarts --save
1
注：本文安装Echarts版本为：“echarts”: “5.2.1”

1.2 引入
安装完成以后，可以将echarts全部引入，这样一来，我们可以在该页面使用echarts所有组件；引入代码如下：

import * as echarts from "echarts";
1
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完整代码如下：

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", () =&g