用Vue整合Echarts做数据展示：整合Echarts

在终端中输入：npm install echarts --save

在main.js中引入echarts

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Echar from './echar'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Echarts from 'echarts'Vue.use(ElementUI);
Vue.use(Echarts);Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { Echar },template: '<Echar/>'
})

重写char1.vue

<template><div class="char1"><!-- 自定义一个div来装我们的图 --><div id="main" style="width: 90%;height:800px;"></div></div>
</template>
<script>
var echarts = require('echarts');
export default {data () {return {option: {//标题title: { text: '火影忍者战斗力' },//工具toolbox: {//是否显示show: true,feature: {//折线图 与 柱状图 切换magicType: {type: ['line', 'bar']},//下载saveAsImage: {}}},//节点显示legend: {data: ['战斗力'],},//x轴数据  xAxis: {data: ["旋涡鸣人", "宇智波佐助", "春野樱", "卡卡西", "依鲁卡", "大蛇丸", "自来也", "鹿丸", "雏田", "月光疾风"]},//y轴  yAxis: {},//数据series: [{//初始类型 type: 'bar',data: [500, 400, 300, 600, 100, 150, 500, 400, 300, 400]}]}}},methods: {draw () {//通过echarts初始化我们的divlet myChart = echarts.init(document.getElementById('main'));//为这个echarts的图添加属性myChart.setOption(this.option, true)}},watch: {//数据变化时自动重画，在控制台修改message,会自动重画message: function () {this.draw();}},mounted () {//页面加载的时候，调用画图方法，画图this.draw();}
}
</script>
<style scoped>
.char1 {height: 100%;width: 100%;text-align: center;line-height: 160px;
}
</style>

效果展示

自己玩一下差不多就应该知道大概都是些什么了。给不同的组件写不同的图，然后通过路由来显示。就能做到我们基础的效果了。

用Vue整合Echarts做数据展示：整合Echarts相关推荐

echarts迁徙图 vue_vue中高德搭配echarts做数据迁徙流线图
前言此系列共分为以下几篇 <vue中高德地图的使用> <vue中基于高德的多行政区域覆盖> <vue中高德搭配echarts做数据迁徙流线图> (本篇) 本篇效果 ...
vue疫情大屏数据展示+数据导出+地图图片下载
不废话,先上效果图审美有限下午5点开工去掉吃饭时间我的审美也只能让我做到这一步哈哈有需要可以去github下载 github上代码是不加注释的看注释在这个文章 github地址 https ...
echarts 实时数据展示
echarts 实时数据展示 1. 构建一个web项目完成从后台拉取MySQL的数据到前端的准备工作,我自己是用的ssm框架,这里是属于web的工作,不过多赘述. 2.先写一个简单的echart ...
vue+echarts实现数据展示大屏
简单介绍一个数据展示大屏.适用于中小型项目展示,只做学习交流. 技术栈前端:vue+echarts+axios+vue-router+less 后台:node+koa2+websocket 开发I ...
Spring整合Redis做数据缓存（Windows环境）
当我们一个项目的数据量很大的时候,就需要做一些缓存机制来减轻数据库的压力,提升应用程序的性能,对于java项目来说,最常用的缓存组件有Redis.Ehcache和Memcached. Ehcache是 ...
使用开源Datav——结合vue实现大屏数据展示案例
Datav简介: 组件库基于Vue ,主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用. 文档链接:Datav-Vue 大屏数据展示组件库代码下载:datav大屏数据展示 ...
vue和Java做数据交互_基于vue和springmvc前后端分离，json类接口调用介绍
基于vue和springmvc前后端分离,json类接口调用介绍版本要求:spring-3.2.9.RELEASE.vue-2.9.2.axios-0.17.1,其中axios作为http clie ...
vue实现Json格式数据展示
vue的jsonViewer组件也很好用,在网上看到有大神自己写的组件(递归调用),觉得很好,稍作修改,记录一下 JSON.stringify(obj, null, 4) 可以美化json数据的显示& ...
视频课程-1小时上手 Spring Boot 及达梦数据库做数据展示后端
这个视频是免费的!已经上传到B站了! 视频一共是一个小时多点: 在B站上是这样的源码都有视频地址为: https://www.bilibili.com/video/av71907222/ 质量的确 ...

用Vue整合Echarts做数据展示：整合Echarts

用Vue整合Echarts做数据展示：整合Echarts相关推荐

最新文章

热门文章