echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html

1.找到脚手架项目所在地址,执行cnpm install echarts,安装echarts组件(脚手架的地址就是你vue项目的地址)

(E:\demo\vuepro)这是我的项目地址,vuepro为项目名

2.按需导入,以加快打开速度

1 //引入echarts组件
2 import echarts from "echarts"
3 // 引入基本模板
4 let echart = require('echarts/lib/echarts')
5 // 引入柱状图组件
6 require('echarts/lib/chart/bar')
7 // 引入提示框和title组件
8 require('echarts/lib/component/tooltip')
9 require('echarts/lib/component/title')

3.准备div标签 容纳报表图形

div的 id用于绑定echarts插件

1   <div id="chart" style="width: 50%; height: 400px;">
2 </div>

4.script标签的内容

 1 //引入echarts组件
2 import echarts from "echarts"
3 // 引入基本模板
4 let echart = require('echarts/lib/echarts')
5 // 引入柱状图组件
6 require('echarts/lib/chart/bar')
7 // 引入提示框和title组件
8 require('echarts/lib/component/tooltip')
9 require('echarts/lib/component/title')
10 export default{
11 name: 'App',
12 data(){
13 return{
14 chartColumn:null
15 }
16 },
17 methods:{
18 initData(){
19 let dt=document.querySelector("#boss")
20
21 this.chartColumn=echart.init(dt)
22 this.chartColumn.setOption(
23 //Examples中的模板
24 )
25
26 }
27 },
28 mounted(){
29 this.initData()
30 }
31 }

为了方便大家的使用,我在这里放一个在Vue中引入echarts可视化组件的完整模板,大家直接复制使用即可

<template>
<div id="boss" style="width: 500px;height: 500px;"> </div>
</template> <script>
//引入echarts组件
import echarts from "echarts"
// 引入基本模板
let echart = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default{
name: 'App',
data(){
return{
chartColumn:null
}
},
methods:{
initData(){
let dt=document.querySelector("#boss") this.chartColumn=echart.init(dt)
this.chartColumn.setOption(
//Examples中模板
) }
},
mounted(){
this.initData()
}
}
</script> <style>
</style>

案例:

  1 <template>
2 <div id="boss" style="width: 500px;height: 500px;">
3
4 </div>
5 </template>
6
7 <script>
8 import echarts from "echarts"
9 // 引入基本模板
10 let echart = require('echarts/lib/echarts')
11 // 引入柱状图组件
12 require('echarts/lib/chart/bar')
13 // 引入提示框和title组件
14 require('echarts/lib/component/tooltip')
15 require('echarts/lib/component/title')
16 export default{
17 name: 'App',
18 data(){
19 return{
20 chartColumn:null
21 }
22 },
23 methods:{
24 initData(){
25 let dt=document.querySelector("#boss")
26
27 this.chartColumn=echart.init(dt)
28 this.chartColumn.setOption(
29 //以下为echarts可视化组件
30 {
31 tooltip: {
32 trigger: 'axis',
33 axisPointer: { // Use axis to trigger tooltip
34 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
35 }
36 },
37 legend: {
38 data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
39 },
40 grid: {
41 left: '3%',
42 right: '4%',
43 bottom: '3%',
44 containLabel: true
45 },
46 xAxis: {
47 type: 'value'
48 },
49 yAxis: {
50 type: 'category',
51 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
52 },
53 series: [
54 {
55 name: 'Direct',
56 type: 'bar',
57 stack: 'total',
58 label: {
59 show: true
60 },
61 emphasis: {
62 focus: 'series'
63 },
64 data: [320, 302, 301, 334, 390, 330, 320]
65 },
66 {
67 name: 'Mail Ad',
68 type: 'bar',
69 stack: 'total',
70 label: {
71 show: true
72 },
73 emphasis: {
74 focus: 'series'
75 },
76 data: [120, 132, 101, 134, 90, 230, 210]
77 },
78 {
79 name: 'Affiliate Ad',
80 type: 'bar',
81 stack: 'total',
82 label: {
83 show: true
84 },
85 emphasis: {
86 focus: 'series'
87 },
88 data: [220, 182, 191, 234, 290, 330, 310]
89 },
90 {
91 name: 'Video Ad',
92 type: 'bar',
93 stack: 'total',
94 label: {
95 show: true
96 },
97 emphasis: {
98 focus: 'series'
99 },
100 data: [150, 212, 201, 154, 190, 330, 410]
101 },
102 {
103 name: 'Search Engine',
104 type: 'bar',
105 stack: 'total',
106 label: {
107 show: true
108 },
109 emphasis: {
110 focus: 'series'
111 },
112 data: [820, 832, 901, 934, 1290, 1330, 1320]
113 }
114 ]
115 }
116 //组件到此结束
117 )
118
119 }
120 },
121 mounted(){
122 this.initData()
123 }
124 }
125 </script>
126
127 <style>
128 </style>

