echart 地图显示不全解决

今天遇到地图显示不全的问题

let myChart = this.$echarts.init(document.getElementById('funddataCharts'))// 绘制图表myChart.setOption({          title: {            text: '收支情况'},
          backgroundColor: "#FEF8EF",
          tooltip: {            trigger: 'axis',
            axisPointer: {              type: 'cross',
              crossStyle: {                color: '#999'}}},
          grid: {            height: 500,
            top: "middle"},
          toolbox: {            feature: {              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true},}},
          legend: {            data: ['收入', '支出', '平均'],
            y: 100,
            x: 150},
          xAxis: [{              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisPointer: {                type: 'shadow'}}],
          yAxis: [{              type: 'value',
              name: '单位/万元',
              min: 0,
              max: 21000,
              interval: 3000,
              axisLabel: {                formatter: '{value} '}}],
          series: [{            name: '收入',
            type: 'bar',
            stack: '使用情况',
            data: [5000, 2000, 3600, 1000, 1000, 2000, 5000, 5003, 5000, 5001, 8000, 1000],
            barWidth: 40,
            itemStyle: {              normal: {                color: "#0099CC",
                label: {                  show: true, //开启显示,
                  position: "insideTop",
                  textStyle: { //数值样式
                    color: '#fff',
                    fontSize: 12}}}}}, {            name: '支出',
            type: 'bar',
            stack: '使用情况',
            data: [4000, 2002, 1800, 3500, 4200, 4000, 10032, 5005, 4000, 3000, 3500, 500],
            itemStyle: {              normal: {                color: "#66CC99",
                label: {                  show: true, //开启显示
                  position: "top",
                  textStyle: { //数值样式
                    color: '#66CC99',
                    fontSize: 12}}},},}, {            name: '平均',
            type: 'line',
            data: [500, 5000, 6000, 8000, 9000, 10000, 8200, 2300, 2300, 1600, 1200, 6000],
            itemStyle: {              normal: {                color: "red",
                label: {                  show: true, //开启显示
                  textStyle: { //数值样式
                    color: 'red',
                    fontSize: 12}}},},}],
          dataZoom: [{              xAxisIndex: [0, 0],// moveOnMouseMove: true,
              bottom: 50,
              show: true, //是否显示
              realtime: true, //拖动  时，是否实时更新系列的视图
              start: 30, //伸缩条开始位置（1-100），可以随时更改
              end: 90, //伸缩条结束位置（1-100），可以随时更改
              zoomOnMouseWheel:false,}]});

解决方案:

import echarts from 'echarts'
import world from 'echarts/map/json/china.json'
import  'echarts/map/js/china'
echarts.registerMap('world', world)

这样就解决了地图显示的问题!

echart 地图显示不全解决相关推荐

Word图片显示不全解决
Word图片显示不全解决文章目录 Word图片显示不全解决问题原因解决方法问题在编写毕业论文的时候遇到了图片显示不全的问题,如下图原因在调整格式的时候,把图片也调整了行距,导致图片显示 ...
word中图片为嵌入式格式时显示不全_打印Word图片显示不全 Word2007图片显示不全解决方法...
打印Word图片显示不全 Word2007图片显示不全解决方法,平凡的世界平凡的你,努力学习使我们变得不平凡,今天要介绍的知识是打印Word图片显示不全的相关知识,你准备好学习打印Word图片显示不全 ...
永恒之柱2显示服务器,永恒之柱2游戏黑屏是什么原因怎么解决_画面显示不全解决方法教程攻略...
IGN给出了最近发售的<永恒之柱2>8.5分的评价,称游戏中出色地塑造了不少人物形象,也拥有着迷人的海岛景色,虽然略有瑕疵,仍然不失为一款佳作. <永恒之柱2:死亡之火>在&l ...
nginx代理响应报文体不全解决思路
问题说明环境说明: centos 6.5 nginx 1.13.7 tomcat 8.5+ jdk 1.8 问题描述本地访问测试机接口发生异常 curl访问结果: tomcat日志: 解决思路开 ...
word文档中插入图片显示不全解决办法
在windows下写word文档,正常情况下,我们应该不会遇到插入图片显示不全的问题,好像是如果在已有的文档中插入图片,比如文档中间插入,图片没办法自动扩展空间,这就导致了显示不全的问题. 这个问题也 ...
Linux命令行模式启动VMware时vmnet-dhcpd和vmnet-natd进程无法启动 VMware进程不全解决办法
问题:命令行模式安装完成VMware后,进程不全,vmnet没有启动解决办法: 第一步:查看修改网络配置 vim /etc/sysconfig/network-scripts/ifcfg-ens33 ...
微信小程序苹果手机边框显示不全解决办法
在实际开发中,微信小程序在真机测试的时候会出现边框不全的情况发现是边框设置为1rpx,在一些手机上会转成0.5px,只要是小于1px显示都不正常.解决办法: 1.边框的设置写法1px 2.不设置边框 ...
ECharts图表坐标轴数据超出显示范围，以及坐标轴刻度标签显示不全解决方法
1.在使用ECharts图表时,比较常见到坐标轴数据超出显示范围的情况,如下解决办法:添加配置 2.坐标轴刻度标签显示不全就简单描述一下,比如你的数据横坐标有15个,但是默认不会显示全部解决方法 ...
div css每行文字显示一半同时文字字体重叠显示不全解决方法
CSS DIV布局中出现单行或多行文字的每行文字内容不能显示全,上下行文字有一点点重叠现象,文字字体只显示一半解决方法,在低版本IE特别明显文字字体显示不全,在谷歌浏览器等高版本IE浏览器测试还好些. ...

echart 地图显示不全解决

echart 地图显示不全解决相关推荐

最新文章

热门文章