江苏龙网

  1. 首页 > 人文 > >

Vue实战090：Vue使用ECharts图表详解

什么是EChartsECharts是由百度基于html5 Canvas打造的数据可视化图表 ， 使用 JavaScript 实现的开源可视化库 。 提供了直观 ， 生动 ， 可交互 ， 可高度个性化定制的数据可视化图表 ， 赋予了用户对数据进行挖掘、整合的能力 。 ECharts支持折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表 ， 同时提供标题、详情、气泡、图例、值域、数据区域、时间轴、工具箱等可交互组件 ， 丰富了图表的展现形式并增强了用户体验 。
Vue实战090：Vue使用ECharts图表详解文章插图
安装ECharts在Vue中使用ECharts可以直接通过npm来安装echarts及依赖包 ， 添加--save或者-S参数将其添加到package.json配置文件中 。 当前最新版为echarts4.9.0 ， 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的 。 如果遇到无法下载或者下载很慢的话建议使用国内的淘宝镜像 ， 不懂的可以参考文章：【Vue实战059：NPM配置国内镜像源及使用 】 。
Vue实战090：Vue使用ECharts图表详解文章插图
全局引入ECharts安装ECharts之后我们就可以在main.js中引入该组件了 ， 并通过vue.prototype来注册全局组件 ， 这样就可以在整个项目中使用ECharts了 。
Vue实战090：Vue使用ECharts图表详解文章插图
创建ECharts图表新建一个Echarts.vue组件 ， 在组件中定义一个div来承载Echarts图表 。 通过ref、id或class任一属性定义一个标签来挂载echarts元素 ， 通过echarts的setOption属性我们可以为该图表来赋值 。 setOption可以定义标题、详情、气泡、图例、值域、数据区域、时间轴等等信息 ， 具体内容可以根据你要显示的图表来决定 。 最后在mounted生命周期函数中实例化该echarts对象 ， 就可以将echarts挂载到页面中了 。
Vue实战090：Vue使用ECharts图表详解文章插图
按需引入ECharts全局引入ECharts非常的方便 ， 但是该方式会加载ECharts所有图表和组件 ， build时也会将所有的echarts图表打包导致体积过大直接影响运行效率 。 如果我们用到的图表不多完全没必要全局引入 ， 可以在需求的组件中按需引入ECharts 。 比如我们上面显示的柱状图 ， 我们完全可以直接引入echarts中的bar组件来实现 。
Vue实战090：Vue使用ECharts图表详解文章插图
ECharts效果展示通过上面的元素创建并配置 ， 成功将ECharts挂载到了div元素中 。 我们在前端就可以看到如下的显示效果 ， 显示的图表类型在option中通过series中的type指定为bar（柱状图） 。
Vue实战090：Vue使用ECharts图表详解文章插图
ECharts参数设置技巧在ECharts中有很多的参数选项 ， 很容易搞混淆 。 最简单的方式就是进入ECharts官网 ， 在官网中找到你想要的ECharts模板 。 在模板的左侧就会提供该示例的option参数设置 ， 我们可以对照右图中的显示效果修改好之后直接复制到我们的项目中来 。
Vue实战090：Vue使用ECharts图表详解文章插图
总结：ECharts几乎?涵盖各行业图表 ， 基本上可以满足开发中的各种需求 。 随着大数据的到来 ， 可视化图表备受青睐！学会ECharts还是很有必要的哦 ， 以上内容是小编给大家分享的【Vue实战090：Vue使用ECharts图表详解】 。 希望对大家有所帮助 ， 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的 。 更多Vue实战技巧可以参考以下专栏：


推荐阅读


上一篇：米家耳温计来袭！一按就测，一测就准，同价位米家耳温计更受欢迎

下一篇：索尼的Spatial让您无需戴3D眼镜就能看3D