uniapp使用echart

devtools/2024/11/6 22:53:54/

一 直线图

三中国地图

javascript"><template><view class="content"><l-echart ref="chartRef"></l-echart></view>
</template><script setup>
import { ref, onMounted } from "vue";
import geoJson from "../../utils/china.json";
import LEchart from "@/components/l-echart/l-echart.vue";
const echarts = require("../../static/echarts.min.js");// 获取容器的dom元素
const chartRef = ref(null);
// echart图表的配置信息
const Options = ref({});onMounted(() => {addPie();
});// 加载饼图结构
const addPie = async () => {echarts.registerMap("中国", geoJson); // 注册中国地图const MyPie = await chartRef.value.init(echarts);Options.value = {geo: {map: "中国",show: true,// label:{//     show:true,//     fontWeight:600,//     formatter:function(r) {//         console.log(r.name)//         if(r.name === '内蒙古自治区') {//             return r.name.substr(0,3)//         }//         return r.name.substr(0,2)//     }// },// regions:[{//     name: '广东省',//     selected:true//     // itemStyle: {//     //     areaColor: 'red',//     //     color: 'red'//     // }// },{//     name: '香港特别行政区',//     label:{//         offset:[2,12]//     }// },{//     name: '澳门特别行政区',//     label:{//         offset:[-15,15]//     }// }]},series: [{type: "map",map: "中国",label: {show: true,fontWeight: 600,formatter: function (r) {if (r.name === "内蒙古自治区") {return r.name.substr(0, 3);}return r.name.substr(0, 2);},},data: [{name: "广东省",selected: true,},],},],};MyPie.setOption(Options.value);
};
</script><style scoped>
.content {width: 100vw;height: 100vh;
}
</style>


http://www.ppmy.cn/devtools/131855.html

相关文章

利用游戏引擎的优势

大家好&#xff0c;我是小蜗牛。 在当今快速发展的游戏产业中&#xff0c;选择合适的游戏引擎对开发者来说至关重要。Cocos Creator作为一款功能强大且灵活的游戏引擎&#xff0c;为开发者提供了丰富的工具和资源&#xff0c;使他们能够高效地开发出优秀的游戏。本文将探讨如何…

24.11.6 PySimpleGUI库和pymsql 库以及人脸识别小项目

PySimpleGUI 库 PySimpleGUI 是一个用于简化 GUI 编程的 Python 包&#xff0c;它封装了多种底层 GUI 框架&#xff08;如 tkinter、Qt、WxPython 等&#xff09;&#xff0c;提供了简单易用的 API。PySimpleGUI 包含了大量的控件&#xff08;也称为小部件或组件&#xff09;&…

国家级汽车检测中心联合开源网安打造安全解决方案,提升行业安全检测水平

某汽车检测中心是我国交通运输行业智能商用车领域的国家级检测中心&#xff0c;以商用车智能化、网联化检测能力引领&#xff0c;拥有交通运输部及工业和信息化部认定的“智能网联汽车自动驾驶封闭测试场地测试基地”和“交通运输部自动驾驶交通技术研发中心”&#xff0c;主要…

GPT-SoVITS 部署方案

简介 当前主流的开源TTS框架&#xff0c;这里介绍部署该服务的主要流程和我在使用过程中出现的问题。 使用的技术 Docker、Jupyter、Python、C# 部署 docker的使用 拉取命令 docker pull jupyter/base-notebook:python-3.10.11jupyter的访问 docker运行以后可以直接使用…

【C++】RBTree——红黑树

文章目录 一、红黑树的概念1.1 红⿊树的规则&#xff1a;1.2 理解最长路径长度不超过最短路径长度的 2 倍1.3 红⿊树的效率 二、 红⿊树的实现2.1 红⿊树的结构2.2 红⿊树的插⼊2.2.1 红⿊树树插⼊⼀个值的⼤概过程 2.3 红⿊树的插⼊代码实现 一、红黑树的概念 红⿊树是⼀棵⼆…

Claude发布桌面客户端!新功能支持分析100页PDF的图像!

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;专注于分享AI全维度知识&#xff0c;包括但不限于AI科普&#xff0c;AI工…

「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用

在鸿蒙应用中&#xff0c;Canvas 组件可以实现丰富的动态效果&#xff0c;适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画&#xff0c;以及性能优化策略。 关键词 Canvas 组件动态绘制动画效果动态进度条旋转和缩放性能优…

信息学科平台系统开发:Spring Boot实用指南

3系统分析 3.1可行性分析 通过对本基于保密信息学科平台系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本基于保密信息学科平台系统采用Spring Boot框架&a…