Vue中echarts的基本用法
前言:同大多数的前端框架一样,先读官网的使用方法。学会基本使用后,在实例中找到自己想要demo。拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用。
我是在vue中下面直接使用的echarts。下面按步骤讲解。
第一步:安装echarts依赖包,然后引入,注意最好在当前使用的组件中引入,而不需要在main.js中注册。
//1.首先引入
import echarts from "echarts";
第二步:在页面中创建一个盒子,用来装载图表
<!-- 2.为echarts准备一个具备大小的DOM -->
<div id="main" style="width:400px;height:350px;backgroundColor:'pink'"></div>
第三步:在js中初始化实例,这里我写到vue组件的mounted钩子函数中了
// 3.基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
第四步:也是最重要的一步,将所找到的demo的options放在本组件的data中。echarts的渲染主要是因为options指定的方式不同
//第四步
option : {
title: {
text: '缺陷统计',
// subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color:['green', 'orange','pink','#010101'],
legend: {
orient: 'vertical',
left: 'left',
data: ['无缺陷','一般缺陷', '严重缺陷', '危急缺陷']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 833, name: '无缺陷'},
{value: 335, name: '一般缺陷'},
{value: 80, name: '严重缺陷'},
{value: 9, name: '危急缺陷'},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
},
第五步:最后一步。还是在mounted函数中,将刚才的options设置到声明的实例中。
//5.使用刚指定的配置项和数据显示图表。
myChart.setOption(this.option);
这样,一个echarts的简单图表实例就形成了,下面是效果图
Vue中echarts的基本用法的更多相关文章
- 详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...
- vue 中 命名视图的用法
今天主要记录 vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...
- vue中watch的详细用法
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
- vue中watch的详细用法(转载)
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
- 在Vue中echarts可视化组件的使用
echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html 1.找到脚手架项目所在地址,执行cnpm install echarts ...
- vue中this.$set的用法
之前了解这个方法的时候,感觉这一辈子也用不到这个方法,因为当时没有应用场景,但是还真有用的时候,我相信你们也有用到时候. 从三个方面给大家说一下这个this.$set: 1.this.$set实现什么 ...
- vue中$ref的基本用法
1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...
- vue中echarts引入中国地图
<div id="myChartChina" :style="{width: '100%', height: '500px'}"></div& ...
- vue中watch函数的用法
vue中watch函数: 不仅可以判断路由变化(上篇博客有介绍),还可以判断数据的变化 (1):首先写watch函数 (2):在data里定义值 (3):在methods里写方法 (4):使用值
随机推荐
- Codeforces Round #185 (Div. 1 + Div. 2)
A. Whose sentence is it? 模拟. B. Archer \[pro=\frac{a}{b}+(1-\frac{a}{b})(1-\frac{c}{d})\frac{a}{b}+( ...
- 2019-1-27-WPF-使用-ItemsPanel-修改方向
title author date CreateTime categories WPF 使用 ItemsPanel 修改方向 lindexi 2019-1-27 21:8:9 +0800 2019-0 ...
- jQuery验证码发送时间秒递减(刷新存储cookie)
<input id="sendEmail" type="button" name="sendEmail" onclick=" ...
- Linux 内核接口
USB 端点被绑在接口中. USB 接口只处理一类 USB 逻辑连接, 例如一个鼠标, 一个键盘, 或者一个音频流. 一些 USB 设备有多个接口, 例如一个 USB 扬声器可能有 2 个接口: 一个 ...
- 网摘-获取屏幕dc并且将其画面显示在窗体中
获取屏幕dc并且将其画面显示在窗体中 HWND hWnd = ::GetDesktopWindow();//获得屏幕的HWND. HDC hScreenDC = ::GetDC(hWnd); // ...
- 特殊字符,如Emoji表情Base64存储到数据库
有些特殊字符,如Emoji,存储到oracle数据库就会变成乱码,解决方案就是Base64转码后存储到数据库,取出后再解码传输,经过验证是可以的. 编码存储,接收参数转json再.ToString() ...
- CentOS 7 修改root密码
1.开机,在启动菜单上选择CentOS Linux (3.10**.**.x86**) 7 (Core) 按下e,进入编辑模式2.将光标一直移动到 LANG=en_US.UTF-8 后面(如果找不到, ...
- python代码规范以及函数注释规范
摘要 本文给出主Python版本标准库的编码约定.CPython的C代码风格参见PEP7.本文和PEP 257 文档字符串标准改编自Guido最初的<Python Style Guide&g ...
- HBase 原理
遗留问题: 数据在更新时首先写入Log(WAL log)和内存(MemStore)中,MemStore中的数据是排序的,当MemStore累计到一定阈值时,就会创建一个新的MemStore,并且将老的 ...
- 【sublime】Pretty Json插件的安装与配置使用
一.安装 Package Control 代码安装 从菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console.将以下 Python 代码粘贴进去并 ent ...