Vue 后台管理项目14-ECharts完成数据报表

ECharts完成数据报表

官方传送门https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

Vue 后台管理项目14-ECharts完成数据报表_第1张图片
image

Ⅰ.安装ECharts插件:cnpm install echarts --save

Ⅱ.引入ECharts:一般都是某个单页面集中使用,可以在应用的页面单独引入,当然也可以在main.js里全局引入

// 引入ECharts:下面两种方法都可以

➀ var echarts = require('echarts');

➁ import echarts from 'echarts';

Ⅲ.准备dom容器,初始化echarts实例

➀ 简单echarts视图:

Vue 后台管理项目14-ECharts完成数据报表_第2张图片
image





➁ 复合echarts视图:

Vue 后台管理项目14-ECharts完成数据报表_第3张图片
image






本文同步发表在我的个人博客:https://www.lubaojun.com/

你可能感兴趣的:(Vue 后台管理项目14-ECharts完成数据报表)