【知识分享】Echarts折线图封装成组件

加瓦程序设计师

于 2024-02-29 09:10:29 发布

阅读量1.2k

点赞数 16

分类专栏： Java知识分享文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/lf21qp/article/details/136361577

版权

本文详细介绍了如何在Vue组件中封装Echarts图表，通过props接收动态参数，如数据系列、轴标签等，并展示了一个实例，演示如何在不同页面中使用该组件展示自定义图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装思路：

1.定义个组件，在里面对折线图的代码进行封装

2.将想要动态传入的参数进行抽取

3.在其他页面传入相关的参数，直接展示出图标

具体代码：

1.封装的组件的页面代码

</div>

</template>

import * as echarts from 'echarts'

export default {

props: {

firstData: {

type: Array,

default: []

secondData: {

type: Array,

default: []

xAxisData: {

type: Array,

default: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']

legendData: {

type: Array,

default: []

chartHeight: {

type: String,

default: '300px' // 默认高度为 400px

chartWidth: {

type: String,

default: '100%' // 默认高度为 400px

name: {

type: String,

default: ''

xAxisTickShow: {

type: Boolean,

default: false

yAxisTickShow: {

type: Boolean,

default: false

ySplitLineShow: {

type: Boolean,

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

加瓦程序设计师

关注关注

16
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Echarts-java后端封装option--（一）柱状图/折线图 测试用例

木枫

08-17

1万+

最近由于要使用到百度的echarts来做图表的展示，近些天一直在学习echarts的使用，说实话百度echarts的官方文档对于前端通过js来完成图表的展示，确实有很方便之处，但是对于某些数据的处理和赋值都在前端完成确实有些繁琐，国人对于这方面矢志不渝，在后端通过封装好option对象然后转成json传到前端极大的简化了前端对option的操作。这里就简单的写一些后端对option对象的封装。首先

eCharts X轴文字过长解决办法

EsquireY的博客

08-19

643

1,文本倾斜 axisLabel: { color: "#fff", rotate: "30", // 倾斜角度版本4.0以后配置直接写在 axisLabel } 换行显示 axisLabel:{ formatter: function(params) { var newParamsName = ""; // 最终拼接成的字符串 var paramsNameNumber = params.length; // 实际标签的个数 var p

参与评论您还未登录，请先登录后发表或查看评论

echarts折线图封装案例

qq_43712187的博客

06-16

741

文章目录一、封装代码二、使用2.1、提取2.2、使用一、封装代码 <template> <div class="echarts" ref="chart"></div> </template> <script> const echarts = require("echarts"); import { mapGetters } from "vuex"; import "echarts/theme/macarons.js"; export de

基于echarts对折线图的封装

yw00yw的博客

11-26

541

核心库 echarts lodash ResizeListener 代码  <template> <div class="charts" ref="charts"></div> </template> <script> import ec

vue echarts封装折线图

weixin_42388872的博客

05-31

856

vue中echarts图折线图封装

(echarts)单/多折线图封装相关总结及使用

nyf_unknow的博客

10-13

556

一、封装组件lineCharts.vueprops: {},id: {},width: {},height: {},xData: {return [];},},return {name: "销量态势",},},},data() {return {},watch: {},},},});},if (!return;

uni-app封装echarts折线图，安卓真机测试可以使用

02-09

1. 创建一个uni-app的Vue组件，例如`EchartsLine.vue`，用于封装ECharts折线图。 2. 在组件中引入ECharts的JS库，并配置好需要的图表选项。 3. 使用uni-app的`uni.createSelectorQuery()`方法获取canvas元素，这是...

封装echarts折线图（基于Vue3、TS）

C90283的博客

03-16

546

封装echart折线图

vue组件封装echart折线图

08-30

使用Vue组件封装Echart柱状图，直接引用组件js，并且在需要展示的地方，进行Vue数据传值，支持多坐标轴。本案例非Webpack打包，直接引用JS即可。适用于部分页面使用Vue功能，或者想尝试Vue功能的同学。该组件使用...

小程序echarts折线图示例

08-18

总的来说，"小程序echarts折线图示例"是一个关于如何在微信小程序中利用`ec-canvas`组件和ECharts库创建横向滚动折线图的教学资源。通过学习和实践这个示例，开发者可以掌握在小程序环境中实现复杂数据可视化的技能...

echart学习 - 折线图封装

玖尘的博客

11-29

1112

面向过程的编程重用函数、面向对象的编程重用类、范型编程重用的是算法的源代码，而组件编程则重用特定功能完整的程序模块。

ECharts图表整合封装----折线图、柱状图、扇形图

温柔雨哥的博客

12-23

1071

基于echarts实例封装的组件，用于需要echarts比较多的时候，将他进行封装，哪个页面需要直接引用就好 1、安装 npm i v-charts echarts -S 2、完整引入 // main.js import Vue from ‘vue’ import VCharts from ‘v-charts’ import App from ‘./App.vue’ Vue.use(VCharts) 3、echarts封装的组件封装了各种类型的图表。只需要给个type类型判断，就可以区分使用组件的哪种.

封装echarts,折线图

最新发布

Fs670267542的博客

10-25

190

【代码】封装echarts,折线图。

Echarts折线图数据封装

qq_42551543的博客

09-15

790

Echarts折线图数据封装数据库查询到的数据如图：（近三年的数据) 将数据转化为Echarts折线图可以直接运用的数据:

Vue封装echarts折线图组件

爱菇凉的博客

06-05

6189

最近项目中数据展示，需要引入n个相同的echarts，为了减少代码冗余，故封装一个组件。 1. 建两个.vue文件，关系为父子组件，如： analysis.vue(父组件)，analysisChart.vue(子组件，也就是要封装的echart内容) 2. 父组件中需要传递给子组件中需要的数据，我所用的需要这几个数据： id：子组件（图表）实例化需要一个唯一的id; time： x轴的显示数据, ...

vue封装echarts折线图

weixin_38999134的博客

05-07

556

创建LineChart.vue <template> <div> <div ref='barchart' :style="echartStyle" > </div> </div> </template> <script> //在 echarts.vue 中 //...

echarts堆叠折线图组件

放飞的博客

03-09

637

StackedLine.js <template> <div :id="container" style="height: 100%;width: 100%" /> </template> <script> import echarts from 'echarts'; export default { name: 'StackedLine', props: { container: { type: String,

echarts 折线图和柱状图的通用方法封装

JJ_huahua的博客

06-02

589

echarts 折线图和柱状图的通用方法封装

echarts折线图插件

hql1024的博客

10-15

798

css .lineBox { width: 38rem; } html <div id="Vue"> <div class="lineBox"> <div id="main" style="width:100%;height:400px;"> </div>...

vue3 echarts折线图封装使用

07-28

对于Vue 3和Echarts折线图的封装使用，可以按照以下步骤进行： 1. 首先，安装Echarts和Vue Echarts插件： ```bash npm install echarts vue-echarts@5.0.0 ``` 2. 在Vue组件中引入Echarts和Vue Echarts： ```javascript import * as echarts from 'echarts'; import ECharts from 'vue-echarts'; ``` 3. 注册Vue Echarts组件： ```javascript export default { components: { 'v-chart': ECharts, }, } ``` 4. 在Vue模板中使用v-chart组件，配置echarts选项： ```html <template> <div> <v-chart :options="chartOptions"></v-chart> </div> </template> ``` 5. 在Vue组件的data中定义echarts选项的配置对象chartOptions： ```javascript export default { data() { return { chartOptions: { title: { text: '折线图', }, xAxis: { data: ['A', 'B', 'C', 'D', 'E'], }, yAxis: {}, series: [ { name: '数据1', type: 'line', data: [10, 20, 30, 40, 50], }, ], }, }; }, } ``` 6. 可以根据需要自定义Echarts图表的配置项，如标题、x轴和y轴的数据等。这样，你就可以在Vue 3中使用Echarts折线图进行数据可视化了。记得根据实际需求修改echarts选项的配置对象。