草庐IT

echarts-wordcloud

全部标签

vue项目中使用echarts和china.js实现中国地图

在echarts最新的5.4.0版本中,已不能直接引用china.js来绘制中国地图,需要我们自己下载china.js包在网上查找资料,大部分是在index.html文件中直接引入echarts和china.js文件,但我使用这种方法在vue项目中引入失败,目前尝试可行的方法是把包下载到node_modules的echarts包里面,文件和方法具体如下:链接:https://pan.baidu.com/s/10Bmqabcb60n_ed1zEB0hJQ?pwd=tper提取码:tper首先npm下载好echarts,下载上面的map文件,把它放到node_modules的echarts文件夹下

echarts地图,选中颜色设置;取消鼠标默认事件,点击选中地图实现颜色变化,选择高亮,选中高亮,取消选中(再次点击取消选中),以下面地图为例

echarts地图,选中颜色设置;取消鼠标默认事件,点击选中地图实现颜色变化,选择高亮,选中高亮,取消选中(再次点击取消选中),下面以四川部分地图为例series:[{//left:'0%',//top:'0%',zoom:1.2,type:"map",map:name,roam:false,//鼠标平移或者缩放silent:silent,itemStyle:{normal:{//未对地图作任何操作时的样式,加载想默认展示的样式borderWidth:2,//边框大小borderColor:"#ffffff",areaColor:"#2DD4D6",//背景颜色label:{show:true

[ECharts] DEPRECATED: ‘normal‘ hierarchy in itemStyle has been removed since 4.0. All style properti

文章目录一、报错情况:二、原因:三、解决:一、报错情况:二、原因:从警告英文提示和网上搜了一下以及echarts官网配置项手册里一些字段没有了,已被弃用。三、解决:DEPRECATED:‘normal’hierarchyinitemStylehasbeenremovedsince4.0.itemStyle:{normal:{color:'#62B4FF'},},改为:itemStyle:{color:'#62B4FF'},DEPRECATED:‘textStyle’hierarchyinitemStylehasbeenremovedsince4.0.axisLabel:{show:true,t

echarts修改饼图,环形图的圆环宽度,大小

echarts修改环形图的圆环宽度,大小环形图圆环的大小需要通过series-pie.radius属性来修改radius饼图的半径。Array.:数组的第一项是内半径,第二项是外半径。每一项遵从上述numberstring的描述。把数组的第一项即内半径设为0,则图表为饼图,如下:内半径设为大于0的值,图表即显示成圆环图(Donutchart)。如下:当然如果修改了外半径的大小,比如小于100%,图表就会显得小很多,也就是窄很多,如下:所以,如果想修改柱状图的圆环宽度,可以通过修改内半径和外半径的大小来实现。option={legend:{orient:"vertical",left:"left

echarts修改饼图,环形图的圆环宽度,大小

echarts修改环形图的圆环宽度,大小环形图圆环的大小需要通过series-pie.radius属性来修改radius饼图的半径。Array.:数组的第一项是内半径,第二项是外半径。每一项遵从上述numberstring的描述。把数组的第一项即内半径设为0,则图表为饼图,如下:内半径设为大于0的值,图表即显示成圆环图(Donutchart)。如下:当然如果修改了外半径的大小,比如小于100%,图表就会显得小很多,也就是窄很多,如下:所以,如果想修改柱状图的圆环宽度,可以通过修改内半径和外半径的大小来实现。option={legend:{orient:"vertical",left:"left

echarts实现横向和纵向滚动条、dataZoom

文章目录前言1、横向滚动条2、纵向滚动条前言使用echarts会遇到这种情况,以柱状图为例子,当数据过多时,echarts图就会堆叠在一起,看起来十分难看。通常解决办法是通过减小barWidth值来缩小柱子宽度,但是若数据达到上百条,这场面是相当壮观。另一个很常用的就是在外部容器div添加overflow:scroll;,这确实能解决一些问题,但是若是数据量过少,就会显的非常稀疏,经历过的都懂。言归正传,以上都不是最佳解决方式,echarts其实已经为提供好相应的API配置了,无论是横向滚动还是纵向滚动,dataZoom都能满足。1、横向滚动条dataZoom:[{//设置滚动条的隐藏与显示s

Vue版本echarts 全国地图geo、geo3D

需求:大屏显示3D全国地图,点击地图上标记连接到指定页面,网上资源多数不是Vue版本的,实现的方式也是由html页面修改为Vue版本效果展示:    由于图片涉嫌违规,给大家一个自己脑补的空间~环境要求:使用npm安装echarts和eacharts-gl依赖代码:在mounted中执行letchart=null;//图表配置letoptions={};//地图贴图图片letbg='';//视图容器constchartEle=document.getElementById('map');document.getElementById('map').style.width="100%";docu

vue+echart实现3d地图可拖拽、缩放、区域填充颜色(geo3D)

功能背景一个略微比2d地图炫酷一些的3d地图,1、可对区域进行不同颜色填充。2、可拖拽缩放地图3、鼠标悬停高亮某区域。(注意:当开启了鼠标悬停series,并高亮某个数据的时候,会导致地图的拖拽缩放出现卡顿,因为相当于是事件重叠了。。。目前还没想到好的解决方案)这里是5.0以上版本的echarts实现的"echarts":"^5.4.1",效果图全景悬停高亮原理就是抬高了这个区域的高度,并且改变了颜色。拖拽、缩放

echarts 提示框tooltip被遮挡的解决办法

当echart的容器外部dom被设置为overflow:hidden时,提示框会被遮挡。解决办法:一、tooltip.confinetooltip:{confine:true //是否将tooltip框限制在图表的区域内。},这样可以限制提示框在图表的区域内。二、tooltip.appendToBodytooltip:{appendToBody:true},默认值是false。false表示,tooltip的DOM节点会被添加为本图表的DOMcontainer的一个子孙节点。但是这种方式导致,如果本图表的DOMcontainer的祖先节点有设置overflow:hidden,那么当toolti

Echarts使用中遇到图表只显示一部分的情况

        在引用完Echarts后,发现图只显示了一小部分,检查布局也没有任何问题,然后通过控制台检查,无论怎么去调它所在容器的宽高都没有任何的变化,调canves的宽高也只有拉伸的效果。         出现这种现象的原因是:Echarts的依赖是惰性的,需要手动设置resize,不然不会重新画 我们需要使用resize方法,来指定宽度和高度,实现图表大小不等于容器大小的效果。从而解决此问题。varmyChart2=echarts.init(document.getElementById("canves2"));myChart2.resize({width:350,height:200