当前位置:首页 > 图片 > 时尚娱乐 > 正文
文章正文

echarts 动态图 ECharts 3 测试版发布 焕然一新的面貌

图片 > 时尚娱乐 > :echarts 动态图 ECharts 3 测试版发布 焕然一新的面貌是由美文导刊网(www.eorder.net.cn)为您精心收集,如果觉得好,请把这篇文章复制到您的博客或告诉您的朋友,以下是echarts 动态图 ECharts 3 测试版发布 焕然一新的面貌的正文:

ECharts 3 测试版发布 焕然一新的面貌

ECharts 3 测试版发布

注:由于是转载内容,文章中实例效果无法查看,如需查看详情请往ECharts3。

ECharts 在 github 上沉寂了数个月,想必很多小伙伴充满了各种疑问,ECharts是不是不维护了?你们以后是不是不做了?别着急,其实这几个月,我们的设计师、工程师一直厉兵秣马,加班加点,没有周末,没有女朋友地疯狂工作中。 终于,ECharts 的又一个重大版本即将出炉,在 ECharts 3 正式版发行前,我们选择了今天,12.3,一个能够隐喻我们一步一步从1.0到2.0再到3.0走来的日子,提前给广大用户带来 ECharts 3 的测试版。 那 ECharts 3 究竟会有哪些新的特征,我们用数月究竟在颠覆着自己的什么呢?接下来让我们一一为您道来:

焕然一新的面貌

从底层的技术架构到上层的外观展现,都进行了较大的升级。无需多言,请看下面的诸多例子。

数据和坐标系的抽象及统一

ECharts 3 中,数据结构进行了统一化抽象,最常用的数据结构有:线性表、树、图。例如,线性表以及树、图的节点列表的结构可以归一化为这样的二维数组:

[

[1,91,45,125,”良”],

[2,65,27,78,”良”],

[3,83,60,84,”优”],

]

这种设计利于跨组件的数据处理(数据过滤、视觉编码等),并且为多维度的数据使用带来了方便。

ECharts 3 中另一个重要的数据结构抽象是独立出了“坐标系”概念。事实上在 ECharts 2 中已经有gridpolar配置项存在,但是并不是按一个“坐标系”的理解去实现的。ECharts 3 中,支持了直角坐标系(catesian,兼容 ECharts 2 中的 grid)、极坐标系(polar)、地理坐标系(geo)。图表可以跨坐标系存在,例如折、柱、散点等图可以放在直角坐标系上,也可以放在极坐标系上,甚至可以放在地理坐标系中。

下面是一个极坐标系的例子:

下面是一个散点图在地理坐标系上的例子:

我们要可视化的数据有多种类型,比如“数值型”、“类别型”,数轴也要对这不同的类型给予支持。更细致的,还支持“时间轴”、“对数轴”等。数据和坐标系统一抽象后,能够方便得搭配不同类型的数轴。

下面是一个x轴y轴均为“类别型“数轴(category)的例子:

一个 ECharts 实例中,也可以同时存在多个坐标系了,这便于做出更丰富的协同分析效果。

下面是著名的 Anscombe’s Quartet:

其实,ECharts 3 中每一种组件都可以同时存在多个。比如可以使用多个dataRange组件进行更复杂的筛选,多个title组件表达更个性化的文字展示。在 Option 中,用数组来表示每种组件的多个实例,如:

polar: [

{…}, // 第一个极坐标系

{…}, // 第二个极坐标系

]

移动支持流量珍贵的移动端需要图表库的体积尽量小。ECharts 和 ZRender 代码的重构,带来了核心部分体积的减小。ECharts 组件众多,并且会逐渐增加,我们提供了更细粒度的按需打包能力。最小体积缩小为 ECharts 2 的 40%。

这是 ECharts 3 的在线构建页面

移动端交互也做了优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移,如下图:

配置方式说明:

chart.setOption({

…, // 其他配置项

dataZoom: [

// 下面来定义三个dataZoom组件

{

type: ‘inside’, // 表示手指或鼠标的操作区域在坐标系中。

xAxis: 0,

start: 20,

end: 70

}

]

});

另外说一个细节:ECharts 2 中,直角坐标系的位置设置参数(x, y, x2, y2 等),设置的是“两个数轴所形成的矩形”的位置,并不包含数轴的文字、刻度。这种做法使得数据变化时数轴位置能够稳定,从而方便存在动态数据或数据过滤组件(dataZoom)等场景下的展示。但是缺点是,使用者需要估算数轴文字的宽度,并不方便使用。ECharts 3 中,直角坐标系(grid属性)中加入了 containLabel 参数,位置参数包含了数轴文字的尺寸,从而方便自适应数轴文字的宽度,不用担心超出屏幕。

grid: {

containLabel: true

}

ECharts 3 还将持续对移动端的体验进行优化。

更深度的交互式数据探索

交互是从数据中发掘信息的重要手段。总览为先缩放过滤按需查看细节是数据可视化交互的基本需求。

ECharts 一直在“交互”的路上前进,legenddataRangedataZoomroamselecttooltip等组件提供了数据筛取、视图缩放、展示细节等能力。

ECharts 3 中,对这些组件进行了广泛增强,例如支持在数据的各种坐标轴、维度进行数据过滤、缩放,以及在更多的图中采用这些组件。下面举几个例子。

在任何数轴,都支持使用dataZoom组件进行数据窗口操作。 如上图,在左右y轴的dataZoom,

