![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
echarts
lbchenxy
与简书前端小菜同一作者
展开
-
vue+echarts封装组件
本人可能写的 不好,如有缺点希望指出,一起进步,所有组件类似写法。/** 圆环图形 */<template> <div class="annulusContainer" ref="annulusContainer" :optionsData="optionsData" :grid="grid" ></div></template><script>import { defineComponent原创 2021-12-10 17:30:00 · 836 阅读 · 0 评论 -
vue3+echarts绘制横向柱形进度图
样式入上图,这个真是费劲啊(可能由于本人较菜),图片已经转成svg,如果有本地的图片可按照注释方式去引入option = { // backgroundColor: 'transparent', grid: { left: '0%', top: '0%', right: '85', bottom: '0%', containLabel: true }, xAxis: [ { show: false } ], yA.原创 2021-12-10 17:30:00 · 11831 阅读 · 0 评论 -
vue3+echarts 绘制扇形进度图
实现样式为:是不是还可以。反正我自己认为so beautiful(沾沾自喜)这个实现起来就有点费劲了。代码option = { series: [ { name: 'Indicator', type: 'gauge', startAngle: 200,//扇形开始的角度 endAngle: -20,//扇形结束的角度 detail: { formatter: '{a|{value}}{b|%}',原创 2021-12-09 17:30:00 · 933 阅读 · 0 评论 -
vue3+echarts 绘制3d圆柱形图
今天得到了这样一个需求,用echarts绘制一个圆柱形图,如下图经过度娘指导发现了一遍类似博客剩下的就不难了,按照这个思路去修改实现就可以了,废话少说上代码option = { grid: { left: '0', top: '15', right: '0', bottom: '10', containLabel: true }, animation: false, xAxis: { data: ['服务数', '运行Pod数', '运原创 2021-12-08 16:25:33 · 4919 阅读 · 1 评论 -
vue3+echarts 多点发射
本文章借鉴改文章,传送车。本文章只为了记录。勿喷,感谢。文章成功展示首先我们需要引入echarts,现在echarts应该已经到5了,我们开发的时候建议看v5的版本npm install echarts --save 或者cnpm install echarts --save现在echarts不给提供地图了,所以需要我们自己去寻找地图json。穿梭车里边包含2个json,一个是去掉了南海诸岛,一个是保留的,加上上边的代码可以完整实现。(但是如果你想去掉南海诸岛,还需要在代码中加入)穿梭车r转载 2021-05-24 15:26:23 · 588 阅读 · 1 评论 -
vue3+echarts地图自定义图片
最近搞echarts搞的要起飞了。上边文章已经说了基本地图的功能实现,下边开始自定义图片,样式如下我们需要对已经存在的资源池进行地区的显示。百度了之后发现代码都没实现成功,应该是我的写法,或者我没抄对吧。还是看看文档自己思考吧。官网介绍传送门完整代码需要给myMap增加固定的高和宽<div id="myMap" ref="myMap" class="border"></div><script>import { defineComponent, r原创 2021-05-20 10:09:06 · 1133 阅读 · 0 评论 -
vue3.0+echarts去掉地图鼠标移出地图变色问题
问题复现由于有的不需要这部分内容。解决办法js绘制之后添加方法去掉这个事件。//鼠标移入地图不变黄色 chart.value.on("mouseover", function() { chart.value.dispatchAction({ type: "downplay", }); });如果代码不理解可以查看本博客传送车,页面拖到最底下。...原创 2021-05-19 14:41:02 · 1074 阅读 · 0 评论 -
vue3+echarts绘制中国地图
最近接到一个需求是做一个中国地图 样式大概是这样的这里我们能看到明显的去除了南海群岛。百度查阅相关资料都是说要这样,这个方法的大概意思就是:在地图中对特定的区域配置样式。穿梭车regions: [ { name: "南海诸岛", value: 0, itemStyle: { normal: { opacity: 0, l原创 2021-05-19 14:33:55 · 5886 阅读 · 5 评论