当前位置: 首页 > news >正文

Vue3+Echarts+饼图环形图

记得给容器宽高 

<div id="leftChartguawang" style="height: 28vh"></div>

 配置函数

const leftChartguawang = () => {const chartBox = echarts.init(document.getElementById('leftChartguawang'))let datas = [[{ name: '居民节能建筑', value: 20 },{ name: '居民非节能建筑', value: 20 },{ name: '非居民节能建筑', value: 30 },{ name: '非居民非节能建筑', value: 30 }]]const option = {title: {text: '挂网总面积\n \n422.61(万㎡)',left: 'center',top: '40%',textStyle: {color: '#999',fontWeight: 'normal',fontSize: 14}},series: datas.map(function (data, idx) {var top = idx * 50return {type: 'pie',radius: [60, 100],top: top + '%',height: '100%',left: 'center',width: 500,itemStyle: {borderColor: '#fff',borderWidth: 1},label: {alignTo: 'edge',formatter: '{name|{b}}\n{time|{c} %}',minMargin: 5,edgeDistance: 10,lineHeight: 15,rich: {time: {fontSize: 10,color: '#999'}}},labelLine: {length: 15,length2: 0,maxSurfaceAngle: 80},labelLayout: function (params: any) {const isLeft = params.labelRect.x < chartBox.getWidth() / 2const points = params.labelLinePointspoints[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.widthreturn {labelLinePoints: points}},data: data}})}option && chartBox.setOption(option)window.addEventListener('resize', function () {chartBox.resize()})
}leftChartguawang()

http://www.lryc.cn/news/423989.html

相关文章:

  • Python while编程题目|AI悦创Python一对一教学辅导
  • C语言 | Leetcode C语言题解之第324题摆动排序II
  • Docker③_VMware虚拟机和Docker的备份与恢复
  • 【EMC专题】ESD抑制器简要介绍
  • 贷齐乐系统最新版SQL注入(绕过WAF可union select跨表查询)
  • 『大模型笔记』虚拟机(Virtual Machine,VM)与Docker对比!
  • 基于SpringBoot+Vue框架的租车管理系统
  • HAProxy基本配置及参数实操
  • go-zero中间件的使用
  • 六、ESP32-S3上使用MicroPython点亮WS2812智能LED灯珠并通过web控制改变灯珠颜色优化超时和线程
  • (el-Time-Picker)操作(不使用 ts):Element-plus 中 TimePicker 组件的使用及输出想要时间格式需求的解决过程
  • UIAbility组件基础(一)
  • 神经网络的数学原理
  • Java设计模式-抽象工厂模式-一次性理解透
  • day16-测试自动化之selenium的PO模式
  • Springboot+freemarker大段文本内容动态修改输出,所见即所得
  • Kali Linux网络问题解决与静态IP配置技巧
  • 网络状态码-经验笔记
  • c++ 实现 actor 框架
  • 应对猫咪掉毛挑战,希喂、小米热门宠物空气净化器实测功效PK
  • 0002 保险会计及其特殊性
  • ChatTTS:终极文本转语音工具,支持API!
  • VUE和Element Plus
  • Python学习笔记(五)
  • Linux企业级应用(一)构建企业级Linux应用平台:全面指南
  • LeetCode112 路径总和
  • TI AWR1843 毫米波雷达实物展示
  • 前端JS总结(下)之事件操作
  • 如何妙用哈希表来优化遍历查找过程?刷题感悟总结,c++实现
  • 【设计模式】漫谈设计模式