chart.setOption({

…, // 其他配置项

dataZoom: [

// 下面来定义三个dataZoom组件

{

xAxis: 0, // 这个dataZoom组件控制x轴。

start: 10, // 初始时,区域开始自总长的 10%。

end: 30 // 初始时,区域结尾为总长的 30%。

},

{

yAxis: 0, // 这个dataZoom组件控制第一个y轴。

filterMode: ‘empty’ // 数据过滤的方式,可选值’filter’或’empty’。

// ‘filter’表示dataZoom窗口外的节点直接删去,折线会连接。

// ‘empty’表示dataZoom窗口外的节点设置为缺失点,折线会断开。

},

(echarts 动态图)

{

yAxis: 1 // 这个dataZoom组件控制第二个y轴

}

]

});

另一个例子:

上图的数据实际是多维的:

[

[1,91,45,125,0.82,34,23,”良”],

[2,65,27,78,0.86,45,29,”良”],

[3,83,60,84,1.09,73,27,”良”],

[4,109,81,121,1.28,68,51,”良”],

[5,106,77,114,1.07,55,51,”轻度污染”],

[6,109,81,121,1.28,68,51,”轻度污染”],

[7,106,77,114,1.07,55,51,”轻度污染”],

[8,89,65,78,0.86,51,26,”良”],

]

里面每一列是一个维度,从左到右,依次是:

日期AQI指数PM2.5PM10一氧化碳 (CO)二氧化氮 (NO2)二氧化硫 (SO2)等级。

一个直角坐标系只有两个轴,我们可以把第一个维度(时间)映射到x轴,第二个维度(AQI指数)映射到y轴。但如果想对其他维度的数据进行视觉表达和交互式的筛选,则可以用到上图中的dataRange组件。

第一个dataRange组件表达了PM2.5这一维度的筛选,把数值映射到了圆形大小;

第二个dataRange组件表达了二氧化硫这一维度的筛选,把数值映射到了颜色明暗。

配置方式说明:

视觉映射配置在inRangeoutOfRange属性中。

图表的和dataRange组件本身的能分别配置这两个属性(见下面方controller属性) 。

inRangeoutOfRange中,能够配置的视觉通道有:color,colorSaturation,colorLightness,colorHue,symbol,symbolSize。

