h5引入echarts地图以及不显示的解决方法

最新推荐文章于 2024-05-31 10:04:55 发布
最新推荐文章于 2024-05-31 10:04:55 发布
阅读量2.2k 收藏 7
点赞数
分类专栏： 前端 echarts 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45615337/article/details/115210283
版权

h5引入echarts地图

  1. 引入echarts.js。

  2. 创建div div必须有高度

    	<div id="main" style="height: 533px;"></div>

  3. 下载并引入地区js。没有的点击这里下载
    在这里插入图片描述

  4.    echarts.registerMap('中华人民共和国',chinaJson); //第一个参数是地名必须中文，第二个参数对应引入文件中的变量名。
   var chart = echarts
最低0.47元/天 解锁文章
我JS呢
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
微信小程序和h5端使用echarts，并动态改变图表
正在奋踏的少年
06-12 1902
一，微信小程序使用echarts; 1.首先，下载echarts微信版 地址：https://github.com/ecomfe/echarts-for-weixin 下载后打开如图所示： 2.将ec-canvas目录拷贝到自己的小程序项目中（ec-canvas目录下的echarts.js可以自己在echarts官网自己手动构建需要的图表后替换，减小插件大小） 我是将它拷贝到components（专存放组件的目录）目录下的： 3.创建个test2目录，下面创建index页面（i...
echarts+h5制作各个城市的地图
ko_10086的博客
03-25 947
【代码】echarts+h5制作各个城市的地图。
echarts三种引入方式
04-15
echarts曲线图表三种引入方式，包括源码和所需js文件。
在vue项目，优化echarts 按需引入（地图）
m0_57775106的博客
04-23 176
可以 在main.js 文件中 也可以在 使用的vue 文件使用，就可以正常使用Echarts 工具了，需要什么样的类型，引入什么类型 ...Chart。2.在src 的下创建echarts文件 index.js文件。1.下载echarts。
H5（uniapp）中使用echarts
qq_46376192的博客
11-24 1378
H5（uniapp）中使用echarts
H5端引入echart 视图更新的大坑
那片枫叶~
12-14 711
H5端引入echart 视图更新的大坑 1、主要是写移动端引入echart折线图重置数据的时候遇到的样式错乱的坑,效果图如下 2、项目是每次请求数据重置图表，以下会在代码列出错误的地方 //HTML部分 <div id="main" style="width:100%!important;"></div> //JS部分 //在mounted初始化图表 myChart = echarts.init(document.getElementById('main'))
uniapp APP和H5正确使用echarts总结和填坑说明
pixle的博客
02-25 4135
对于一些频繁的dom操作，uniapp提供了一个renderjs方案，是一个运行在视图层的js，大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力，只支持h5和app端。app端使用echarts自然采用renderjs方案。h5端使用区别不大，因为h5逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式。小程序依然采用wxs方案，可以使用u-chart等第三方插件。
echarts本地地图可以显示,打包后却不可以显示的解决方法
Heby的博客
04-11 883
2. 打开项目中的node_modules文件夹，找到echarts 文件夹，打开后找到，package.json，在package.json中 sideEffects 里面添加"map/js/china.js"1.首先低版本的echarts需要自己手动添加map。
uni-app 引入echarts饼图，其他图形一样，按需引入
08-31
uni-app 引入echarts饼图，如果需要其他图形，原理一样，按需引入
ECharts中国地图，广东省地图，广东省各市地图
06-06
ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。在官网无法下载了，找了很久找到这个。
Echarts.zip（适用uni-app App端和H5端的echarts图表组件）
05-27
适用uni-app App端和H5端的echarts图表组件
移动端页面在ios中不显示图片的解决方法
01-20
在移动端开发中，有的时候可能遇到这样的问题，我从别人网站上下载下来的图片，然后做出H5页面，但是在浏览器中和android中都显示正常，可是一到ios中图片就不显示了，这个时候就需要注意了，可能是图片的格式问题...
Android WebView 不支持 H5 input type=”file” 解决方法
01-05
经过不懈的努力，以及google 翻译的帮助 在 stackoverflow 中找到了解决的方法。 具体可以理解为 重写webview 的WebChromeClient ，废话不多说直接贴代码: private ValueCallback<Uri> mUploadMessage; p
html引入ECharts的两种方式
热门推荐
qiudechao1的博客
07-09 5万+
第一种方式： 本地引入 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> &l...
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 511
记录一次前端页面崩溃的产生及处理
前端开发记录
最新发布
qq_25806839的博客
05-31 165
【代码】前端开发记录。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 524
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
vue 笔记03
m0_47045804的博客
05-30 870
vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么？如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性。data里面定义的数据无法直接互相访问 因为加载到data的时候还没有产生当前的vue对象。return 返回的结果就是当前计算属性的值。回调函数的参数就是过滤原本的值return 返回过滤的新值。
uniapp h5使用echarts
10-17
可以使用uni-app提供的插件uni-echarts来在H5页面中使用echarts。具体步骤如下： 1. 安装uni-echarts插件：在HBuilderX中打开项目，点击菜单栏的工具 -> 插件市场，在搜索框中输入uni-echarts，点击安装即可。 2. 在需要使用echarts的页面引入echarts库和uni-echarts组件： ```html <template> <view> <uni-echarts :option="option" :height="300px"></uni-echarts> </view> </template> <script> import * as echarts from 'echarts'; import uniEcharts from '@/components/uni-echarts/uni-echarts.vue'; export default { components: { uniEcharts }, data() { return { option: { // echarts配置项 } } }, mounted() { // 初始化echarts实例 const chart = echarts.init(this.$refs.echarts); // 设置option chart.setOption(this.option); } } </script> ``` 3. 在option中配置echarts图表的相关参数，例如： ```javascript option: { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值