本篇文章给大家谈谈vue获取数据库数据echarts，以及vue获取excel表中的数据对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
- 1、Vue 引入echarts 基础使用
- 2、在vue里面引入echarts（柱状图，饼图，折线图））
- 3、在Vue中使用echarts
- 4、在vue 中使用百度echarts
- 5、Vue 后台管理项目14-ECharts完成数据报表
Vue 引入echarts 基础使用
通过 npm 获取 echarts，npm install echarts --save
为了省事，全局引用echarts
打开main.js 文件
echarts 新版本跟之前import 方式不一样了，需要as 一下。
放到全局就不用来回引用了，使用时候直接this.$echarts就可以。
从echart 官网上面扒拉下来第一个例子，修改一下
最后初始化这个myChart的时候，一定不要放到create 事件里面，因为界面没有初始化完成，啥都加载不出来
在vue里面引入echarts（柱状图，饼图，折线图））
1.安装echarts
npm install echarts -S
2.在main.js中引用echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.封装chart组件(复制粘贴就好了)
!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --
div id="bar" style="width: 600px;height:400px;"/div
div id="pie" style="width: 600px;height:400px;"/div
div id="line" style="width: 600px;height:400px;"/div
在script里面写下面内容
export default{
mounted(){
this.drawLine();//调用这个方法
},
methods:{
drawLine () {
var echarts = require('echarts');
var barChart = echarts.init(document.getElementById('bar'));
var pieChart = echarts.init(document.getElementById('pie'));
var lineChart = echarts.init(document.getElementById('line'));
barChart.setOption({
title: {
text: '柱状图'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["肉夹馍", "馒头", "豆沙包", "粉丝汤", "豆包", "油条"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
pieChart.setOption({
title: {
text: '饼图'
},
series: [{
name: '访问来源',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data: [ // 数据数组，name 为数据项名称，value 为数据项值
{
value: 235,
name: '视频广告'
},
{
value: 274,
name: '联盟广告'
},
{
value: 310,
name: '邮件营销'
},
{
value: 335,
name: '直接访问'
},
{
value: 400,
name: '搜索引擎'
}
]
}]
});
lineChart.setOption({
title: {
text: '折线图',
},
tooltip: {},
legend: {
data: ['销量', '试穿', '退货'],
x: 'right'
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}, {
name: '试穿',
type: 'line',
data: [30, 40, 50, 20, 12, 30]
}, {
name: '退货',
type: 'line',
data: [1, 2, 1, 3, 5, 2]
}]
});
}
}
}
在Vue中使用echarts
由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~
我的示例是在vue-cli搭建
首先需要全局引入
在main.js中
在Echarts.vue中
div id="myChart" :style="{width: '300px', height: '300px'}"/div
注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中
这样一个简单的图表就完成了，是不是觉得很简单？假如在一个大型的项目中，而且数据是非常复杂的？那么该如何操作？
由于全局引入会将所有的echarts图表打包，导致体积过大
在Echarts.vue文件中
使用 require 而不是 import
基于前面的疑问，加上实际运用到项目中遇到的一些问题，我思考使用组件的形式。
从上边可以看出，你每次在使用echarts的时候，都必须要重复的引入，这样很不方便
vue作为一个组件化开发的框架，我们可以使用组件的方式进行集成。每次我们引入组件，进行使用，这样就方便的多。
下面是一个我自己对echarts进行的一个简单的vue组件的集成。
在echarts中
子组件：
props部分是我接收到的参数，父组件获取数据分发，data是父组件分发给echarts的数据源。
父组件：
如果在大型的项目，而且图表又非常的多，那么vuex少不了。如果把数据集中存储到了vuex中，echarts组件再从vuex中获取数据，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用。接下来会继续分享vuex的使用~~~
在vue 中使用百度echarts
前言：在vue2.0中使用 百度echarts 有三种解决方案。
这样每次都要获取图表dom元素 然后通过setOption渲染数据，最后在mounted中初始化。很麻烦。
vue-echarts 是ECharts 的 Vue.js 组件，基于 ECharts v4.1.0 + 开发，依赖 Vue.js v2.2.6 +，意思就是可以直接把echarts实例当中vue中的组件来使用，不用每次都获取dom、挂在dom，轻松使用echarts的所用功能。。。
v-charts 是基于vue2二次封装的图表组件库，功能没有echarts多 但也够用了，官网很详细，这里用一个官网例子说明问题。
以上，可跟据需求选用，如果需求简单可直接用 v-charts
Vue 后台管理项目14-ECharts完成数据报表
官方传送门
Ⅰ.安装ECharts插件：cnpm install echarts --save
Ⅱ.引入ECharts：一般都是某个单页面集中使用，可以在应用的页面单独引入，当然也可以在main.js里全局引入
// 引入ECharts：下面两种方法都可以
➀ var echarts = require('echarts');
➁ import echarts from 'echarts';
Ⅲ.准备dom容器，初始化echarts实例
➀ 简单echarts视图：
➁ 复合echarts视图：
本文同步发表在我的个人博客：
vue获取数据库数据echarts的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue获取excel表中的数据、vue获取数据库数据echarts的信息别忘了在本站进行查找喔。
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » vue获取数据库数据echarts（vue获取excel表中的数据）