color设置为颜色值列表,如[#324123, ‘#453e2f’, ‘#756ff2′, …],会自动根据数值进行差值计算,得到映射的颜色。

其他视觉通道均使用数组的形式表明 [最小值, 最大值]。

chart.setOption({

…, // 其他配置项

dataRange: [

{ // 右上方的dataRange组件

dimension: 2, // 这个dataRange组件把维度2的数值进行视觉映射

// 维度从零开始计数,维度值2表示第三个维度。

min: 0, // 最小值

max: 250, // 最大值

calculable: true,

text: [‘圆形大小:PM2.5′],

inRange: {

symbolSize: [10, 70] // 选中范围内的数值被映射到10px~70px的图形尺寸上

},

outOfRange: {

symbolSize: [10, 70], // 选中范围外的数值被映射到10px~70px的图形尺寸上

color: [‘rgba(255,255,255,.2)’] // 选中范围外设置为灰色

},

controller: {

inRange: {

color: [‘#c23531′] // dataRange组件本身的(选中范围内的)颜色

},

outOfRange: {

color: [‘#444′] // dataRange组件本身的颜色(选中范围外的)颜色

}

},

…, // 其他位置、尺寸、样式相关配置项

},

{ // 右下方的dataRange组件

dimension: 6, // 这个dataRange组件把维度6的数值进行视觉映射

min: 0,

max: 50,

calculable: true,

precision: 0.1,

text: [‘明暗:二氧化硫’],

inRange: {

colorLightness: [1, 0.5] // 选中范围内的数值被映射到1~0.5的颜色亮度上

// 颜色亮度(lightness)的含义是 HLV 中的L。

},

outOfRange: {

color: [‘rgba(255,255,255,.2)’] // dataRange组件本身的颜色(选中范围外的)颜色

},

controller: {

inRange: {

color: [‘#c23531′] // dataRange组件本身的(选中范围内的)颜色

},

outOfRange: {

color: [‘#444′] // dataRange组件本身的颜色(选中范围外的)颜色

}

}

}

]

});

更丰富的视觉编码手段“数据可视化”本质是数据到视觉元素的编码过程。我们把数据映射到坐标系中的点,或者颜色、形状、图形大小等视觉通道。前述的dataRange提供了丰富的视觉编码的方式。另外在各种图中,也提供了一些有一定意义的视觉编码方式。例如:

这个Treemap是奥巴马2012年的预算,每种类别的预算额度映射到了面积,使我们可以直观地感受到预算额的大小。而如果在这个图上,要进一步描述相比于 2011年 的增长率,我们可以将其映射到颜色的明暗度上。点击右上角图例中第三项“增长率”,能体会到这种比较效果。

映射到明暗的配置方式说明:

chart.setOption({

…, // 其他配置项

series: [

{

type: ‘treemap’,(echarts 动态图)

data: [

{

value: [121212, 131313, 50],

name: ‘Centers for Medicare’,

children: [

{ … }

]

},

],

visualDimension: 2, // 表示用data的value[2]的数值(即增长率)进行颜色映射

levels: [ // levels 中设置了树的每层级的参数。level[0]是最顶层。

{

color: [

‘#c23531′, ‘#314656′, ‘#61a0a8′, ‘#dd8668′,

‘#91c7ae’, ‘#6e7074′, ‘#61a0a8′, ‘#bda29a’,

‘#44525d’, ‘#c4ccd3′

], // 这是根层级的颜色列表,每个块分配的颜色会向子树传递

colorMappingBy: ‘id’ // 表示根层级的的数值按照类别映射到映射列表

},

{

colorAlpha: [0.5, 1] // 第二层级开始,数值映射到color的alpha值。

}

],

… // treemap series中其他配置项

}

]

});

动画支持动画并不容易,容易带来代码结构的复杂、体积的增加、鲁棒性的降低。但是在可视化中动画往往易于表达出数据在变化时的联系,使用户不至于迷失焦点,这些对于用户交互分析、动态数据展示有着重要作用。

ECharts 3 中在各种初始动画、转换动画、强调动画上都做了相当多的工作,使得数据观察更人性和清晰。

动画表达变化的一个例子,各国人均收入(x轴)、平均寿命(y轴)、人口(圆面积)在时间维度上的展现:

新图表

ECharts 3 中加入了一些新的图表。

关系图(Graph):最直观的表达关系数据。支持了 gexf。能够采用不同的布局方法。

Treemap:易于展示树状结构的数据,较大的数据更容易被关注到。

平行坐标系(Parallel Coordinates):易于表达多维数据。

TODO 更多的图表还有待被加入。

Option的变动

ECharts 3 对于 ECharts 2 的 Option 配置兼容,但是一小部分原有的 Option 配置方式已经不被推荐(deprecated),个别细节有所差异。

组件/图表位置的统一配置

组件/图表位置的描述,统一采用了x,x2,y,y2,width,height的方式,每个属性值都可以使用绝对数值(表示px)或者百分比(表示占 echarts container 的百分比)。这样的表达方式和 css 比较相近,表达能力比较强,易于屏幕尺寸的适应和调整。

label的配置结构的变化

label属性描述了系列中标签的相关配置信息。

ECharts 2 中,label属性一般放在itemStyle.normal和itemStyle.emphsis中,例如:

itemStyle: {

normal: {

…,

label: {

show: true,

formatter: …,

textStyle: {

}

}

},

emplsis: {

…,

label: {

show: true,

position: ‘top’,

formatter: …,

textStyle: {

}

}

}

}

为了让结构更合理,ECharts 3 中 label 被移出来和 itemStyle 平级:

itemStyle: {

normal: {

},

emphsis: {

}

},

label: {

normal: {

},

emphasis: {

}

}

当然,原来的配置方式还是兼容的,但是不推荐。

另外,ECharts 3 中新增了不少Option配置项,在前面的例子中简单做了一些介绍了,这里不赘述。更多细节会在将要发布的文档中描述。

更丰富、漂亮的图表、更炫酷的动画、更加专业的可视化实现、更深度的交互式数据探索、更丰富的视觉编码手段、更好的移动支持、更好的性能、更小的体积,不知道上面的新特性是否有击中您对于图表、对于数据可视化的需求与痛点,如果还没看过瘾,可以点击我们全新的示例页面查看更多漂亮而强大的 ECharts 图表。

在 3.0 正式版发布之前,我们还有很多的工作需要完善:

完善产品质量,这需要广大 ECharts 用户的共同参与,如果您在使用 ECharts 3 测试版过程中有任何问题,欢迎通过以下渠道向我们反馈

Github Issue

通过发邮件给我们的邮箱 echarts-bug@baidu.com

加入我们的 ECharts 沟通 Baidu Hi群组(1379172)

(echarts 动态图)

完善文档、相关示例、以及学习资料

正式版我们将精耕细作,为大家带来一份优质的新年礼物。

最后,欢迎大家继续支持 ECharts,我们会一如既往地给大家带来优秀的产品。

测试版体验入口:ECharts 3

End.

转载请注明来自36大数据(36dsj.com):36大数据» ECharts 3 测试版发布,焕然一新的面貌返回搜狐,查看更多

手摸手,带你用 vue 撸后台 系列三(实战篇)

完整项目地址:vue-element-admin

系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)

系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)

前言

在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操。

Element

去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen,那时候vue2 刚发没多久,市面上也没有很多其它的vue2的ui框架。虽然Element也有很多的不足,前期的bug也不少,但我还是选择了它,说一下我选择Element的原因吧:

  • 有大厂背书 : 虽然核心开发只有三个人,但至少不用担心哪天就不维护,带着小姨子跑路了。

  • 持续迭代 : Element发版至今release了四十多个版本,之前平均都是一周一个小版本更新(是不是不小心暴露了它bug多的问题/(ㄒoㄒ)/~~)

  • 生态圈优异,社区活跃 :其 contributors已经有160多人(前期我有饶有兴致的贡献过几个pr,参与过七八十个issue),社区里也有很多基于Element 的拓展组件,也有很多相关的qq讨论群或者 gitter。

  • 社区的认可:目前Element已经是vue相关最多star的开源项目了,体现出了社区对其的认可。

说了这么多优点,作为一个资深Element用户还是有些要抱怨的~和react老大哥 Ant Design相比还是有一定的差距的,不管是组件的丰富性,参数的可配性还是文档的完整性,亦或是UI的交互和美观度。不过 ant 也是经过了近9k次commit的不断打磨,才有了今天。我也相信 Element也会越来越好的。

这里还有一些其它的框架(只讨论pc端的框架)大家可以自行选择:

  • ivew一国人个人写的框架,美观度和交互性都不错,有种介于Element和Ant之间的感觉,之前和element团队小小的撕了一下,有兴趣的自己去围观吧,框架还是很不做的,一个人能做出这样,也是很不容易的。作者公开信件

  • vue-admin也是一个不错的选择,代码写的和不错,官方也出了一个admin的架子,也很值得借鉴

  • vue-material一个material design vue框架库

  • vuetify又是一个material design vue框架库

  • Keen-UI又又是一个material design vue框架库

  • CoreUI-Free-Bootstrap-Admin-Template和以前的Bootstrap一样,搭好了一个完整的架子,大家可以进行二次拓展,它有vue,react,angular多个版本

简单列举了一些主流的框架,不得不感慨现在vue的生态圈真是太繁荣了,上述框架楼主并没有深入使用过,不好发表太多建议,大家自行甄别适合自己业务的框架吧。

这里开始我们会开始介绍一些结合Element的开发经验。

基于Element的动态换肤

有些产品就是这么残忍,能完成需求就不错了,还要让我们做动态换肤。Element官网上也提供了自定义主题的方案 同时也提供了一个在线自定义主题的demo

是不是很酷,作者也说明了实现的方案 地址,大概思路:

  1. 先把默认主题文件中涉及到颜色的 CSS 值替换成关键词

  2. 根据用户选择的主题色生成一系列对应的颜色值

  3. 把关键词再换回刚刚生成的相应的颜色值

  4. 直接在页面上加 style 标签,把生成的样式填进去

我看完觉得真的还是有点复杂的。有没有简单的方案呢? 让我们思考一下,让我们自己写动态换肤该怎么写呢?最常见的方法就是写两套主题,一套叫day theme ,一套叫night theme,night theme主题 都在一个.night-theme的命名空间下,我们动态的在body上add .night-theme ; remove .night-theme。这就是最简单的动态换肤。所以我们也能不能顺着这个思路,基于Element实现动态换肤呢?

首先我们下载官方通过的 Theme generator ,一个专门用来生成Element主题的工具。按照文档,我们生成了需要的主题。

之后就是我们要做的事情了,将这个主题的每个元素外面包裹一个class 来做命名空间。 我们这里用到了gulp-css-wrap这个神器,轻轻松松就完成了我们想要的结果

  1. varpath =require("path")

  2. vargulp =require("gulp")

  3. varcleanCSS =require("gulp-clean-css");

  4. varcssWrap =require("gulp-css-wrap");

  5. gulp.task("css-wrap",function(){

  6. returngulp.src(path.resolve("./theme/index.css"))

  7. .pipe(cssWrap({selector:".custom-theme"}))

  8. .pipe(cleanCSS())

  9. .pipe(gulp.dest("dist"));

  10. });

这样就得到了一个以.custom-theme为命名空间的自定义主题了,之后我们在项目中引入主题

  1. //main.js

  2. import"assets/custom-theme/index.css"

我们在换肤的地方 toggleClass(document.body,"custom-theme")一直toggle body 的 class就可以了。我们就简单实现了动态换肤效果。

不过这种模式实现换肤也是有一个弊端的,它等于把这两个主题都打包在了项目里,如果你的项目主题需要七八种,这种模式就不适合了。我们就需要动态的加载css,下面就是最简单的动态添加css的例子,当然你可以封装一下,增加成功或者失败回调,判断是否加载过改资源等等就不展开了。

  1. varhead =document.getElementsByTagName("HEAD").item(0);

  2. varstyle =document.("link");

  3. style.href ="style.css";

  4. style.rel ="stylesheet";

  5. style.type ="text/css";

  6. head.(style);

侧边栏

这里又有谈一下导航栏的问题,我项目里的侧边栏是根据 router.js 配置的路由并且根据权限动态生成的,这样就省去了写一遍路由还要再手动写侧边栏这种麻烦事,但也遇到了一个问题,路由可能会有多层嵌套,很多人反馈自己的侧边栏会有三级,甚至还有五级的。所以重构了一下侧边栏,使用了递归组件,这样不管你多少级,都能愉快的显示了。代码

侧边栏高亮问题:很多人在群里问为什么自己的侧边栏不能跟着自己的路由高亮,其实很简单,element-ui官方已经给了default-active所以我们只要

  1. :default-active="$route.path"

将default-active一直指向当前路由就可以了,就是这么简单。

点击侧边栏 刷新当前路由在用spa这种开发模式的之前,用户每次点击侧边栏都会重新请求这个页面,用户渐渐养成了点击侧边栏当前路由来刷新view的习惯。但现在spa就不一样了,用户点击当前高亮的路由并不会刷新view,因为vue-router会拦截你的路由,它判断你的url并没有任何变化,所以它不会触发任何钩子或者是view的变化。issue地址,社区也对该问题展开了激烈讨论。

尤大本来也说要增加一个方法来强刷view,但后来他又改变了心意/(ㄒoㄒ)/~~。但需要就摆在这里,我们该怎么办呢?他说了不改变current URL 就不会触发任何东西,那我可不可以强行触发东西你?上有政策, 下有对策我们变着花来hack。方法也很简单,通过不断改变url的query来触发view的变化。我们监听侧边栏每个link 的 click事件,每次点击都给router push 一个不一样的query 来确保会重新刷新view。

  1. clickLink(path){

  2. this.$router.push({

  3. path,

  4. query:{

  5. t:+newDate()//保证每次点击路由的query项都是不一样的,确保会重新刷新view

  6. }

  7. })

  8. }

但这也有一个弊端就是 url 后面有一个很难看的 query 后缀如 xxx.com/article/list?t=1496832345025,但我司用户们表示能接受。。。只能暂时这样hack了,不知道大家有没有更好的方法,学习学习。

keep-alive

Table

经过好几个版本的迭代,Element 的table组件已经能满足大部分业务需求了。不过rowSpan colSpan表格行/列合并现在并不是支持。官方对此功能的更新情况可以关注这个issue。

这里我着重讲一下table表格几个常用的业务形态。

Table 拖拽排序

这里主要是基于Sortable

  1. importSortablefrom"sortablejs"

  2. letel =document.querySelectorAll(".el-table__body-wrapper > table > tbody")[0]

  3. letsortable =Sortable.create(el)

在table mounted之后申明 Sortable.create(el)table的每行tr就可以随意拖拽了,麻烦的目前我们的排序都是基于dom的,我们的数据层list并没有随之改变。所以我们就要手动的来管理我们的列表。

  1. this.sortable =Sortable.create(el,{

  2. onEnd:evt =>{//监听end事件 手动维护列表

  3. consttempIndex =this.newList.splice(evt.oldIndex,1)[0];

  4. this.newList.splice(evt.newIndex,0,tempIndex);

  5. }

  6. });

这样我们就简单的完成了 table 拖拽排序。这里如果不是基于 dom 的排序推荐使用Vue.Draggable。完整代码

Table 内联编辑

table内联编辑也是一个常见的需求。

其实也很简单,当我们拿到 list 数据之后先洗一下数据,每一条数据里面插入一个edit[ true or false ]判断符,来表示当前行是否处于编辑状态。之后就是通过v-show动态切换不同的相应view就可以了。完整代码

  1. <el-table-columnmin-width="300px"label="标题">

  2. <templatescope="scope">

  3. <el-inputv-show="scope.row.edit"size="small"v-model="scope.row.title"></el-input>

  4. <spanv-show="!scope.row.edit">{{ scope.row.title }}</span>

  5. </template>

  6. </el-table-column>

  7. <el-table-columnalign="center"label="编辑"width="120">

  8. <templatescope="scope">

  9. <el-buttonv-show="!scope.row.edit"type="primary"@click="scope.row.edit=true"size="small"icon="edit">编辑</el-button>

  10. <el-buttonv-show="scope.row.edit"type="success"@click="scope.row.edit=false"size="small"icon="check">完成</el-button>

  11. </template>

  12. </el-table-column>

Table 常见坑

通过dialog来编辑,新建,删除table的元素这种业务场景相对于前面说的两种更加的常见。而且也有不少的小坑。 首先我们要明确一个点 vue 是一个MVVM框架,我们传统写代码是命令式编程,拿到table这个dom之后就是命令式对dom增删改。而我们现在用声明式编程,只用关注data的变化就好了,所以我们这里的增删改都是基于list这个数组来的。这里我们还要明确一点vue 列表渲染注意事项

由于 Java 的限制, Vue 不能检测以下变动的数组: * 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue

所以我们想改变table中第一条数据的值,通过 this.list[0]=newValue这样是不会生效的。

解决方案:

  1. // Array.prototype.splice`

  2. example1.items.splice(indexOfItem,1,newValue)

所以我们可以通过

  1. //添加数据

  2. this.list.unshift(this.temp);

  3. //删除数据

  4. constindex =this.list.indexOf(row);//找到要删除数据在list中的位置

  5. this.list.splice(index,1);//通过splice 删除数据

  6. //修改数据

  7. constindex =this.list.indexOf(row);//找到修改的数据在list中的位置

  8. this.list.splice(index,1,this.updatedData);//通过splice 替换数据 触发视图更新

这样我们就完成了对table的增删改操作,列表view也自动响应发生了变化。这里在修改数据的时候还有一个小坑需要主要。 当我们拿到需要修改行的数据时候不能直接将它直接赋值给dialog,不然会发生下面的问题。

(echarts 动态图)

如上图所示,我们在dialog里面改变状态的时候,遮罩下面的table里面该行的状态也在那里跟着一只变化着。原因想必大家都猜到了。赋值的数据是一个objec引用类型共享一个内存区域的。所以我们就不能直接连等复制,需要重新指向一个新的引用,方案如下:

  1. //赋值对象是一个obj

  2. this.objData=Object.assign({},row)//这样就不会共用同一个对象

  3. //数组我们也有一个巧妙的防范

  4. newArray =oldArray.slice();//slice会clone返回一个新数组

Tabs

tab在后台项目中也比较常用的。假设我们有四个tab选项,每个tab都会向后端请求数据,但我们希望一开始只会请求当前的tab数据,而且tab来回切换的时候不会重复请求,只会实例化一次。首先我们想到的就是用 v-if这样的确能做到一开始不会挂载后面的tab,但有一个问题,每次点击这个tab组件都会重新挂载一次,这是我们不想看到的,这时候我们就可以用到 <keep-alive>了。

keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 它是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

所以我们就可以这样写tabs了

  1. <el-tabsv-model="activeTab">

  2. <el-tab-panelabel="简介及公告"name="announcement">

  3. <announcement/>

  4. </el-tab-pane>

  5. <el-tab-panelabel="资讯"name="information">

  6. <keep-alive>

  7. <informationv-if="activeTab=="information""/>

  8. </keep-alive>

  9. </el-tab-pane>

  10. <el-tab-panelabel="直播流配置"name="stream">

  11. <keep-alive>

  12. <streamv-if="activeTab=="stream""/>

  13. </keep-alive>

  14. </el-tab-pane>

  15. </el-tabs>

Select 选择器(echarts 动态图)

Select 选择器直接使用没有什么太多问题,但很多时候我们需要通过Select来回显一些数据,当我们 <el-selectv-model="objValue">select 绑定一个obj value回显就会很蛋疼了,它要求必须保持同一个引用issue。这就意味着,我们回显数据的时候想先要找到该数据在arr中的位置,再回塞:demo。这还不是在远程搜索的情况下,如果是远程搜索的情况还要当疼。 这里推荐一下vue-multiselect它能完美的解决前面Element select的问题。目前也是vue component 中比较好用的一个,ui也非常的好看,建议大家可以尝试性用一下,真的非常的不错。

Upload 上传

Upload本身没什么好说的,文档写的蛮清楚了。这里主要说一下怎么将Upload组件和七牛直传结合在一起。

这里我们选择api直传的方式,就是我们首先要通过后端(go,node,php都可以)文档生成七牛上传必要的token(上传凭证)和key(资源的最终名称)。 所以现在只要想办法讲token和key塞进post请求里面就可以了,好在官方也提供了这个方法。

但怎么才能先异步的拿到token再将它塞入请求里呢?

这时候我们又发现了before-upload 这个钩子还支持promise简直合我们的心意。 但我们写着写着怎样才能动态的改变之前的dataObj呢?通过看源码发现我们可以self.data这样子拿到我们想要的数据。线上代码

  1. <template>

  2. <el-upload

  3. action="https://upload.qbox.me"

  4. :data="dataObj"

  5. drag

  6. :multiple="true"

  7. :before-upload="beforeUpload">

  8. <iclass="el-icon-upload"></i>

  9. <divclass="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>

  10. </el-upload>

  11. </template>

  12. <>

  13. import{getToken }from "api/qiniu";// 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token

  14. // 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk

  15. exportdefault{

  16. data(){

  17. return{

  18. dataObj:{token:"",key:""},

  19. image_uri:[],

  20. fileList:[]

  21. }

  22. },

  23. methods:{

  24. beforeUpload(){

  25. const_self =this;

  26. returnnewPromise((resolve,reject)=>{

  27. getToken().then(response =>{

  28. constkey =response.data.qiniu_key;

  29. consttoken =response.data.qiniu_token;

  30. _self._data.dataObj.token =token;

  31. _self._data.dataObj.key =key;

  32. resolve(true);

  33. }).catch(err =>{

  34. console.log(err)

  35. reject(false)

  36. });

  37. });

  38. }

  39. }

  40. }

  41. </>

jsx

在使用Element的时候,官方提供了很多可以自己写render function的地方,但由于Element内部都是用jsx 写render function的,所以demo也都是jsx,但很多人自己项目中其实是没有安装的,导致报错。但说真的用裸写render 函数还是有些蛋疼。我们要用jsx,首先要安装 babel-plugin-transform-vue-jsx 安装方法如下:

  1. npm install

  2. babel-plugin-syntax-jsx

  3. babel-plugin-transform-vue-jsx

  4. babel-helper-vue-jsx-merge-props

  5. babel-preset-es2015

  6. --save-dev

.babelrc:文件

  1. {

  2. "presets":["es2015"],

  3. "plugins":["transform-vue-jsx"]

  4. }

这样我们就可以愉快的使用 jsx 写render function了。

element 常见问题

click事件不触发问题:一直有人在群里问 <el-input@click="handlenClick">Click Me</el-input>怎么不触发click事件,虽然element文档还有完善的空间但这种问题大家还真要自己好好认真看一下官方的FAQ了。

官方说明了所有的原生事件必须添加 .native 修饰符。

修改element样式问题:用ui组件总免不了需要对它做一些个性化定制的需求,所以我们就要覆盖element的一些样式。 首先我们要了解一下vue scoped是什么,很多人非常喜欢用scoped,妈妈再也不用担心样式冲突问题了,其实scoped也没有很神秘的,它就是基于PostCss的,加了一个作用局的概念。

  1. //编译前

  2. .example {

  3. color:red;

  4. }

  5. //编译后

  6. .example[_v-f3f3eg9]{

  7. color:red;

  8. }

它和我们传统的命名空间的方法避免css冲突没有什么本质性的区别。 现在我们来说说怎么覆盖element-ui样式。由于element-ui的样式我们是在全局引入的,所以你想在某个view里面覆盖它的样式就不能加scoped,但你又想只覆盖这个页面的element样式,你就可在它的父级加一个class,以用命名空间来解决问题。

  1. .aritle-page{//你的命名空间

  2. .el-tag {//element-ui 元素

  3. margin-right:0px;

  4. }

  5. }

建议向楼主一样专门建一个scss文件里专门自定义element-ui的各种样式。线上代码

其它关于element相关的东西真的没有什么好说的了,人家文档和源码就放在那里,有问题就去看文档,再去issue里找找,再去看看源码,大部分问题都能解决了。给一个诀窍其实大部分诡异的问题都可以通过加一个key或者 Vue.nextTick来解决。。

富文本

管理后台富文本也是一个非常重要的功能,楼主在这里也踩了不少的坑。楼主在项目里最终选择了tinymce 这里在简述一下推荐使用tinymce的原因:tinymce是一家老牌做富文本的公司(这里也推荐ckeditor,也是一家一直做富文本的公司,也不错),它的产品经受了市场的认可,不管是文档还是配置的自由度都很好。在使用富文本的时候有一点也很关键就是复制格式化,之前在用一款韩国人做的富文本summernote被它的格式化坑的死去活来,但tinymce的去格式化相当的好,它还有一个增值项目就是powerpaste,那是无比的强大,支持从word里面复制各种东西,都不会有问题。富文本还有一点也很关键,就是拓展性。楼主用tinymce写了好几个插件,学习成本和容易度都不错,很方便拓展。最后一点就是文档很完善,基本你想得到的配置项,它都有。tinymce也支持按需加载,你可以通过它官方的build页定制自己需要的plugins。 我再来分析一下市面上其它的一些富文本:

  • summernote先来说一个我绝对不推荐的富文本。这是一个韩国人开源的富文本(当然不推荐的理由不是因为这个^_^),它对很多富文本业界公认的默认行为理解是反起到而行的,而且只用了一个dialog的功能,引入了boostrap,一堆人抗议就是不改。格式化也是懒得一批。。反正不要用!不要用!不要用!

  • ckeditorckeditor也是一家老牌做富文本的公司,楼主旧版后台用的就是这个,今年也出了4.0版本,ui也变美观了不少,相当的不错,而且它号称是插件最丰富的富文本了。推荐大家也可以试用一下。

  • quill也是一个非常火的富文本,长相很不错。基于它写插件也很简单,api设计也很简单。楼主不选择它的原因是它对图片的各种操作不友善,而且很难改。如果对图片没什么操作的用户,推荐使用。

  • medium-editor大名鼎鼎的medium的富文本(非官方出品),但完成度还是不很不错,拓展性也不错。不过我觉得大部分用户还是会不习惯medium这种写作方式的。

  • Squire一个比较轻量的富文本,压缩完才11.5kb,相对于其它的富文本来说是非常的小了,推荐功能不复杂的建议使用。

  • wangEditor一个国人写的富文本,用过感觉还是不错的。不过毕竟是个人的,不像专门公司做富文本的,配置型和丰富性不足。前端几大禁忌就有富文本 为什么都说富文本编辑器是天坑?,不过个人能做成这样子很不容易了。

  • 百度UEditor没有深入使用过,只在一个angular1X的项目简单用过,不过说着的ui真的不好看,不符合当今审美了,官方也已经很久没跟新过了。

楼主列举了很多富文本但并没有列举任何vue相关的富文本,主要是因为富文本真的比想象中复杂,在前面的文章里也说过了,其实用vue封装组件很方便的,没必要去用人家封装的东西什么vue-quill vue-editor这种都只是简单包了一层,没什么难度的。还不如自己来封装,灵活性可控性更强一点。还有一点基于vue真没什么好的富文本,不像 react 有facebook 出的draft-js,ory出的editor,这种大厂出的产品。

Markdown

markdown 我们这里选用了 simplemde-markdown-editor ,简单的用vue封装了一下地址,如果需求方能接受 markdown 就一定要用 markdown,坑真心会比富文本少很多。这里我们用markdown做了编辑器,还需要一个能解析的的东西。可以你传给后端让后端帮你转化,也可以前端自己来,这里推荐一个转化库showdown。使用方法:

  1. import("showdown").then(showdown =>{//用了 Dynamic import

  2. constconverter =newshowdown.Converter();//初始化

  3. this.html =converter.makeHtml(this.content)//转化

  4. })

用法也很简单两行代码就完成了markdown to html,当然它还有很多个性画的配置,大家有需求自行研究吧。

导出excel

这里先明确一点,如果你的业务需求对导出文件的格式没有什么要求,不建议导出成xlsx格式的,直接导出成csv的就好了,真的会简单很多。创建一个a标签,写上 data:text/csv;charset=utf-8头,再把数据塞进去, encodeURI(csvContent)一下就好了,详情就不展开了,大家可以借鉴这个stackoverflow回答。 我们重点说一下转xlsx,我们这里用到了js-xlsx,一个功能很强大excel处理库,只是下载各种格式excel,还支持读取excel,但上手难度也非常大,相当的复杂,其中涉及不少二进制相关的东西。不过好在官方给了我们一个demo例子,我们写不来还抄不来么,于是我们就借鉴官方的例子来改造了一下,具体原理就不详细说了,真的很复杂。。。 重点是我们怎么使用!首先我们封装一个Export2Excel.js, 它又依赖三个库

  1. require("-loader!file-saver");//保存文件用

  2. require("-loader!vendor/Blob");//转二进制用

  3. require("-loader!xlsx/dist/xlsx.core.min");//xlsx核心

由于这几个文件不支持import引入,所以我们需要 -loader来将他们挂载到全局环境下。

它暴露了两个接口 export_table_to_excelexport_json_to_excel,我们常用 export_json_to_excel因为更加的可控一点,我们可以自由的洗数据。

  1. handleDownload(){

  2. require.ensure([],()=>{// 用 webpack Code Splitting xlsl还是很大的

  3. const{export_json_to_excel }=require("vendor/Export2Excel");

  4. consttHeader =["序号","文章标题","作者","阅读数","发布时间"];// excel 表格头

  5. constfilterVal =["id","title","author","pageviews","display_time"];

  6. constlist =this.list;

  7. constdata =this.formatJson(filterVal,list);// 自行洗数据 按序排序的一个array数组

  8. export_json_to_excel(tHeader,data,"列表excel");

  9. })

  10. },

  11. formatJson(filterVal,jsonData){

  12. returnjsonData.map(v =>filterVal.map(j =>v[j]))

  13. }

完整显示线上代码

ECharts

管理后台图表也是常见得需求。这里图表就只推荐ECharts,功能齐全,社区demo也丰富gallery。我还是那个观点,大部分插件建议大家还是自己用vue来包装就好了,真的很简单。ECharts支持webpack引入,图省事可以将ECharts整个引入 varecharts =require("echarts");不过ECharts还是不小的,我们大部分情况只是用到很少一部分功能,我平时习惯于按需引入的。

  1. // 引入 ECharts 主模块

  2. varecharts =require("echarts/lib/echarts");

  3. // 引入柱状图

  4. require("echarts/lib/chart/bar");

  5. // 引入提示框和标题组件

  6. require("echarts/lib/component/tooltip");

  7. require("echarts/lib/component/title");

webpack中使用ECharts文档 ECharts按需引入模块文档 接下来我们就要在vue中声明初始化ECharts了。因为ECharts初始化必须绑定dom,所以我们只能在vue的mounted生命周期里初始化。

  1. mounted(){

  2. this.initCharts();

  3. },

  4. methods:{

  5. initBar(){

  6. this.chart =echarts.init(this.$el);

  7. this.setOptions();

  8. },

  9. setOptions(){

  10. this.chart.setOption({

  11. title:{

  12. text:"ECharts 入门示例"

  13. },

  14. tooltip:{},

  15. xAxis:{

  16. data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

  17. },

  18. yAxis:{},

  19. series:[{

  20. name:"销量",

  21. type:"bar",

  22. data:[5,20,36,10,10,20]

  23. }]

  24. })

  25. }

  26. }

就这样简单,ECharts就配置完成了,这时候你想说我的data是远程获取的,或者说我动态改变ECharts的配置该怎么办呢?我们可以通过watch来触发setOptions方法

  1. //第一种 watch options变化 利用vue的深度 watcher,options一有变化就重新setOption

  2. watch:{

  3. options:{

  4. handler(options){

  5. this.chart.setOption(this.options)

  6. },

  7. deep:true

  8. },

  9. }

  10. //第二种 只watch 数据的变化 只有数据变化时触发ECharts

  11. watch:{

  12. seriesData(val){

  13. this.setOptions({series:val})

  14. }

  15. }

其实都差不多,还是要结合自己业务来封装。后面就和平时使用ECharts没有什么区别了。题外话ECharts的可配置项真心多,大家使用的时候可能要花一点时间了解它的api的。知乎有个问题:百度还有什么比较良心的产品?答案:ECharts,可见ECharts的强大与好用。

相同component 不同参数

创建与编辑其实后台创建与编辑功能是最常见的了,它区别去前台项目多了改的需求,但大部分创建页面与编辑页面字段和ui几乎是一样的,所以我们准备公用一个component来对应不同的页面。有两种常见的方法,来区别创建与编辑。

  1. 通过路由path的方式 这种方式最简单暴力,我自己的项目中使用这种方式,通过约定路径中出现"edit"就判断为编辑模式。比较省力和方便,不过这是要在大家写路径的时候都按照规范来写的前提下。

  2. 通过meta来区分 比较推荐这种方式来区分。

  1. computed:{

  2. isEdit(){

  3. returnthis.$route.meta.isEdit // 根据meta判断

  4. // return this.$route.path.indexOf("edit") !== -1 // 根据路由判断

  5. }

  6. },

  7. created(){

  8. if(this.isEdit){

  9. this.fetchData();

  10. }

  11. },

就这样简单的实现了多路由复用了一个component,其实不只是创建和编辑可以这样用,如两个列表的一模一样,只是一个是内部文章另一个是调取外部文章都能复用组件,通过meta的方式来判断调取不同的接口。

占坑

常规占坑,这里是手摸手,带你用vue撸后台系类

完整项目地址:vue-element-admin

系类文章一:手摸手,带你用vue撸后台 系列一(基础篇)

系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)

之后计划项目应会加上i18n,并完善一下代码和文档。 下一篇文章可能会写关于如何用 electron 包装现有项目,快速实现一个跨平台的终端后台。 相应广大需求 建了一个qq群 591724180 方便大家交流返回搜狐,查看更多



一.Echarts的可视化动态图怎么插入PPT&Excel里面,实现数据交互

不太知道怎么做,你可以试试一些可视化工具,比如BDP个人版,可以直接导出EXCEL或图片,挺快的!


二.请问echarts里的动态表格 怎么保存到ppt中展示,好像只能保存成png?10分

ppt无法插入动态图片
只可以使用png和jepg等格式
但是可以插入视频


三.echarts怎么做实时动态的折线图

动态获取数据然后绑定即可。
具体操作可以参考这个网站,具体链接如下:
blog.csdn.net/...151423


四.echarts怎么做实时动态的折线图

pu氦憨份窖莓忌逢媳抚颅blic void init() { System.out.println("init Timer."); Global.timer = new Timer(true); Global.timer.schedule(Data.timeTask(), 0,Global.waitTime); }


五.echarts怎么做实时动态的折线图

1、创建折线图的数据区(包括年份发绩篡啃诂救磋寻单默和数据)2、仅选择数据区创建折线图(插入选项卡/图表工具组/折线图)3、得到的折线图x坐标不满足要求,在图表区单击鼠标右键,选择“选择数据”,进入“选择数据源”对话框4、单击对话框右侧“水平分类轴标签”下的“编辑”按钮5、选择对应x坐标轴的年份区域6、单击确定可见年份数据更改了图表的x轴坐标系列


六.echarts的树图,怎么动态从后台获取数据

获取数据后效果

点击饼图获取到数据的效果:

html代码:
放2个div,取个id就行。引用写好的js。

<div>
<div class="case_type">
<div class="pie_chart_name">测试类型</div>
<div id="div_pieCategory" style="height:210px;
width: 300px; float: left;" class="pie_chart_img">
</div>
</div>
<div class="case_date">
<div id="div_bar" style="height:210px; width: 300px; float: left;">
</div>
</div>
</div>
<input id="hid_category" type="hidden" value="" />
<input id="hid_state" type="hidden" value="" />
<input id="hid_date" type="hidden" value="" />
</form>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/esl.js"></script>
<script src="BusinessJs/echarts.js"></script>

echarts代码:
1、在BusinessJs/echarts.js中引用echarts及zrender:

require.config({
packages: [
{
name: 'echarts',
location: './echarts/src',
main: 'echarts'
},
{
name: 'zrender',
location: './zrender/src',// zrender与echarts在同一级目录
main: 'zrender'
}
]
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/pie'
],
function (ec) {
var myChart_Category = ec.init(doc......余下全文>>


七.Echarts折线图数据动态获得70分

public void init() {
System.out.println("init Timer.");
Global.timer = new Timer(true);
Global.timer.schedule(Data.timeTask(), 0,Global.waitTime)护鸡篙课蕻酒戈旬恭莫;
}


八.ECharts怎么动态生成series

series:function(){
var serie=[];
var aa = zhonglei[0].split(",");
for( var i=0;i < aa.length;i++){
var item={
name:aa[i],
data:dataArr[i]
}
ser虎虎港臼蕃铰歌歇攻忙ie.push(item);
};
return serie;
}()

用这段应该就可以


echarts 动态图 ECharts 3 测试版发布 焕然一新的面貌由美文导刊网(www.eorder.net.cn)收集整理,转载请注明出处!原文地址http://www.eorder.net.cn/pic24855/

文章评论
Copyright © 2006 - 2016 www.eorder.net.cn All Rights Reserved
美文导刊网 版权所有