头歌（Educoder）——Vue基础——大屏可视化实战

第1关：大屏可视化实战

任务描述

本关任务：编写一个大屏可视化实战程序。

相关知识

为了完成本关任务，你需要掌握：

1. 安装 echarts.js；

2. 新建 vue 界面；

3. 引入 ECharts；

4. 创建 Vue 方法和图表信息；

5. 效果样式；

6. 通过官网查找自己喜欢的样式；

7. 组件重复使用。

这一小节我们就会来说讲解一下 Vue 联动 Echarts 实现大屏的展示

安装 echarts.js

npm install echarts --save 或 cnpm install echarts --save

新建 vue 界面

1. <template>
2. <!-- 定义echarts需要控制的dom元素 -->
3. <div :style="{height:height,width:width}" />
4. </template>

引入 ECharts

1. <script>
2. import echarts from "echarts"
3. require("echarts/theme/dark") // echarts主题
4. //....后面就是配置vue的方法和图标样式,我打算拿出开单独讲解
5. </script>

创建 Vue 方法和图表信息

创建一个 export default 模块

1. export default{
2. //方法和变量
3. }

在以上基础添加 data()

1. data() {
2. return {
3. chart: null,// echarts实例
4. chartData: '',// 图表数据
5. height: '250px',//设置默认高度
6. width: '50%',//设置默认宽度
7. }
8. },

watch 监听

1. watch: {//监听数据变化
2. chartData: {
3. deep: true,//深度监听
4. handler(val) {
5. this.setOptions(val)//重新绘制图表数据
6. }
7. }
8. },

mounted 创建 echarts 实例

1. mounted() {
2. // dom元素加载完成后执行
3. this.$nextTick(() => {
4. // 初始化echarts实例
5. this.initEcharts()
6. })
7. },

methods 的方法有 initEcharts 和 setOptions

1. methods: {
2. initEcharts(){},
3. setOptions({expectedData,actualData}){},
4. }

initEcharts 方法创建实例对象

1. initEcharts() {
2. // 定义一个图表数据
3. this.chartData={
4. expectedData:[190, 100, 10, 9, 170, 110, 160],
5. actualData:[120, 200, 150, 80, 70, 110, 130]
6. }
7. //参数一:this.$el指向当前组件template模板中的根标签(在mounted生命周期中才有效)
8. //参数二:echarts主题颜色
9. this.chart = echarts.init(this.$el, "dark")
10. this.setOptions(this.chartData)
11. },

关于图标样式需要注意的是,需要引入了 echarts 主题否则无效.可以看官方的主题样式点击跳转,也可以根据自己的喜好进行定制化