ECharts完成数据报表
官方传送门https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
Ⅰ.安装ECharts插件：cnpm install echarts --save
Ⅱ.引入ECharts：一般都是某个单页面集中使用，可以在应用的页面单独引入，当然也可以在main.js里全局引入
// 引入ECharts：下面两种方法都可以
➀ var echarts = require('echarts');
➁ import echarts from 'echarts';
Ⅲ.准备dom容器，初始化echarts实例
➀ 简单echarts视图：
<template>
<div id="reports">
<!-- 顶级面包屑 -->
<el-row>
<el-col :span="24">
<breadcrumb :level2="level2" :level3="level3"></breadcrumb>
</el-col>
</el-row>
<!-- echarts容器 -->
<el-row>
<el-col :span="12">
<!-- Elemenet组件 阴影卡片 -->
<el-card shadow="always">
<div class="echarts-num" style="width: 700px;height:500px;"></div>
</el-card>
</el-col>
<el-col :span="12">
<!-- Elemenet组件 阴影卡片 -->
<el-card shadow="always">
<div class="echarts-trend" style="width: 700px;height:500px;"></div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
// 引入ECharts
import echarts from 'echarts';
export default {
//写了name方便在Vue Devtools谷歌插件应用内找到对应的组件
name: "user",
data() {
return {
level2: "数据统计",
level3: "数据报表",
data: ['2019/4/10', '2019/4/11', '2019/4/12', '2019/4/13', '2019/4/14', '2019/4/15'],
option1:{
name: '用户访问量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
option2:{
name: '用户访问趋势',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}
}
},
//生命周期函数
async mounted(){
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector('.echarts-num'));
// 绘制图表
myChart.setOption({
//添加标题
title: {
text: '近期用户访问量'
},
//添加小贴士
tooltip: {},
xAxis: {
data: this.data
},
yAxis: {},
//在series属性中，添加图形类型以及数据
series: [this.option1]
});
// 基于准备好的dom，初始化echarts实例
let myChart1 = echarts.init(document.querySelector('.echarts-trend'));
// 绘制图表
myChart1.setOption({
title: {
text: '近期用户访问趋势'
},
tooltip: {},
xAxis: {
data: this.data
},
yAxis: {},
series: [this.option2]
});
}
};
</script>
<style lang="scss">
#reports {
}
</style>
➁ 复合echarts视图：
<template>
<div id="reports">
<!-- 顶级面包屑 -->
<el-row>
<el-col :span="24">
<breadcrumb :level2="level2" :level3="level3"></breadcrumb>
</el-col>
</el-row>
<!-- echarts容器 -->
<el-row>
<el-col :span="12">
<!-- Elemenet组件 阴影卡片 -->
<el-card shadow="always">
<div class="echarts-num" style="width: 700px;height:500px;"></div>
</el-card>
</el-col>
<el-col :span="12">
<!-- Elemenet组件 阴影卡片 -->
<el-card shadow="always">
<div class="echarts-trend" style="width: 700px;height:500px;"></div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
// 引入ECharts
import echarts from 'echarts';
export default {
//写了name方便在Vue Devtools谷歌插件应用内找到对应的组件
name: "user",
data() {
return {
level2: "数据统计",
level3: "数据报表",
data: ['2019/4/10', '2019/4/11', '2019/4/12', '2019/4/13', '2019/4/14', '2019/4/15'],
option1:{
name: '用户访问量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
option2:{
name: '用户访问趋势',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}
}
},
//生命周期函数
async mounted(){
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector('.echarts-num'));
// 绘制图表
myChart.setOption({
//添加标题
title: {
text: '近期用户访问量'
},
//添加小贴士
tooltip: {},
xAxis: {
data: this.data
},
yAxis: {},
//在series属性中，添加图形类型以及数据
series: [this.option1,this.option2]
});
}
};
</script>
<style lang="scss">
#reports {
}
</style>
本文同步发表在我的个人博客：https://www.lubaojun.com/
