1.安装echarts:  cnpm/npm i echarts -S

2.main.js中   import echarts from 'echarts'    Vue.prototype.$echarts = echarts;

3.组件中使用:

<template>
<div class="echart_box">
<div id="myChart" :style="{width: '600px', height: '400px',margin:'0 auto'}"></div>
</div>
</template>
<script>
export default {
data() {
return { }
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: 'Vue中使用echarts的demo' },
tooltip: {},
xAxis: {
data: ["橙子", "橘子", "柚子", "榴莲", "水蜜桃", "栗子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [15, 20, 37, 15, 8, 23]
}]
});
}
}
} </script>

4.具体参数配置 方法见:http://echarts.baidu.com/

vue使用echarts可视化图形插件的更多相关文章

  1. 在Vue中echarts可视化组件的使用

    echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html 1.找到脚手架项目所在地址,执行cnpm install echarts ...

  2. 基于vue和echarts的数据可视化实现

    基于vue和echarts的数据可视化: https://github.com/MengFangui/awesome-vue.git

  3. vue使用Echarts图表

    vue使用Echarts图表 童话_xxv 关注  0.5 2018.12.11 09:09* 字数 325 阅读 1456评论 2喜欢 13 在开发后台系统时,使用图表进行数据可视化,这样会使数据更 ...

  4. 数据可视化-gojs插件使用技巧总结

    随着云计算时代的到来,由于Web技术的快速革新以及为了提供高质量的用户体验,数据可视化成为了前端技术发展的一大方向.为了解决这个问题,现如今涌现了很多优秀的第三方的javascript图形库,比如hi ...

  5. Angular+ionic2+Echarts 实现图形制作,以饼图为例

    step1:添加插件echart; npm install echarts --save package.json文件中会在dependencies中添加echarts,如下图: step2:运行cm ...

  6. vue 搭建框架到安装插件依赖,Element、axios、qs等

    一.使用vue 单页面开发,首先要安装好本地环境 步骤如下: 1 下载nodejs 安装 (此时npm 和 node环境都已经装好)2 安装淘宝镜像 npm install -g cnpm --reg ...

  7. vue解决音频可视化播放,使用wavesurfer.js

    vue解决音频可视化播放,使用wavesurfer.js 上效果:   1.安装wavesurfer  npm install wavesurfer.js 2.在页面导入 import WaveSur ...

  8. 10 个免费的 jQuery 可视化编辑器插件

    富文本编辑器,也就是所见即所得的 HTML 编辑器,是网站一个非常重要的组件,特别是对于一些内容发布网站来说.本文介绍 10 个基于 jQuery 的可视化文本编辑器. MarkitUp markIt ...

  9. Vue使用Echarts以及Echarts配置分享

    一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...

随机推荐

  1. 二、mysql安装详解

    step1:打开下载的mysql安装文件(mysql-5.5.36-win32.msi),双击运行,如下图: step2:点击“Next”按钮继续,如下图: step3:点击“勾选”,点击“Next” ...

  2. CodeForces 1110H. Modest Substrings

    题目简述:给定$1 \leq l \leq r \leq 10^{800}$,求一个长度为$n \leq 2000$的数字串$s$,其含有最多的[好]子串.一个串$s$是[好]的,如果将其看做数字时无 ...

  3. 《剑指offer》面试题17—合并两个排序链表

    题目:输入两个递增排顺序的链表,合并这两个链表并使合并后的链表仍是递增排序的. 重点: 1.代码鲁棒性:要判断输入的两个链表都为NULL:其中一个链表为NULL的情况. 2.用递归实现,注意递归的思路 ...

  4. 初识btrace

    此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1 btrace简介 BTrace是一个非常不错的java诊断工具.BTrace 中的B表示bytecode ...

  5. 51nod 1068【简单博弈】

    思路 手动打表, N 1 : A出1 A胜: 2 : A出2 A胜: 3 : A只能出2的整数幂&&这个数<=3,所以只能出1,2:A出1的时候,B就是2的情况,B胜:A出2的时 ...

  6. mongodb 由于计算机死机造成的无法启动故障

    一次计算机死机,重启后,mongodb无法启动,log显示: exception in initAndListen: 12596 old lock file, terminating Sun Mar ...

  7. 跳转到另一个APP

    看看这个代码: http://code4app.com/codesample/4fcc512d6803fae60b000002 inApp跳转,不过需要Nimbus类库. 要跳转到另一个APP,需要另 ...

  8. xml中运用js和jq

    1.点击事件参数为this 一般<a>标签中会使用href和onclick两种方式来进行进行页面跳转或执行动作,但是小编一般都会使用onclick来进行执行Ajax函数进行跳转,并同时使用 ...

  9. C#Sqlite增删改查

    说到使用数据库的话,无非也就是对数据的增加,删除和修改以及查询.前文已经 创建好了程序,现在我们就可以来具体实现Sqlite的数据操作,增删改查. 第一步,创建连接字符串来连接数据库: private ...

  10. 【Netty】利用Netty实现心跳检测和重连机制

    一.前言 心跳机制是定时发送一个自定义的结构体(心跳包),让对方知道自己还活着,以确保连接的有效性的机制.   我们用到的很多框架都用到了心跳检测,比如服务注册到 Eureka Server 之后会维 ...