显示效果:

在Vue中echarts可视化组件的使用的更多相关文章

  1. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  2. 转载:QTableView中嵌入可视化组件

    出处:http://qimo601.iteye.com/blog/1538364 QTableView中嵌入可视化组件方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简 ...

  3. vue中的父子组件相互调用

    vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...

  4. vue使用echarts可视化图形插件

    1.安装echarts:  cnpm/npm i echarts -S 2.main.js中   import echarts from 'echart'    Vue.prototype.$echa ...

  5. Vue中echarts的基本用法

    前言:同大多数的前端框架一样,先读官网的使用方法.学会基本使用后,在实例中找到自己想要demo.拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用. 我是在vue中下面直接使用的e ...

  6. vue中使用keepAlive组件缓存遇到的坑

    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...

  7. Vue中,父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  8. vue中兄弟之间组件通信

    我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 ...

  9. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

随机推荐

  1. 7, java数据结构和算法: 八皇后问题分析和实现 , 递归回溯

    什么是八皇后问题: 指的是,在一个8 * 8的棋盘中, 放置8个棋子, 保证这8个棋子相互之间, 不在同一行,同一列,同一斜线, 共有多少种摆法? 游戏连接: http://www.4399.com/ ...

  2. 重新整理 .net core 实践篇—————异常中间件[二十]

    前言 简单介绍一下异常中间件的使用. 正文 if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } 这样写入中间件哈,那么在env环 ...

  3. Java线程的并发工具类

    Java线程的并发工具类. 一.fork/join 1. Fork-Join原理 在必要的情况下,将一个大任务,拆分(fork)成若干个小任务,然后再将一个个小任务的结果进行汇总(join). 适用场 ...

  4. python通过字典实现购物车案例-用户端

    import os dict01 = { 'iphone' : { '5999' : { '总部位于美国' : '价格相对较贵', }, }, 'wahaha' : { '15' : { '总部位于中 ...

  5. 从 SQL 到 MongoDB,这一篇就够了

    很多开发者首次接触数据库(通常是在高校课堂)的概念,或者说接触第一个数据库,通常是 SQL 数据库,而现在,NoSQL 数据库后来居上,很多原 SQL 数据的使用者难免有转向 NoSQL 的需求.而作 ...

  6. perror()函数的使用

    perror()函数的功能是打印一个系统错误信息.        perror()函数在Linux系统中属于库函数,在头文件中有如下定义: #include <stdio.h>       ...

  7. Spring官方发布新成员:Spring GraphQL

    近日,在GraphQL Java诞生6周年的时候,Spring社区通过博客宣布正式创建全新项目:Spring GraphQL,同时还发布了这个新项目的里程碑1.0版本. 博客原文:https://sp ...

  8. POJ 1775 Sum of Factorials 数论,基础题

    输入一个小于1000000的正整数,是否能表达成式子:a1!+a2!+a3!+...+an (a1~an互不相等). 因为10!>1000000,所以先打1~10的阶乘表.从a[10]开始递减判 ...

  9. Maven:手动添加jar包进Maven本地库内

    正常maven依赖jar包的pom.xml写法如下: <!-- https://mvnrepository.com/artifact/ojdbc/ojdbc --><!-- (参数一 ...

  10. [心得]docker学习笔记

    1. docker是什么??? (1) docker是一台类似虚拟机的功能, 内部由一个个镜像组成, 镜像里可以运行容器, 而这个容器可以是任何东西, 比如mysql, 比如tomcat等等, 它的目 ...