vue2+echarts数据报表项目学习心得

Frank原创
  • 开发笔记
  • Vue
  • echarts
  • vue2
大约 2 分钟约 520 字...

echarts 在 vue 的使用

echarts 4.x 文档open in new window

  • 定义
import ECharts from 'echarts'

Vue.prototype.$echarts = ECharts
  • 消费
const chartDom = document.getElementById('today-users-chart')
const chart = this.$echarts.init(chartDom)
chart.setOption({
  // ...
})

使用 vue-echarts 简化配置

官方文档 vue2.x,echarts4open in new window

  • 默认尺寸为 600px×400px,如果想让图表响应尺寸变化,可以像下面这样
  • 把尺寸设为百分比值(同时请记得为容器设置尺寸)。
.echarts {
  width: 100%;
  height: 100%;
}

在模板中使用:

<v-chart :options="chartOption" ::autoresize="true"></v-chart>
  • options:ECharts 实例的数据。修改这个 prop 会触发 ECharts 实例的 setOption 方法。
  • autoresize:这个 prop 用来指定 ECharts 实例在组件根元素尺寸变化时是否需要自动进行重绘。

几种常见图表的配置

折线图

提示

在没有使用任何模块系统的情况下,组件将通过 window.VueECharts 变量暴露接口:

// 注册组件后即可使用
Vue.component('v-chart', VueECharts)
See the Pen by zhangfanhang on CodePen.

柱状图

See the Pen by zhangfanhang on CodePen.

饼状图

See the Pen by zhangfanhang on CodePen.

v-charts

在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。

文档open in new window

本示例中的词云图,水球图,地图使用 v-charts 开发

element-UI 相关问题

使用 element-ui 的 row 和 col 组件完成布局

通过基础的 24 分栏,迅速简便地创建布局

moreopen in new window

表格数据分页功能

See the Pen by zhangfanhang on CodePen.

vue2 相关

mixin 的实际运用

// TODO 这周末查

上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1