封装echart圆饼图
实现效果:
<template><div :id="id" :style="{ width: width , height: height }"></div>
</template><script lang="ts" setup>
interface Props {id?: string,width?: string,height?: string,color?: string[],value?: number[],name?: string[],type?: string,legend?: object,
}
const props = withDefaults(defineProps<Props>(), {id: 'radio',width: '100%',height: '500px',color: () => {return ["#5087ec", "#68bbc4", "#58a55c", "#ffcf48", "#ee752f", "#d95040"]},value: () => { return [] },name: () => { return [] },type: '0',legend: () => {return {top: "5%",left: "center",}}
})
const global: any = inject("global");
let seriesData: object[] = [];
let option: object = {};
const changeOption = function () {seriesData = []option = {}for (let i = 0; i < props.name.length; i++) {seriesData.push({value: props.value[i],name: props.name[i],});}if (props.type == "0") {option = {tooltip: {trigger: "item",},legend: {orient: "vertical",left: "right",top: "center",},grid: {top: "0",left: "0",right: "0",bottom: "0",containLabel: true,},color: props.color,series: [{type: "pie",radius: "70%",data: seriesData,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},label: {formatter(ar: any) {return ar.name + "\n" + ar.value;},},},],};} else {option = {title: [{// text: `{val|${props.count}}\n{name|${props.countName}}`,top: "center",left: "center",textStyle: {rich: {name: {fontSize: 15,color: "#333333",padding: [0, 0],},val: {fontSize: 20,color: "#333333",},},},},],tooltip: {trigger: "item",formatter(ar: any) {return ar.marker + ar.name +' : '+ ar.value + '%';},textStyle: {fontSize: 15,color: "#333333",fontWeight:600}},legend: props.legend,grid: {top: "0",left: "0",right: "0",bottom: "0",containLabel: true,},color: props.color,series: [{type: "pie",radius: ["35%", "55%"],itemStyle: {// borderRadius: 10,borderColor: "#fff",borderWidth: 0,},label: {formatter(ar: any) {return ar.value + '%';},},data: seriesData,},],};}
};let mychart: any;
onMounted(() => {if (document.getElementById(props.id)) {setTimeout(() => {mychart = global.$echarts.init(document.getElementById(props.id));changeOption();mychart.setOption(option);window.addEventListener("resize", () => {mychart.resize();});}, 100)}
});watch(props, () => {try {if (mychart != null && mychart != "" && mychart != undefined) {mychart.dispose(); //销毁}mychart = global.$echarts.init(document.getElementById(props.id));changeOption();mychart.setOption(option);} catch (err) { }
});
</script>
<style scoped></style>
封装echart圆饼图相关推荐
- echart 圆饼图 显示单位_玩转ECharts之实现“1/2圆的玫瑰图”
前言 玩转ECharts系列,主要为大家讲解我们基于ECharts如何实现企业级大屏项目中较为常用的各种奇奇怪怪的图表,接下来我们将通过几篇文章从基础图表开始为大家详细讲解实现这些图表样式的一些&qu ...
- canvas画条形图 微信小程序_小程序-引入 echart 图表画圆饼图
前言 在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢 示例效果 完整示例效果-可以点击此处查看 下载使用 ec-canvas 在github上下载echarts ...
- 在DataGridView控件中一次显示出多个圆饼图的原始程序代码
之前我们曾经提到过,您可以在Windows Form窗体上的一个DataGridView控件中一次显示出多个圆饼图(或其它形式的统计图表)以便能够一次检视多个群组数据的比例情况(如图表1所示).当时并 ...
- Android自定义睡眠下表统计图,Android 进阶自定义View(5)图表统计PieChartView圆饼图的实现...
今天讲图表统计中比较常用的一个,像支付宝的月账单啥的,都是用圆饼图来做数据统计的,先看一下我最终实现的效果图: image.png 该效果实际上是两个实心圆叠加后的效果. image.png imag ...
- Echarts之圆饼图用法
Echarts之圆饼图用法 css代码 html代码 js代码 css代码 #chartone {float: left;margin-left: -50px;height: 159px;width: ...
- echarts的圆饼图自定义颜色
圆饼图自定义颜色 1.在HTML中的代码: <div id="echartZB" style="width:400px;height:600px;margin-le ...
- C# 控件Chart的 圆饼图百分比
开发环境: 基于 VS2019 基于C#语言 解决问题 用C# 控件Chart 画出 圆饼图百分比,很直观 结果展示 4.源代码下载地址: https://download.csdn.net/down ...
- pyecharts常见柱状图、圆饼图、散点图
今天带大家认识一下pyecharts中常用的三种视图的画法.更多的是认识一下基本的配置项,避免走太多的坑.当然都是些常用的配置项,如果有奇怪的需求,大家自行查找.. 当然前提是必须先安装了pyecha ...
- java圆饼图插件_饼图----插件
(function( w ) { // 角度转换为弧度 function angleToRadian( angle ) { return Math.PI / 180 * angle; } /* * c ...
最新文章
- Akka源码分析-Remote-发消息
- linux 换行符_「linux」libevent demo详细分析(对比epoll)
- java表达式类型自动提升
- 转:Git_Windows 系统下Git安装图解
- 【GDOI2016模拟3.11】历史
- 2017年第八届蓝桥杯 - 省赛 - C/C++大学A组 - A. 迷宫
- 解决PHPCMS 安装问题 Can not connect to MySQL server
- 并发和并行的区别简单介绍
- 面试题22. 链表中倒数第k个节点
- 微软超级麻将AI Suphx论文发布,研发团队深度揭秘技术细节
- 博士考试考完了,庆祝一下
- 两个华为路由器实现MESH组网,WIFI信号无缝漫游
- wincc服务器设置位置,wincc客户端访问服务器设置
- EF migration conflicted with foreign key constraint
- 微信小程序里面的单步调试和变量查看
- oracle12c密码文件,【转】Oracle 12c 关于密码文件(password)的几个新特性
- PowerShell 将对象转换成文本
- vue获取当前时间并时时刷新
- php短信验证 免费_php如何实现发送短信验证码(图文)
- 期货开户无为的趋势跟踪
热门文章
- iOS蓝牙开发 --- 唯一标识问题
- 封装to封装库_关于封装的三个最伟大的段落
- 【观察】Oracle NetSuite+德勤中国税务Digital T-Suite:做中国企业“智慧税务”新助手...
- 激光SLAM——第四节(激光SLAM的前端配准方法)
- 图片上传本地预览(回显)插件
- LeetCode-剑指Offer
- 三款充满创意的新奇软件分享
- Ubuntu20.4安装ROS系统教程(自用)
- DevExpress 组件源代码,图表、报告、数据透视表
- SpringBoot+RabbitMq实现数据批量接收,批量操作