Echarts
文章平均质量分 81
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
hufi
学无止境,执之以恒;
脚踏实地,仰望星空。
展开
-
Echarts数据可视化开发中的一些技巧和常见问题汇总
Y坐标文字过长被遮挡: 图表的自适应解决办法:设置grid配置项的left为任意数值后,图表会计算y轴宽度并自适应grid: {left: 0, // 与容器左侧的距离right: 0, // 与容器右侧的距离bottom: “3%”,top: “0”containLabel: true // grid 区域是否包含坐标轴的刻度标签}当X轴标签过长,展示不下时,我们会采用两种方法旋转角度,倾斜展示xAxis: {axisLabel: {color: “#5e6877”, //x原创 2021-02-07 12:47:15 · 2863 阅读 · 0 评论 -
解决 Echarts 图表在旧容器上重新渲染不出来的问题
今天修改项目时,由于使用了 Echarts 图表库,在原先的基础上,加上了切换tab标签和根据搜索内容重新渲染图表的需求,由于是异步获取数据后更新渲染图表,然后发现图表重新渲染不出来,由此记录下解决问题的过程。问题描述根据异步获取到的数据重新渲染图表,比如 Echarts 容器标签如下:<div id="chartId"></div>当搜索结果没有数据时,输出一段话提示用户:<div id="chartId"> <p>暂无数据</p&g.原创 2021-01-28 15:12:26 · 2333 阅读 · 2 评论 -
Vue中引入Echarts封装组件的两种方式(全局引入和按需引入)
平时在项目中实现数据可视化,可以使用百度的开源图表库echarts,根据项目需求来绘制生成各种类型的图表,那么在Vue中如何引入echarts并封装成组件调用呢?目录:1. 安装echarts2. 全局引入3. 按需引入4. 参考文档1. 安装echarts因为通过vue-echarts按需引入时,一些组件模块(如折线图、柱状图,提示框和标题组件等)需要依赖已经包含所有图表和组...原创 2020-04-11 11:57:12 · 10886 阅读 · 1 评论 -
VUE中使用ECharts实现中国地图产品出货量配置详解
1、使用特效散点图实现产品出货TOP5显示;2、实现自定义悬浮提示框;如下图所示:实现步骤一、在vue中安装echartsnpm install echarts二、在vue组件中使用echarts1、在组件中先引入echarts;import echarts from 'echarts' // 引入echarts中国地图数据2、在组件中引入中国地图数据;require...原创 2020-01-13 00:38:56 · 1375 阅读 · 0 评论 -
Echarts中使用水球类型liquidFill制作温度计
一个简单的温度计,见下图:1. 首先引入 ECharts通过标签方式直接引入构建好的 echarts 文件<!DOCTYPE html><html><head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.m...原创 2020-01-08 12:06:46 · 3292 阅读 · 2 评论 -
ECharts使用饼图(pie)类型生成圆环进度条
效果图1示例完整代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js...原创 2020-01-06 00:19:21 · 5388 阅读 · 0 评论 -
Echarts3单仪表盘和多仪表盘
一. 简介ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。二. 特性1. 丰富的可视化类型ECharts 提供了常规的折线图、柱状图、散点图、...原创 2020-01-05 17:28:01 · 6086 阅读 · 1 评论