随笔分类 -  08-05. Echarts

echarts 使用过程中遇到的问题
摘要：tooltip（提示框） 相关 tooltip.formatter 的参数params不会更新？？？ 当 series 中数据的个数不确定（个数会发生改变）的情况下，tooltip.formatter 的参数 params 只会拿到个数最多的那一次， 原因：Chart.setOption(optio 阅读全文
posted @ 2021-04-08 18:14 真的想不出来 阅读(429) 评论(0) 推荐(0)
echarts 图形图例文字太长如何解决
摘要：文章来源： https://blog.csdn.net/csm17805987903/article/details/85111835 legend 文字很多的时候对文字做裁剪并且开启 tooltip legend: { formatter: function (name) { if (!name) 阅读全文
posted @ 2020-06-23 11:41 真的想不出来 阅读(2606) 评论(0) 推荐(0)
Echarts 设置 tooltip 样式
摘要：第一种：设置 tooltip.textStyle textStyle:{ align: 'left', fontSize: 12, color: 'red', // 更多属性请查看 Echarts 官网 } Echarts 官网 第二种：通过 formatter 函数 formatter: func 阅读全文
posted @ 2020-05-27 16:27 真的想不出来 阅读(3131) 评论(0) 推荐(0)
Echarts (option.yAxis) Y轴 的属性
摘要：``` yAxis: [ { show: true, // 是否显示 Y轴 type: 'value', //('value''category''time''log') name: '降雨量(mm)', // 坐标轴名称 nameLocation: 'end', // 坐标轴名称显示位置。('start''middle''center''end') //nameTextStyle: {...}, 阅读全文
posted @ 2020-03-24 17:37 真的想不出来 阅读(22946) 评论(0) 推荐(0)
Echarts 折线图y轴标签值太长时显示不全的解决办法 （Markdown使用示范文）
摘要：前言： 相信 Echarts 用的比较多的童鞋都会遇到，Y 轴的标签太长，以至于显示不下的情况。 我的尝试： 试过改容器的大小，也是过设置 option.grid.left ，总觉得不太好，因为 Y 轴的标签的长度是不确定的，一味的用 left 去推，页面的排版总是控制不好。 目前比较好的解决办法： 阅读全文
posted @ 2020-03-17 17:40 真的想不出来 阅读(3103) 评论(0) 推荐(0)
Echarts - 雷达图（用过的属性）
摘要：以下内容为其中一次写雷达图时用到的，当然很多都是基础属性，需要更全的属性，请访问 echarts 官网 注意：echarts 的样式即可设置在公共属性上，也可以在每一个 data 中单独设置 option = { title: { // 标题 text: "基础雷达图" }, tooltip: { 阅读全文
posted @ 2020-03-10 16:23 真的想不出来 阅读(3026) 评论(0) 推荐(0)
Echarts (option.legend) 图例的属性，外部控制图例的select状态，以达到模拟图例的效果
摘要：先列举一些常用的属性： legend： { //图例，这里基本都是默认设置，就不一一列举，echarts 官网很好找 type: "plain", //'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。 show: true, //是否显示（隐 阅读全文
posted @ 2020-02-26 18:12 真的想不出来 阅读(4377) 评论(0) 推荐(0)
Echarts 图例交互事件，及使用、添加loading 状态
摘要：Echarts 图例交互事件 图例交互事件： legendselectchanged : 切换图例选中状态后的事件 (注：图例组件用户切换图例开关会触发该事件,不管你有没有选择，点击了就触发) legendselected：例组件用legendSelect 图例选中后的事件，即点击显示该图例时，触发 阅读全文
posted @ 2020-02-26 14:21 真的想不出来 阅读(6546) 评论(0) 推荐(0)
Echarts 入门之基础使用（部份 API）
摘要：在 react 中使用折线图： 1.安装：npm i echarts 2.引入模块： **** 全部引入 **** import echarts from "echarts";// 或者import * as echarts from 'echarts'; **** 按需引入 **** // 引入 阅读全文
posted @ 2020-02-19 16:59 真的想不出来 阅读(580) 评论(0) 推荐(0)
markLine 标示线的使用
摘要：markLine 可以单独写在一个对象里，也可以接在其它数据下面，如果将 markLine 单独写在一个对象里，就必须加 type ，不然报错。 markLine 的 data 和其它 data 一样，也可以单独设置样式。 markLine 可以在 X 轴上，也可以在 Y 轴上 （竖向、横向）。 s 阅读全文
posted @ 2019-10-09 20:02 真的想不出来 阅读(9710) 评论(6) 推荐(2)
可视区尺寸改变的时候，重绘Echarts，以及echarts动态变化解决之前渲染残留问题。
摘要：当页面缩放，或者盒子尺寸改变的时候，我们会发现 Echart 的位置和大小就不再合适，这里提供两个解决办法： 办法1： 监听 window 的 resize 事件 componentDidMount() { this.chartDom = document.getElementById(this.p 阅读全文
posted @ 2019-09-17 09:51 真的想不出来 阅读(2402) 评论(0) 推荐(0)
Echarts 版本查看
摘要：查看版本： console.log(echarts.version); 安装、更新版本 pm install echarts --save 阅读全文
posted @ 2019-05-08 20:27 真的想不出来 阅读(5390) 评论(0) 推荐(1)