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.首先下载 ...
随机推荐
- c语言里如何调用汇编里的变量?
c语言里如何调用汇编里的变量? 汇编语言:是声明全局变量 .globl _end_ofs _end_ofs: .word _end - _start c语言:声明这个变量,然后再调用这个变量 void ...
- web.xml中load-on-startup的作用,web应用写一个InitServlet,这个servlet配置为启动时装载
如下一段配置,熟悉DWR的再熟悉不过了:<servlet> <servlet-name>dwr-invoker</servlet-name> <ser ...
- JDK1.8中对hashmap的优化
在Java编程语言中,最基本的结构就是两种,一个是数组,另外一个是模拟指针(引用),所有的数据结构都可以用这两个基本结构来构造的,HashMap也不例外.HashMap实际上是一个“链表散列”的数据结 ...
- 跟我学: 使用 fireasy 搭建 asp.net core 项目系列之三 —— 配置
==== 目录 ==== 跟我学: 使用 fireasy 搭建 asp.net core 项目系列之一 —— 开篇 跟我学: 使用 fireasy 搭建 asp.net core 项目系列之二 —— ...
- android通过获取摄像头照片,实时与点传输
http://blog.csdn.net/csh159/article/details/7926654/ GetIP: [html] view plain copy print? package co ...
- sql server随机排序和随机取出n条数据
问题:博主在2010-2011学年,广东技术师范大学大四的时候,去过红海人力集团面试数据库职位,很清楚记得当时有一道笔试题目是:编写sql从表里面随机取出10条记录. 解决方案:在sql server ...
- 如何对接payjs的个人微信扫码支付接口
在众多个人支付接口的产品中,要寻找一个稳定可靠的产品是比较难的,所幸遇到payjs,感觉逼格较高,非常满足自己的品味.推荐大家使用.下边是我在对接payjs的过程中的一些经验和技巧,分享给大家. 一. ...
- swiper 解决动态加载数据滑动失效的问题
两种解决方法 第一种解决办法: success:function(result){ var resultdata =eval("("+result+")"); ...
- DRF教程3-类视图
Rewriting our API using class-based views 使用类视图重写root views,只需要一点点重构. from django.http import Http40 ...
- urllib库的基本使用
urllib库的使用 官方文档地址:https://docs.python.org/3/library/urllib.html 什么是urllib Urllib是python内置的HTTP请求库包括以 ...