随笔分类 -  echarts&&Map

图标和地图相关组件
项目内网PGIS地图的使用：以天地图做打底，使用leaflet.js交互式地图 JavaScript 库做开发。
摘要：相关参考网址：https://leafletjs.cn/reference.html#map-example 区域回显：https://kklimczak.github.io/Leaflet.Pin/； https://blog.csdn.net/BADAO_LIUMANG_QIZHI/articl 阅读全文
posted @ 2024-01-29 11:06 xuelin 阅读(656) 评论(0) 推荐(0)
用echarts辅助，地图用svg（需要UI配合）展示，还原任意UI设计，可点位，可热力图，可交互，可滚动可拖拽，可用echarts的控件，： PS：缺点是相关的点位是平面的xy点位，热力图曾也是平面xy，不可用百度地图等坐标系的坐标做展示。 可用于定制化展示
摘要：相关代码 <!-- * @Author: wxl * @Date: 2023-05-25 10:27:16 * @LastEditors: wxl * @LastEditTime: 2023-05-26 10:58:34 --> <template> <div :id="histogramId" v 阅读全文
posted @ 2024-01-29 10:56 xuelin 阅读(22) 评论(0) 推荐(0)
用echarts绘制的相关地图，热力图层，点，背景等都可修改，demo平台首页地图：
摘要：注意事项： 项目中安装的echarts版本必须是4.9.0 "echarts": "^4.9.0", "echarts-countries-js": "^1.0.5", "echarts-gl": "^1.1.2", 展示的相关区县官方json文件的获取方法： 打开： http://datav.al 阅读全文
posted @ 2024-01-29 10:51 xuelin 阅读(1080) 评论(0) 推荐(0)
竖向自动滚动的柱状图，颜色文字图片等皆可修改，详情见代码
摘要：组件代码： <template> <!-- 柱状图 横向滚动柱状图 --> <div :id="histogramId" v-bind:style="{height:height,width:width}"></div> </template> <script type="text/ecmascri 阅读全文
posted @ 2024-01-29 10:44 xuelin 阅读(28) 评论(0) 推荐(0)
可滚动的横向柱状图，可展示一个，也可以展示多个，颜色，文字，是否渐变等都可展示。
摘要：相关组件代码： <template> <!-- 柱状图 横向滚动柱状图 --> <div :id="histogramId" v-bind:style="{height:height,width:width}"></div> </template> <script type="text/ecmasc 阅读全文
posted @ 2024-01-29 10:42 xuelin 阅读(42) 评论(0) 推荐(0)
echarts之带图片的饼图
摘要：相关代码： /* * @Author: wxl * @Date: 2022-11-04 08:22:23 * @Last Modified by: wxl * @Last Modified time: 2022-12-12 17:32:58 */ <template> <!-- 饼图 --> <di 阅读全文
posted @ 2024-01-29 10:37 xuelin 阅读(40) 评论(0) 推荐(0)
颜色，背景，间距，可修改
摘要：/* * @Author: wxl * @Date: 2022-11-04 08:22:23 * @Last Modified by: wxl * @Last Modified time: 2022-12-12 17:32:58 */ <template> <!-- 饼图 四分之三圆--> <div 阅读全文
posted @ 2024-01-29 10:35 xuelin 阅读(22) 评论(0) 推荐(0)
页面中的blockShow组件展示，可进行相关的样式修改，一般月饼图搭配使用，具体根据实际来
摘要：<template> <!-- 这是新版的相对应的颜色列表的UI --> <div class="bllockListShow"> <div class="pieList" v-for="(item,index) in dataArr" :key="index" @click="clickUptow 阅读全文
posted @ 2024-01-29 10:34 xuelin 阅读(14) 评论(0) 推荐(0)
3D圆饼图，可修改颜色，图片等，具体见代码：
摘要：组件代码： <template> <!-- 饼图 --> <div :id="histogramId" v-bind:style="{height:height,width:width}"></div> </template> <script src="https://unpkg.com/echar 阅读全文
posted @ 2024-01-29 10:32 xuelin 阅读(79) 评论(0) 推荐(0)