echarts地图显示不正常问题

echarts2内置地图，而echarts3无内置地图，需要自己下载并导入。

在刚开始接触地图的时候，使用dreamweaver来构建页面，使用的编码不是UTF-8

代码是按照官方的拷贝下来的（我使用的是GBK编码）。

发现问题在于编码上，当将编码改为UTF-8的时候，如图：

地图的显示不正常问题解决。

时间： 2024-08-23 23:31:41

echarts地图显示不正常问题的相关文章

echarts地图引入json或者js

由于echarts3.0地图数据暂停服务了,今天临时要修改一个地区的地图,可把我给忙活了 echarts的例子上提供了引入js显示地图.引入json数据显示地图两种方式,下面简单介绍下这两种引入方式添加一个div,设置宽度和高度用来显示地图 <body>  <div id="main" style="width: 500px;height:400px;"><

echarts绘制四川地图

1.效果图如下: 首先下载echarts-all.js. 代码如下: 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

shp数据转为geojson格式作为ECharts地图扩展文件

项目中进行图表信息展示时采用了Eharts的图表样式,需要用到地图展示方式,但是已有的地图并不能满足项目的个性化需求,采用地图图片的方式既不灵活,也不美观.ECharts地图扩展文件使用geoJson格式,制作方式有很多种,我选择通过shp数据转换为geojson格式,因为可以通过ArcMap制作自己个性化的shp数据,也就能灵活得到满足项目需求的geojson数据,制作方式如下: 1.制作shp数据.地理信息行业的人员都对ArcGis和shp格式的数据编辑比较了解,也不是简单能说清楚的,不再详

Echarts 结合百度地图使用总结

注:echarts结合china.js使用效果并不好,china.js是矢量图,显示的地图只有一个轮廓,所以正常会选择百度地图或者其他地图配合使用. 一.代码如下(参考网上,并加入自己的整理) function initHotMap(dataArr, domId, title){ $.get("${ctxStatic}/resources/js/bmap/dataTool.js",function(){ $.get('${ctxStatic}/resources/js/bmap/bma

基于VUE+TS中引用ECharts的中国地图和世界地图密度表

首先先附上官网 http://echarts.baidu.com/option.html#series-line.label 以及密度表对应geo配置文档 http://echarts.baidu.com/option.html#geo 以下仅是个人在开发中逐步摸索出来的.demo目前没出问题.如果有错误地方请留言指出 (若转载请标注出处) 直接上效果图,对应代码在效果图下面安装: 1. npm install echarts --save2. npm install --save @typ

echarts切换tab时，第一个图表显示，第二个图表不显示的解决办法

首先这种情况,我在网上看到了好多人问,确实也有正解,但是只是说出了其错误出现的原因,并没有给出解决方法. 我也是深受其害,所以呢,在这里记录一下,分享给还在困扰着的你们,迅速找出解决办法. 首先,我先简单介绍一下,我这里出现错误的情境. 原来刚刚遇到这个问题的时候,是在点击多个tab选项之后,出现了地图不显示的情况,然后呢,我就一直在根据打开多个tab之后,地图不显示这个思路进行寻找bug的原因,后来问了问同事,发现原来这个错误的原因,不是因为打开多个tab页面导致的,而是因为打开的多个tab选

如何在vue项目中使用echarts和高德地图绘制折线和热力图

1.先下载相关的依赖,这里echarts和高德地图放到一起.(高德地图需要先去申请一个key) // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router fr

echarts百度接口实现数据下钻

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ page language="java" import="java.sql.*,java.io.*,java.util.*"%> <!DOCTYPE html PUBLIC "-//W3C

沫沫金Echarts移动端demo

鄙视百度!!! 官网给的Demo支持自动大小,确不给完整的源码XXX 自己动手,丰衣足食 http://echarts.baidu.com/demo.html#bar-tick-align 用最基本的柱状图官网代码简单两步,实现移动端自适应大小 //1.下载Echarts <script src="dep/Echarts/echarts-all-3.js"></script> //2.chart容器宽度自适应 <!-- 为ECharts准备一个具备大小(