在vue中使用echarts饼图示例

1.安装

npm install echarts --save

2.官方示例


option = {title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};

3.完整vue示例

<template><div class="controller"><div ref="mian" class="mian" /></div>
</template>
<script>
import * as echarts from 'echarts'
export default {data() {return {}},created() {this.getdataSource()},methods: {async getdataSource() {const dataSource = { // 后端返回数据totalNum: 61,dataList: [{title: '足球',countNum: 5},{title: '篮球',countNum: 21},{title: '羽毛球',countNum: 35}]}const data = dataSource.dataList.map(item => { // 后端返回数据处理return {value: item.countNum,name: `喜欢${item.title}${item.countNum}人`}})this.$nextTick(() => {const chartDom = this.$refs.mianconst myChart = echarts.init(chartDom)const option = {title: {text: '',subtext: `参与投票(${dataSource.totalNum})人`,left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: '',type: 'pie',radius: '50%',data,// color: ['red', 'purple', 'yellow'], // 自定义颜色范围emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}option && myChart.setOption(option)})}}
}
</script><style lang="scss">
.controller {padding: 0 20px;.mian{width: 800px;height: 800px;margin: 20px auto;}
}
</style>

效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/772157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用css滤镜做颜色不同的数据卡片(背景图对于css滤镜的使用)

<template> <div class"xx_modal_maincon"><div class"xx_model_bt">履约起始日至计算日配额及履约情况</div><el-row><el-col :span"6"><div class"xx_modal_mod"><div class"mod…

虚拟机Linux-openEuler硬盘空间扩容

虚拟机Linux-openEuler硬盘空间扩容 1、需求场景 我们在使用虚拟机时&#xff0c;可能会出现磁盘空间不够用导致各种bug出现的情况。 首先&#xff0c;我们要扩展虚拟机的可用磁盘空间。如图所示&#xff0c;我的原本硬盘大小为8G&#xff0c;我们扩展到30GB 2、打开虚拟机…

android_uiautomator元素定位

通过UIAUTOMATOR的text属性定位到元素&#xff0c;并打印文本from appium import webdriver from appium.webdriver.common.appiumby import AppiumBy import time # For W3C actions from selenium.webdriver.common.action_chains import ActionChains from selenium.webdriv…

1_88. 合并两个有序数组

1_88. 合并两个有序数组 难度: 简单 提示: 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。请你合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意…

使用U盘重装CentOS7系统

下载CentOS7 系统镜像 制作启动U盘之前&#xff0c;首先要准备一个系统镜像&#xff0c;这里我在CentOS官网直接下载镜像文件&#xff1a; CentOS官网 为了保证下载速度&#xff0c;这里我使用阿里云镜像下载&#xff1a; 阿里云镜像 如上图所示&#xff0c;我需要一个带UI界…

ES 进阶知识

索引Index 一个索引就是一个拥有几分相似特征的文档的集合。比如说&#xff0c;你可以有一个客户数据的索引&#xff0c;另一个产品目录的索引&#xff0c;还有一个订单数据的索引。一个索引由一个名字来标识&#xff08;必须全部是小写字母&#xff09;&#xff0c;并且当我们…

pytorch代码中optimizer.step()和scheduler.step()有什么区别

optimizer.step()通常用在每个patch_size之中(一个patch_size的数据更新一次模型参数)&#xff0c;而scheduler.step()通常用在epoch里面,但是不绝对&#xff0c;可以根据具体的需求来做。只有用了optimizer.step()&#xff0c;模型才会更新&#xff0c;而scheduler.step()是对…

【机器学习】无监督学习算法之:K均值聚类

K均值聚类 1、引言2、K均值聚类2.1 定义2.2 原理2.3 实现方式2.4 算法公式2.4.1 距离计算公式2.4.1 中心点计算公式 2.5 代码示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c; K均值聚类 我不懂&#xff0c;能不能给我讲一讲&#xff1f; 小鱼&#xff1a;行&#xf…

latex在写算法`\For` 和 `\EndFor` 以及 `FOR` 和 `\ENDFOR` ,报错Undefined control sequence.

这里写目录标题 1. 错误原因2. 进行改正3. 爱思唯尔期刊与施普林格期刊对于算法的格式不太一样&#xff0c;不能直接套用总结 1. 错误原因 我在算法中使用\For&#xff0c;\EndFor 2. 进行改正 换成FOR&#xff0c;\ENDFOR 3. 爱思唯尔期刊与施普林格期刊对于算法的格式不太…

CMake学习笔记(一)一个最简单的CMakeLists嵌套示例

目录 1 mkdir project_macro 2 在project_marco中建立CMakeLists.txt 3 建立专门的src文件夹 4 在src中添加main.cpp和CMakeLists.txt 5 回到project_macro目录&#xff0c;建立build文件夹 6 进入build 文件夹&#xff0c;开始cmake 7 在build文件夹里执行make指令 8 …

Softmax到底行还是列

对于二维张量&#xff0c;飞话不多说&#xff0c;直接看代码 input_tensor torch.tensor([[2,3,5],[2,2,2],[3,1,3]], dtypetorch.float32) # input_tensor torch.rand((1000,1000,100)) print(input_tensor) print("*"*40) print("沿着dim1&#xff0c;计算…

直播行业网络安全建设

一、引言 直播行业近年来蓬勃发展&#xff0c;吸引了大量用户和资本的关注。然而&#xff0c;随着行业的壮大&#xff0c;网络安全问题也日益凸显。构建一个安全、稳定的直播行业网络对于保障用户权益、维护行业秩序具有重要意义。本文将详细探讨直播行业安全网络的构建与保障…

MongoDB知识

1、部署MongoDB &#xff08;1&#xff09;new好一个mongo文件之后执行 &#xff08;出现mongodb.key&#xff09;记得放行端口 openssl rand -base64 666 > mongodb.key &#xff08;2&#xff09;放到一个docker-compose.yml之后docker-compose up -d执行 version: 3.…

JavaSE系统性总结全集(精华版)

目录 1. 面向对象&#xff08;封装&#xff0c;继承&#xff0c;多态&#xff09;详解 1.1 面向过程和面向对象的区别 1.2面向对象的三大特性 1.2.1 封装 1.2.2 继承 1.2.3 多态 1.2.4 方法重写和方法重载的区别&#xff08;面试题&#xff09; 1.2.5 访问权限修饰符分…

《自动机理论、语言和计算导论》阅读笔记:p5-p27

《自动机理论、语言和计算导论》学习第2天&#xff0c;p5-p27总结&#xff0c;总计23页。 一、技术总结 1.集合 (1)commutative law of union. (2)distribute law of union. 2.归纳法(induction) & 演绎法(deduction) (1)归纳法&#xff1a;从许多个别的事实或原理中…

代码随想录算法训练营第十六天| 104.二叉树的最大深度、559.n叉树的最大深度、111.二叉树的最小深度、222.完全二叉树的节点个数

系列文章目录 目录 系列文章目录104.二叉树的最大深度①递归法直接法(求深度&#xff0c;前序遍历)间接法&#xff08;求高度&#xff0c;后序遍历&#xff09; ②迭代法&#xff08;层序遍历中有&#xff09; 559.n叉树的最大深度①递归法间接法&#xff08;后序遍历求高度&am…

canvas画带透明度的直线和涂鸦

提示&#xff1a;canvas画线 文章目录 前言一、带透明度的直线和涂鸦总结 前言 一、带透明度的直线和涂鸦 test.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content…

咕炮课堂Java架构师课程

课程介绍 主要针对1到5年及以上工作经验的开发人员&#xff0c;提供互联网行业热门技术的Java架构师专题培训&#xff0c;由业内技术大牛&#xff0c;行业及实战经验丰富的讲师进行技术分享。内容涵盖redis,mongodb,dubbo,zookeeper,kafka 高并发、高可用、分布式、高性能、并…

雪里温柔,水边明秀,不及Java 抽象类 和 Object类

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

Collection与数据结构 顺序表与ArrayList

1. 线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列… 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直线。但是在…