uniapp使用echart

news/2024/11/2 9:18:44/

一 直线图

三中国地图

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/news/1543825.html

相关文章

clickhouse运维篇(二):多机器手动部署ck集群

熟悉流程并且有真正部署需求可以看一下我的另一篇简化部署的文章&#xff0c;因为多节点配置还是比较麻烦的先要jdk、zookeeper&#xff0c;再ck&#xff0c;还有各种配置文件登录不同机器上手动改配置文件还挺容易出错的。 clickhouse运维篇&#xff08;三&#xff09;&#x…

PCB电源层布线信号

在印刷电路板(PCB)的设计过程中,电源层通常被视为电源分配网络(PDN)的核心。电源层和接地层通常是通过平面铜层来实现的,旨在确保系统稳定性。然而,随着电路板复杂性的增加,尤其是在多层电路板中,设计师可能面临在电源层上布置信号线路的需求。虽然这种做法可以节省空…

LabVIEW在Windows和Linux开发的差异

LabVIEW广泛应用于工程和科研领域的自动化和测量控制系统开发&#xff0c;其在Windows和Linux平台上的开发环境有所不同。这些差异主要体现在操作系统兼容性、硬件支持、软件库和驱动程序、实时系统开发以及部署选择上。以下从各个方面详细对比分析LabVIEW在Windows与Linux系统…

Flink(一)

目录 架构处理有界与无界数据部署应用到任意地方运行任意规模应用利用内存性能 流应用流处理应用的基本组件流状态时间 应用场景事件驱动应用事件驱动应用的优势Flink如何支持事件驱动应用&#xff1f; 典型的事件驱动示例 数据分析应用流式分析应用的优势&#xff1f;Flink 如…

使用 OpenCV 在 Python 中绘制基本图形

概述 在图像处理和计算机视觉领域&#xff0c;OpenCV 是一个非常强大的工具包。它提供了许多函数来帮助开发者完成图像处理任务&#xff0c;包括绘制基本图形。本文将详细介绍如何使用 OpenCV 在 Python 中绘制基本图形&#xff0c;并通过具体的代码示例来展示整个过程。 环境…

nacos+maven实现多环境配置

maven引入nacos依赖&#xff0c;须包含有配置中心config <!-- 服务注册/发现--> <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId> </dependency>&…

Python OpenCV 图像改变

更改图像数据 通过 改像素点 或者 切片的区域 import cv2 import numpy as np img cv2.imread("image.jpg") print(img[3,5]) # 显示某位置(行3列5)的像素值( 如 [53 34 29] 它是有三通道 B G R 组成) img[3,5] (0,0,255) # 更改该位置的像素…

Java:网络编程套接字(socket)

TCP和UDP的区别: TCP:有连接,可靠传输,面向字节流,全双工; UDP:无连接,不可靠传输,面向数据报,全双工; 有连接/无连接: 此处的连接是"抽象"的连接: 通信双方如果保存了通信对端的信息,就相当于是"有连接"; 如果不保存对端的信息,就是"无连接&qu…