哪些是电子图表
ECharts是百度基于html5Canvas构建的数据可视化图表，html5Canvas是一个使用JavaScript实现的开源可视化库。 提供直观、生动、交互、高度可定制的数据可视化图表echarts高性能图表，赋予用户挖掘和整合数据的能力。 ECharts支持折线图、直方图、散点图、烛台图、饼图、雷达图、弦图、力向布局图、地图、仪表板、漏斗图、事件支流图等12种图表。 它还提供了标题、详细信息、气泡、图例、值范围、数据区域、时间线和工具箱等交互组件，丰富了图表的解释并改善了用户体验。
安装电子图表
在Vue中使用ECharts可以直接通过npm安装echarts及依赖包，添加--save或-S参数添加到package.json配置文件中。 目前最新版本是echarts4.9.0，3.1.1版本之前的ECharts在npm上的包是非官方维护的。 如果下载困难或者下载很慢，建议使用国外的天猫镜像。 如果不懂，可以参考文章：【Vue实战059：国外镜像源的NPM配置与使用】。
全球导入ECharts
安装好ECharts后，我们就可以在main.js中引入该组件，并通过vue.prototype注册全局组件，这样整个项目就可以使用ECharts了。
创建ECharts图表
创建一个新的Echarts.vue组件，并在组件中定义一个div来承载Echarts图表。 通过ref、id或class任意属性定义一个标签来挂载echarts元素，我们可以通过echarts的setOption属性为图表设置参数。 setOption可以定义标题、详情、气泡、图例、取值范围、数据区域、时间轴等信息，具体内容可以根据你要显示的图表来确定。 最后在挂载的生命周期函数中实例化echarts对象，然后挂载echarts到页面。
按需导入ECharts
全局引入ECharts非常方便，而且这种方式会加载ECharts的所有图表和组件，并且在构建时会打包ECharts的所有图表，导致体积过大，直接影响运行效率。 如果我们使用的图表不多，则不需要全局导入echarts高性能图表，ECharts可以在需要的组件中按需导入。 比如我们里面展示的直方图，我们可以直接引入echarts中的bar组件来实现。
ECharts疗效展示
通过前面元素的创建和配置，ECharts成功挂载在div元素中。 我们可以在后端看到如下的显示效果。 显示的图表类型通过系列中的类型在选项中指定为条形图（直方图）。
ECharts参数设置方法
ECharts 中的参数选项较多，很容易混淆。 最简单的方法就是进入ECharts官网，在官网上找到你想要的ECharts模板。 模板的两面都会提供本例的选项参数设置，我们按照下图的效果更改后可以直接复制到我们的项目中。
总结：
ECharts几乎涵盖了所有行业图表，基本可以满足开发中的各种需求。 随着大数据的出现，可视化图表备受追捧！ 学习ECharts还是有必要的。 以上内容是小编给大家分享的【Vue实战090：Vue使用ECharts图表解读】。 希望对您有所帮助。 如果您有疑问，请给我留言，编辑会及时回复您。 更多Vue实用方法请参考以下专栏：
为了方便学习，下面附上本文使用的源码：
> npm install echarts --save
**********省略*************
+ echarts@4.9.0
added 2 packages in 19.44s
---------------------------------------------------------------
//main.js文件
import echarts from 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts //注册echarts组件
export default {
name: 'echarts',
methods: {
drawLine () {
let dom = this.$refs.echarts
this.$echarts.init(dom).setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
}
},
mounted () {
this.drawLine()
}
}
-------------------------------------------------------------------
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
发表评论