vue使用echarts可视化图形插件
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可视化图形插件的更多相关文章
- 在Vue中echarts可视化组件的使用
echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html 1.找到脚手架项目所在地址,执行cnpm install echarts ...
- 基于vue和echarts的数据可视化实现
基于vue和echarts的数据可视化: https://github.com/MengFangui/awesome-vue.git
- vue使用Echarts图表
vue使用Echarts图表 童话_xxv 关注 0.5 2018.12.11 09:09* 字数 325 阅读 1456评论 2喜欢 13 在开发后台系统时,使用图表进行数据可视化,这样会使数据更 ...
- 数据可视化-gojs插件使用技巧总结
随着云计算时代的到来,由于Web技术的快速革新以及为了提供高质量的用户体验,数据可视化成为了前端技术发展的一大方向.为了解决这个问题,现如今涌现了很多优秀的第三方的javascript图形库,比如hi ...
- Angular+ionic2+Echarts 实现图形制作,以饼图为例
step1:添加插件echart; npm install echarts --save package.json文件中会在dependencies中添加echarts,如下图: step2:运行cm ...
- vue 搭建框架到安装插件依赖,Element、axios、qs等
一.使用vue 单页面开发,首先要安装好本地环境 步骤如下: 1 下载nodejs 安装 (此时npm 和 node环境都已经装好)2 安装淘宝镜像 npm install -g cnpm --reg ...
- vue解决音频可视化播放,使用wavesurfer.js
vue解决音频可视化播放,使用wavesurfer.js 上效果: 1.安装wavesurfer npm install wavesurfer.js 2.在页面导入 import WaveSur ...
- 10 个免费的 jQuery 可视化编辑器插件
富文本编辑器,也就是所见即所得的 HTML 编辑器,是网站一个非常重要的组件,特别是对于一些内容发布网站来说.本文介绍 10 个基于 jQuery 的可视化文本编辑器. MarkitUp markIt ...
- Vue使用Echarts以及Echarts配置分享
一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...
随机推荐
- 二、mysql安装详解
step1:打开下载的mysql安装文件(mysql-5.5.36-win32.msi),双击运行,如下图: step2:点击“Next”按钮继续,如下图: step3:点击“勾选”,点击“Next” ...
- CodeForces 1110H. Modest Substrings
题目简述:给定$1 \leq l \leq r \leq 10^{800}$,求一个长度为$n \leq 2000$的数字串$s$,其含有最多的[好]子串.一个串$s$是[好]的,如果将其看做数字时无 ...
- 《剑指offer》面试题17—合并两个排序链表
题目:输入两个递增排顺序的链表,合并这两个链表并使合并后的链表仍是递增排序的. 重点: 1.代码鲁棒性:要判断输入的两个链表都为NULL:其中一个链表为NULL的情况. 2.用递归实现,注意递归的思路 ...
- 初识btrace
此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1 btrace简介 BTrace是一个非常不错的java诊断工具.BTrace 中的B表示bytecode ...
- 51nod 1068【简单博弈】
思路 手动打表, N 1 : A出1 A胜: 2 : A出2 A胜: 3 : A只能出2的整数幂&&这个数<=3,所以只能出1,2:A出1的时候,B就是2的情况,B胜:A出2的时 ...
- mongodb 由于计算机死机造成的无法启动故障
一次计算机死机,重启后,mongodb无法启动,log显示: exception in initAndListen: 12596 old lock file, terminating Sun Mar ...
- 跳转到另一个APP
看看这个代码: http://code4app.com/codesample/4fcc512d6803fae60b000002 inApp跳转,不过需要Nimbus类库. 要跳转到另一个APP,需要另 ...
- xml中运用js和jq
1.点击事件参数为this 一般<a>标签中会使用href和onclick两种方式来进行进行页面跳转或执行动作,但是小编一般都会使用onclick来进行执行Ajax函数进行跳转,并同时使用 ...
- C#Sqlite增删改查
说到使用数据库的话,无非也就是对数据的增加,删除和修改以及查询.前文已经 创建好了程序,现在我们就可以来具体实现Sqlite的数据操作,增删改查. 第一步,创建连接字符串来连接数据库: private ...
- 【Netty】利用Netty实现心跳检测和重连机制
一.前言 心跳机制是定时发送一个自定义的结构体(心跳包),让对方知道自己还活着,以确保连接的有效性的机制. 我们用到的很多框架都用到了心跳检测,比如服务注册到 Eureka Server 之后会维 ...