随笔分类 -  echarts

EchartsLabel显示的细节处理
摘要：0. 缘起 照理来说，春节过后的我现在应该还在快乐地摸鱼划水，但小测试猛地发来测试文档和示例，我对了一波之后对其中有个Echarts的label显示超过20截断有了些许冷汗泠泠的感觉。遂看了一波原本的代码，感慨下开山祖师爷细节处理的到位。 1. 柱状图数值显示的大致情况 xAxis 竖向 对于按照高 阅读全文
posted @ 2023-01-30 17:17 乐盘游 阅读(622) 评论(0) 推荐(0)
打造一个自定义的echarts组件
摘要：打造一个自定义的echarts组件做echarts图，数据是最重要的，主要依靠数据生成图与变化。所以抽象一个自定义的echarts组件是很有必要的。 阅读全文
posted @ 2021-11-17 16:45 乐盘游 阅读(98) 评论(0) 推荐(0)
echarts水球图小数点不显示问题+组件默认值
摘要：1.水球图数据小数点显示问题 想来个小数点后两位，结果发现直接传进LiquidFill的data里面渲染出来的就是整数 问题如图 解决方法 参考博客园其他小伙伴 echarts-liquidfill 水球显示小数点 - 文静~ - 博客园 (cnblogs.com) label: { formatt 阅读全文
posted @ 2021-09-06 16:33 乐盘游 阅读(1058) 评论(0) 推荐(0)
双柱表格组件
摘要：先上代码 入口twoColChartEntry.vue <template> <div> <zd-two-col-chart :maxArr="maxArr" :testArr="testArr" :nameArr="nameArr" :sizeArr="sizeArr" :settingArr=" 阅读全文
posted @ 2021-09-02 17:45 乐盘游 阅读(61) 评论(0) 推荐(0)
表格生成后修改echarts图表样式
摘要：代码 this.myChart.setOption(option); console.log("Before Chart Option", this.myChart.getOption().textStyle); let optionTest = { textStyle: { color: "red 阅读全文
posted @ 2021-09-02 16:06 乐盘游 阅读(146) 评论(0) 推荐(0)
地图下钻+标记点
摘要：首先老规矩，上代码 drawMap() { if ( this.myChart != null && this.myChart != "" && this.myChart != undefined ) { this.myChart.dispose(); } this.$nextTick(() => 阅读全文
posted @ 2021-08-26 10:52 乐盘游 阅读(297) 评论(0) 推荐(0)
绘制地图的多种方式
摘要：1.自由绘制地图网站——geojson.io 这张图是使用删除的时候选中的对象，可以一次删除多个，删除线条的时候要注意指针变成这个样子才是选中。 压缩geoJson的网站——mapshaper 本文所用的geoJson如下 // drawMap.geoJson { "type": "FeatureC 阅读全文
posted @ 2021-08-25 14:22 乐盘游 阅读(890) 评论(0) 推荐(0)
以厦门市为例做地区悬浮上浮效果
摘要：echarts用地图还挺复杂的， 先展示下成果，Make A Pie - 以厦门市为例做地区悬浮事件上浮效果 参考了这个老铁的作品，Make A Pie - echarts地图渲染（厦门市） 结合Echarts官网关于shadowBlur和它的小伙伴的介绍，Documentation - Apach 阅读全文
posted @ 2021-08-24 17:46 乐盘游 阅读(154) 评论(0) 推荐(0)
Echarts之内嵌圆环图v5.1.2
摘要：相比v4，v5有些许变动。我也没看官方文档，就对着浏览器开发者工具报错的地方一个一个调的，又综合了别人的经验，代码如下 放在drawPieAll function下 drawPieAll() { // myChart paint more times, it will warn if ( this. 阅读全文
posted @ 2021-08-04 17:50 乐盘游 阅读(478) 评论(0) 推荐(0)
echarts出现警告[echarts Can't get dom width or height]解决方法就是初始化后再填数据，放nextTick中
摘要：先上修改好的代码 drawPieAll() { // myChart paint more times, it will warn if ( this.myChart != null && this.myChart != "" && this.myChart != undefined ) { thi 阅读全文
posted @ 2021-08-03 13:43 乐盘游 阅读(873) 评论(0) 推荐(0)
echarts 堆叠柱状图 项目中的使用
摘要：效果如图 堆叠柱状图的使用官方有，注意点两个 1横轴排列 2如何堆积起来 A1因为有的时候周末不用打卡，横坐标就不需要1-31都有，挑有人打卡的天数汇聚成数组checkDate，当成横坐标 另，如果需要排序，还需要在获得三组数据[checkDate/checkSuc/checkFail]之后再进行一 阅读全文
posted @ 2021-08-02 18:25 乐盘游 阅读(561) 评论(0) 推荐(0)