Vue echarts封装实现流程
将echarts封装成组件，达到只要调用方法，传入数据和相应的参数就能生成图表的效果，避免在项目中编写大量重复和累赘的echarts的配置代码，实现的思路如下：
接口返回的一般是json数据，所以首先要将json数据进行处理，处理成echarts需要的数据形式
将echarts的配置代码封装在一个方法里，通过自定义的配置名进行调用
下面对我自己封装的组件 EchartsGenerate 逐步解释
首先看template
<template>
<div>
<slot></slot>
</div>
</template>
这里使用插槽slot是因为，有时候图表的样式要根据页面进行调整，所以用插槽好方便自定义样式，就比如下面的代码：
<echarts-generate ref="echarts" name-data-key="title" value-data-key="score">
<!-- 中间的元素设置id -->
<div class="chart-container" id="chart-sample"></div>
</echarts-generate>
<style>
.chart-container {
position: relative;
height: 50vh;
overflow: hidden;
}
</style>
通过class来设置图表的样式
再看props
props: {
// 坐标对应的 传入数据指定的键值
nameDataKey: {
type: String,
default: "name",
},
// 数据对应的 传入数据指定的键值
valueDataKey: {
type: String,
default: "value",
},
// 图表标题
chartTitle: {
type: String,
},
},
nameDataKey和valueDataKey分别对应传入数据的键的名字和值和名字，比如，假如数据是这样
[
{
id: "physical1",
// label
title: "physical1",
// 排序
sort: 0,
// 分数
score: 11,
desc: "户外活动1",
// 分数
point: 25,
},
{
id: "taste1",
title: "taste1",
sort: 1,
score: 25,
desc: "味道1",
// 分数
point: 35,
},
{
id: "acceptance1",
title: "acceptance1",
sort: 2,
score: 55,
desc: "接受度1",
// 分数
point: 45,
},
];
那么在组件上设置 name-data-key="title" value-data-key="score" 那图表的横坐标是title对应的值，竖坐标是score对应的值，这个在后面会详细说。
最后在看主要的方法
首先看处理json数据的方法
generateChartInData(list) {
let chartInData = {};
// 保证list中的每个对象的属性名是相同的，也就是说一一对应
for (let attr1 in list[0]) {
// 以每个属性名为名字构建数组
chartInData[attr1] = [];
}
list.forEach(function (item, index) {
for (let attr2 in item) {
// chartInData[attr2] 为underfined时 初始化为空数组
if (!chartInData[attr2]) {
chartInData[attr2] = [];
}
chartInData[attr2].push(item[attr2]);
}
});
chartInData["length"] = list.length;
return chartInData;
},
上面方法实现的效果是将json数组转换为一个包含以属性名命名数组的对象，例如传入的数据是这个格式
[
{
id: "physical1",
// label
title: "physical1",
// 排序
sort: 0,
// 分数
score: 11,
desc: "户外活动1",
// 分数
point: 25,
},
{
id: "taste1",
title: "taste1",
sort: 1,
score: 25,
desc: "味道1",
// 分数
point: 35,
},
{
id: "acceptance1",
title: "acceptance1",
sort: 2,
score: 55,
desc: "接受度1",
// 分数
point: 45,
},
];
通过generateChartInData方法生成的数据如下：
{
id: ["physical1", "taste1","acceptance1"],
title: ["physical1", "taste1", "acceptance1"],
sort: [ 0,1,2],
score: [11,25, 55],
desc: ["户外活动1","味道1","接受度1"],
point: [25,35,45],
length: 3
}
将通过generateChartInData生成的数据，传入下面的方法中
// 生成图表数据
chartDataFactory(dataType, chartInData) {
let chartOutData = {};
switch (dataType) {
// 根据需求配置数据
case "listData":
// 生成数组数据
// 单个数据格式为 [1,2,3]
// 多个数据格式为 [[1,2,3],[1,2,4],[3,4,5]]
if (Array.isArray(chartInData) && chartInData.length > 0) {
let seriesList = [];
chartInData.forEach((item) => {
seriesList = [...seriesList, item[this.valueDataKey]];
});
chartOutData = {
xAxisData: chartInData[0][this.nameDataKey],
seriesData: seriesList,
};
} else {
chartOutData = {
xAxisData: chartInData[this.nameDataKey],
seriesData: chartInData[this.valueDataKey],
};
}
break;
case "objectData":
// 生成对象数据
// 数据格式为
// {name:"", value:""}
chartOutData = {
seriesData: this.generateObjectData(
chartInData,
this.nameDataKey,
this.valueDataKey
),
};
break;
}
return chartOutData;
},
// 生成对象数据源
// 属性为 name和value
// chartInData 生成的图表数据
// nameKey name对应的键
// valueKey value对应的键
generateObjectData(chartInData, nameKey, valueKey) {
let objectList = [];
for (var i = 0; i < chartInData["length"]; i++) {
let objectItem = {
name: "",
value: "",
};
objectItem.name = chartInData[nameKey][i];
objectItem.value = chartInData[valueKey][i];
objectList = [...objectList, objectItem];
}
return objectList;
},
在chartDataFactory这个方法里面就用到了前面提到的nameDataKey和valueDataKey。然后这个方法处理了多条数据的，可以参考下
下面是将echarts图表的配置都封装在getOption这个方法里面，同时把chartDataFactory生成的数据传入这个方法
// 配置option
getOption(optionType, chartOutData) {
let option = {};
let seriesList = [];
// 如果seriesData有数据，且seriesData的第一个元素是数组，说明传入的数据是多对象数组
// 否则说明传入的是单个对象
if (
chartOutData.seriesData.length > 0 &&
Array.isArray(chartOutData.seriesData[0])
) {
seriesList = chartOutData.seriesData.map((item) => {
return (item = {
data: item,
});
});
} else {
seriesList = [
{
data: chartOutData.seriesData,
},
];
}
switch (optionType) {
// 基础折线图
case "lineOption":
// 遍历后添加其他属性
seriesList = seriesList.map((item) => {
return (item = {
data: item.data,
type: "line",
});
});
option = {
title: {
text: this.chartTitle,
},
xAxis: {
type: "category",
data: chartOutData.xAxisData,
},
yAxis: {
type: "value",
},
series: seriesList,
};
break;
// 基础柱状图
case "barOption":
seriesList = seriesList.map((item) => {
return (item = {
data: item.data,
type: "bar",
});
});
option = {
xAxis: {
type: "category",
data: chartOutData.xAxisData,
},
yAxis: {
type: "value",
},
series: seriesList,
};
break;
// 基础饼图
case "pieOption":
option = {
title: {
text: this.chartTitle,
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
},
series: [
{
name: "Access From",
type: "pie",
radius: "50%",
data: chartOutData.seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
break;
}
return option;
},
后续开发在getOption这个方法里添加配置
最后是生成图表的方法
// 生成图表
// domRef 图表标识 id
// dataType 图表数据类型
// optionType option类型
// list 要生成图表的数据列表
generateChart(domRef, dataType, optionType, list) {
let chartInData = null;
if (document.getElementById(domRef) || this.$refs[domRef]) {
let chartDom = this.initChartDom(domRef);
// 存在表格的话先进行销毁
if (chartDom) {
let chart = this.getChart(domRef);
// 存在表格的话先进行销毁
if (chart) {
chart.dispose();
}
// 如果传入数据为空，则返回
if(list.length<=0){
return
}
// 如果list的子元素是数组
if ( Array.isArray(list[0])) {
// list是包含多条数据的数组
chartInData = list.map((item) => {
// item 是数据列表
return this.generateChartInData(item);
});
}
// 如果list的子元素不是数组时对象
if (!Array.isArray(list[0])) {
chartInData = this.generateChartInData(list);
}
let data = this.chartDataFactory(dataType, chartInData);
let option = this.getOption(optionType, data);
if (option && typeof option === "object") {
chartDom.setOption(option);
}
}
}
},
其中图表标识最好是通过id，使用ref会没效果
完整代码如下
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: "EchartsGenerate",
data() {
return {
instances: {},
chartDom: null,
};
},
props: {
// 坐标对应的 传入数据指定的键值
nameDataKey: {
type: String,
default: "name",
},
// 数据对应的 传入数据指定的键值
valueDataKey: {
type: String,
default: "value",
},
// 图表标题
chartTitle: {
type: String,
},
},
created() {},
mounted() {},
components: {},
methods: {
// 用于用户数据不需要处理
// 直接传入数据源生成图表
generateChartWithData(domRef, optionType, data) {
if (document.getElementById(domRef) || this.$refs[domRef]) {
let chartDom = this.initChartDom(domRef);
// 存在表格的话先进行销毁
if (chartDom) {
let chart = this.getChart(domRef);
// 存在表格的话先进行销毁
if (chart) {
chart.dispose();
}
let option = this.getOption(optionType, data);
if (option && typeof option === "object") {
chartDom.setOption(option);
}
}
}
},
// 生成图表
// domRef 图表标识 id
// dataType 图表数据类型
// optionType option类型
// list 要生成图表的数据列表
generateChart(domRef, dataType, optionType, list) {
let chartInData = null;
if (document.getElementById(domRef) || this.$refs[domRef]) {
let chartDom = this.initChartDom(domRef);
// 存在表格的话先进行销毁
if (chartDom) {
let chart = this.getChart(domRef);
// 存在表格的话先进行销毁
if (chart) {
chart.dispose();
}
// 如果传入数据为空，则返回
if(list.length<=0){
return
}
// 如果list的子元素是数组
if ( Array.isArray(list[0])) {
// list是包含多条数据的数组
chartInData = list.map((item) => {
// item 是数据列表
return this.generateChartInData(item);
});
}
// 如果list的子元素不是数组时对象
if (!Array.isArray(list[0])) {
chartInData = this.generateChartInData(list);
}
let data = this.chartDataFactory(dataType, chartInData);
let option = this.getOption(optionType, data);
if (option && typeof option === "object") {
chartDom.setOption(option);
}
}
}
},
getCanvas(item) {
if (this.isDomSupported() && typeof item === "string") {
item = document.getElementById(item) || this.$refs[item];
} else if (item && item.length) {
item = item[0];
}
if (item && item.canvas) {
item = item.canvas;
}
return item;
},
// 获取图表
getChart(key) {
const canvas = this.getCanvas(key);
return Object.values(this.instances)
.filter((c) => c.canvas === canvas)
.pop();
},
isDomSupported() {
return typeof window !== "undefined" && typeof document !== "undefined";
},
// 初始化图表dom
// 可以通过id和ref两种属性进行初始化
initChartDom(domRef) {
let chartDom = null;
let initDom = document.getElementById(domRef) || this.$refs[domRef];
chartDom = this.$echarts.init(initDom, null, {
renderer: "canvas",
useDirtyRect: false,
});
return chartDom;
},
// 生成图表数据
chartDataFactory(dataType, chartInData) {
let chartOutData = {};
switch (dataType) {
// 根据需求配置数据
case "listData":
// 生成数组数据
// 单个数据格式为 [1,2,3]
// 多个数据格式为 [[1,2,3],[1,2,4],[3,4,5]]
if (Array.isArray(chartInData) && chartInData.length > 0) {
let seriesList = [];
chartInData.forEach((item) => {
seriesList = [...seriesList, item[this.valueDataKey]];
});
chartOutData = {
xAxisData: chartInData[0][this.nameDataKey],
seriesData: seriesList,
};
} else {
chartOutData = {
xAxisData: chartInData[this.nameDataKey],
seriesData: chartInData[this.valueDataKey],
};
}
break;
case "objectData":
// 生成对象数据
// 数据格式为
// {name:"", value:""}
chartOutData = {
seriesData: this.generateObjectData(
chartInData,
this.nameDataKey,
this.valueDataKey
),
};
break;
}
return chartOutData;
},
// 生成对象数据源
// 属性为 name和value
// chartInData 生成的图表数据
// nameKey name对应的键
// valueKey value对应的键
generateObjectData(chartInData, nameKey, valueKey) {
let objectList = [];
for (var i = 0; i < chartInData["length"]; i++) {
let objectItem = {
name: "",
value: "",
};
objectItem.name = chartInData[nameKey][i];
objectItem.value = chartInData[valueKey][i];
objectList = [...objectList, objectItem];
}
return objectList;
},
// 生成图表需要的数据
// list - 对象数组
generateChartInData(list) {
let chartInData = {};
// 保证list中的每个对象的属性名是相同的，也就是说一一对应
for (let attr1 in list[0]) {
// 以每个属性名为名字构建数组
chartInData[attr1] = [];
}
list.forEach(function (item, index) {
for (let attr2 in item) {
// chartInData[attr2] 为underfined时 初始化为空数组
if (!chartInData[attr2]) {
chartInData[attr2] = [];
}
chartInData[attr2].push(item[attr2]);
}
});
chartInData["length"] = list.length;
return chartInData;
},
// 配置option
getOption(optionType, chartOutData) {
let option = {};
let seriesList = [];
// 如果seriesData有数据，且seriesData的第一个元素是数组，说明传入的数据是多对象数组
// 否则说明传入的是单个对象
if (
chartOutData.seriesData.length > 0 &&
Array.isArray(chartOutData.seriesData[0])
) {
seriesList = chartOutData.seriesData.map((item) => {
return (item = {
data: item,
});
});
} else {
seriesList = [
{
data: chartOutData.seriesData,
},
];
}
switch (optionType) {
case "lineOption":
// 遍历后添加其他属性
seriesList = seriesList.map((item) => {
return (item = {
data: item.data,
type: "line",
});
});
option = {
title: {
text: this.chartTitle,
},
xAxis: {
type: "category",
data: chartOutData.xAxisData,
},
yAxis: {
type: "value",
},
series: seriesList,
};
break;
case "barOption":
seriesList = seriesList.map((item) => {
return (item = {
data: item.data,
type: "bar",
});
});
option = {
xAxis: {
type: "category",
data: chartOutData.xAxisData,
},
yAxis: {
type: "value",
},
series: seriesList,
};
break;
case "pieOption":
option = {
title: {
text: this.chartTitle,
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
},
series: [
{
name: "Access From",
type: "pie",
radius: "50%",
data: chartOutData.seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
break;
}
return option;
},
},
};
</script>
<style>
</style>
使用的示例代码如下：
<template>
<div>
<!-- 子组件设置ref -->
<echarts-generate ref="echarts" name-data-key="title" value-data-key="score">
<!-- 中间的元素设置id -->
<div class="chart-container" id="chart-sample"></div>
</echarts-generate>
</div>
</template>
<script>
import EchartsGenerate from "@/components/charts/EchartsGenerate";
export default {
name: "EchartsSample",
data() {
return {
//传入的json数据
chartData: [],
};
},
created() {},
async mounted() {
await this.getData();
// 通过调用子组件的方法生成图表，设置id获取元素
// 无法通过ref获取
this.$refs.echarts.generateChart(
"chart-sample",
"listData",
"barOption",
this.chartData
);
},
components: {
"echarts-generate": EchartsGenerate,
},
methods: {
async getData() {
// 多个数据
// this.chartData = [
// [
// {
// id: "physical-activity",
// // label
// title: "physical activity",
// // 排序
// sort: 0,
// // 分数
// score: 13,
// desc: "户外活动",
// // 分数
// point: 20,
// },
// {
// id: "taste",
// title: "taste",
// sort: 1,
// score: 20,
// desc: "味道",
// // 分数
// point: 30,
// },
// {
// id: "acceptance",
// title: "acceptance",
// sort: 2,
// score: 50,
// desc: "接受度",
// // 分数
// point: 40,
// },
// ],
// [
// {
// id: "physical1",
// // label
// title: "physical1",
// // 排序
// sort: 0,
// // 分数
// score: 11,
// desc: "户外活动1",
// // 分数
// point: 25,
// },
// {
// id: "taste1",
// title: "taste1",
// sort: 1,
// score: 25,
// desc: "味道1",
// // 分数
// point: 35,
// },
// {
// id: "acceptance1",
// title: "acceptance1",
// sort: 2,
// score: 55,
// desc: "接受度1",
// // 分数
// point: 45,
// },
// ]
// ];
// 单个数据
this.chartData =
[
{
id: "physical1",
// label
title: "physical1",
// 排序
sort: 0,
// 分数
score: 11,
desc: "户外活动1",
// 分数
point: 25,
},
{
id: "taste1",
title: "taste1",
sort: 1,
score: 25,
desc: "味道1",
// 分数
point: 35,
},
{
id: "acceptance1",
title: "acceptance1",
sort: 2,
score: 55,
desc: "接受度1",
// 分数
point: 45,
},
];
},
},
};
</script>
<style>
.chart-container {
position: relative;
height: 50vh;
overflow: hidden;
}
</style>
代码在下面
项目地址 https://gitee.com/joeyan3/joe-vue-demo-project
到此这篇关于Vue echarts封装实现流程的文章就介绍到这了,更多相关Vue echarts封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue Echarts实现图表轮播图以及图表组件封装和节流函数优化讲解
目录 一.为什么要优雅的使用echarts 二.最初的表格组件 三.初步的封装 四.性能优化 一.为什么要优雅的使用echarts 为了提高代码的规范性.复用性,vue中最常用的就是将具有某些功能的代码封装到一个插件.如果没有对插件进行封装,在后期使用插件的时候效率会十分低下也不便于后期对程序的维护拓展,在优雅的使用echarts时,首先,我们考虑到多个地方需要用到echarts,就需要封装一个组件出来,由于每一个图中的属性均由配置项option进行控制,所以我们可以将option选项提取出来,
-
Vue ECharts简易实现雷达图
目录 前言 雷达图特点 雷达图的基本实现 雷达图的常见效果 显示数值 区域面积 绘制类型 完整代码 前言 本篇来学习写雷达图 雷达图特点 可以用来分析多个维度的数据与标准数据的对比情况 雷达图的基本实现 ECharts 最基本的代码结构 定义各个维度的最大值 准备具体产品的数据 在 series 下设置 type:radar <!DOCTYPE html> <html lang="en"> <head> <meta charset="
-
Vue ECharts设置主题实现方法介绍
目录 前言 内置主题 自定义主题 前言 本篇来学习下ECharts中如何设置图表主题 内置主题 ECharts 中默认内置了两套主题: light dark var chart = echarts.init(dom, 'light') var chart = echarts.init(dom, 'dark') <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
-
Vue使用Echarts实现大屏可视化布局示例详细讲解
目录 一.效果展示 二.基本的布局 三.背景 四.代码 布局中遇到的一些问题 一.效果展示 先看一下展示的效果,无论是尺寸多宽的屏幕,都会将内容显示完整,做到了正正的响应式.唯一不足的是图表中的样例,会随着图表的缩放而变换位置,窗口尺寸变化过快会反应不过来,好在有节流函数,可以让浏览器计算量没有那么大.本篇博客不会直接拿echarts图表下手,会先介绍一些这个大屏可视化的响应式布局.后面会出一个专门的博客介绍echarts的使用. 二.基本的布局 大致的布局如下,整体分为头部与body,头部有标
-
Vue使用Echarts画柱状图详解
目录 前言 柱状图实现步骤 柱状图常见效果 标记 显示 前言 本篇来学习下柱状图的实现 柱状图实现步骤 ECharts 最基本的代码结构 准备x轴的数据 准备 y 轴的数据 准备 option , 将 series 中的 type 的值设置为: bar <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v
-
Vue Echarts简易实现仪表盘
目录 前言 仪表盘的特点 仪表盘的基本实现 仪表盘的常见效果 前言 本篇来学习写仪表盘图 仪表盘的特点 可以更直观的表现出某个指标的进度或实际情况 仪表盘的基本实现 ECharts 最基本的代码结构 准备数据, 设置给 series 下的 data 在 series 下设置 type:gauge <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
-
Vue echarts封装实现流程
将echarts封装成组件,达到只要调用方法,传入数据和相应的参数就能生成图表的效果,避免在项目中编写大量重复和累赘的echarts的配置代码,实现的思路如下: 接口返回的一般是json数据,所以首先要将json数据进行处理,处理成echarts需要的数据形式 将echarts的配置代码封装在一个方法里,通过自定义的配置名进行调用 下面对我自己封装的组件 EchartsGenerate 逐步解释 首先看template <template> <div> <slot>&l
-
vue.js如何将echarts封装为组件一键使用详解
前言 本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 说明 做项目的时候为了让数据展示的更加直观,总会用到图表相关的控件,而说到图表控件第一时间当然想到ECharts这个开源项目,而它不像iview.element-ui这些组件使用起来那么便捷,需要绕一个小弯,为了图方便于是对ECharts进行了一层封装 控件演示 控件使用 概要 基于echarts的二次封装 由数据驱动 控件源码见src/com
-
Vue echarts画甘特图流程详细讲解
vue项目中添加echarts,只需要增加echarts依赖,然后在main.js中引入echarts就可以使用了. 1.npm install echarts --save 2.修改main.js import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 3.具体页面使用: <template> <div class="about"> <h1>This is echart
-
Vue echarts模拟后端数据流程详解
目录 KOA2的使用 安装 Koa app.js入口文件 KOA2的使用 KOA2是由Express 原班人马打造. 环境依赖 Node v7.6.0 及以上. 支持 async 和 await 洋葱模型的中间件 写响应函数(中间件) 响应函数是通过use的方式才能产生效果, 这个函数有两个参数, ctx :上下文, 指的是请求所处于的Web容器,我们可以通过 ctx.request 拿到请求对象, 也可 以通过 ctx.response 拿到响应对象 next :内层中间件执行的入口 模拟服务
-
Vue二次封装axios流程详解
目录 一.为什么要封装axios 二.怎么封装axios 三.具体步骤 vue项目的前期配置 配置config文件中的代理地址 封装axios实例-request.js 四.封装请求-http.js 五.正式封装API用于发送请求-api.js 六.如何在vue文件中调用 一.为什么要封装axios api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护. 通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口
-
VUE2.0+Element-UI+Echarts封装的组件实例
本文用Vue2.0+elementUI的panel组件和table组件+echarts的柱状图和折线图实现对结果的展示,实现了表格和图之间的切换和图和表之间的转置. -html <div class="resultDiv"> <div id="panels"> <el-collapse> <el-collapse-item v-for="item in indicators"> <templa
-
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
本篇文档主要是利用echarts实现可拖动节点的折线图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c=line-draggable,但是不是用vue写的,并且在改写为vue组件的过程中遇到了很多问题,在百度过程中发现并没有相关的文档,所以决定自己开发,并在demo的基础上开发了一些实用的功能,所以把这个过程记录下来.文档中还有很多不够完善的地方,欢迎讨论哈! 需求:制作一个折线图用于显示当前24小时
-
Springboot运用vue+echarts前后端交互实现动态圆环图
目录 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动态饼图的实现 一.环境配置 1.1 安装acharts //npm也一样 cnpm install echa
-
Vue+Echarts实现简单折线图
本文实例为大家分享了Vue+Echarts实现简单折线图的具体代码,供大家参考,具体内容如下 Vue+Echarts实现一个折线图,打开vue的项目: 1.在项目里面安装echarts npm install echarts --save 2.在需要用图表的地方引入 import echarts from 'echarts' 3.打开my.vue 继续写代码,代码如下: <template> <!--为echarts准备一个具备大小的容器dom--> <div