没有合适的资源?快使用搜索试试~ 我知道了~
【JavaScript源代码】在vue项目中封装echarts的步骤.docx
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 179 浏览量
2021-12-30
09:11:53
上传
评论
收藏 19KB DOCX 举报
温馨提示
试读
15页
在vue项目中封装echarts的步骤 为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记考虑echarts更新数据的特性,以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新,窗口缩放引起echarts图形变形问题 我希望这个echarts组件能设计成什么样 业务数据和样式配置数据分离,我只需要传入业务数据就行了 它的大小要完全由使用者决定 不会因为缩放出现变形问题,而是能很
资源推荐
资源详情
资源评论
1
在 vue 项目中封装 echarts 的步骤
为什么需要封装 echarts
每个开发者在制作图表时都需要从头到尾书写一遍完整的
opon 配置,十分冗余
在同一个项目中,各类图表设计十分相似,甚至是相同,
没必要一直做重复工作
可能有一些开发者忘记考虑 echarts 更新数据的特性,以及
窗口缩放时的适应问题。这样导致数据更新了 echarts 视图
却没有更新,窗口缩放引起 echarts 图形变形问题
我希望这个 echarts 组件能设计成什么样
2
业务数据和样式配置数据分离,我只需要传入业务数据就
行了
它的大小要完全由使用者决定
不会因为缩放出现变形问题,而是能很好地自适应
有时候某个图表的样式可能有点不一样,希望能保留自己
配置样式的灵活性
无论传入什么数据都能正确地更新视图
如果我传入的数据为空,能展示一个空状态
公共组件结构建议
当你把它书写为一个公共组件时,我我希望它应该是
这样:将单独机械的配置表独立成一份文件,暴露一个必
要的 vue 单文件,同时携带一份 README 说明文档,当然,
文档里面需要有关于你写的组件的使用示例和入参含义说
3
明,这在大型项目中非常重要。
vue 单文件代码
echart_pie 完整代码如下:
<template>
À<div class="chart"></div>
</template>
À
<script>
import { merge } from 'lodash';
import echart from 'echarts';
import { BASIC_OPTION } from './default_opon';
import { COLOR_ARRAY } from '../color';
import ResizeListener from 'element-resize-detector';
À
export default {
Àname: 'ChartPie',
Àprops: {
ÀÀseriesData: {
ÀÀÀtype: Array,
剩余14页未读,继续阅读
资源评论
mmoo_python
- 粉丝: 0
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功