大家好，我是利兄~vivo前两天开了一个手表的新品发布会，我在直播平台看了一下。当然我关注的不是手表，主要是PPT设计。发现他们的PPT做的是相当不错，尤其是动画效果，值得点赞。我给大家截了几个动图，大家感受一下。手绘的开场动画时针的转动动画 文字的手写动画 瀑布流动画 内部结构拆解动画 当然还有下面这些动画的组合
最近需求中用到折线图，单线条，多线交错，之前是散点图，用的是另一个 amcharts.js，这个文档也能找的到，回归早本次重点：ECharts一、首先引入echarts.common.min.js文件，当然开发状态下使用echarts.js可以更便于调试，传送门二、为图表准备一个dom容器，宽高可以自行定义，<body>
<!-- 为 ECharts 准备一个具
转载
2024-04-29 10:45:57
2277阅读
折线图参考echarts示例：http://www.echartsjs.com/examples/editor.html?c=line-smooth折线图github地址：https://github.com/dkr380205984/myComponent/blob/master/src/page/d3/line.vued3制作折线图的难点在于如何实现折线图的动画效果由于折线是由path标签绘制
转载
2024-07-13 10:14:12
82阅读
注：本系列教程需要对应 JavaScript 、html、css 基础，否则将会导致阅读时困难，本教程将会从 ECharts 的官方示例出发，详解每一个示例实现，从中学习 ECharts 。ECharts 官方示例：https://echarts.apache.org/examples/zh/index.html《手把手教你 ECharts 数据可视化详解》 目录一、基础折线图详解一、平滑的折线图
转载
2024-08-27 10:03:10
281阅读
1.实现效果2.实现原理echarts官网：series-lines注意：流动特效只支持非平滑曲线（smooth：false）series-lines路径图： 用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。 ECharts 2.x 里会用地图上的 markLine 去绘制迁徙效果，在 ECharts 3 里建议使用单独的 lines 类型图表。一些参数：series-l
转载
2024-06-24 09:51:16
395阅读
详细信息标题//标题组件，包含主标题和副标题。lettitle={id:'',//组件ID。默认不指定。指定则可用于在option或者API中引用组件show:true,//是否显示标题组件text:'',//主标题文本，支持使用\n换行。link:'',//主标题文本超链接target:'',//指定窗口打开主标题超链接。'self'当前窗口打开'blank'新窗口打开textStyle:{co
原创
2020-09-29 14:31:11
1392阅读
ECharts折线图tooltip提示框格式自定义来自 给tooltip的数值改造自己需要的数据格式。例如，加上%，数字千位分隔符 tooltip: {
formatter: function (params, ticket, callback) {
var result=""
params.forEach(function (item) {
// 这个是tool
转载
2023-07-25 09:49:58
1981阅读
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts Line Chart</title>
</head>
<body
原创
2015-10-21 11:36:00
1429阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ECharts-基本线性图及其配置要求</title> <script src="js/esl.js" type="text/javascript"></s
转载
2017-05-13 11:09:00
360阅读
2评论
五分钟上手：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>五分钟上手之折线图</title> <!-- 引入 echarts.js --> <...
原创
2021-07-28 15:34:06
310阅读
点赞
x轴可以滚动的折线图
原创
2022-05-31 18:24:15
57阅读
项目场景：使用第三方插件建立一个无限级目录的折线树图。一、ECharts是什么？ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。二、为什么使用ECha
转载
2024-05-15 11:28:19
144阅读
文章目录前言柱状图和折线图主要配置项：饼图的基本配置项series 数据项有什么功能组件？渐进式案例：vue中画一个基本的饼图为它添加提示组件tooltipdataZom，用柱状图演示添加visualMap添加图示legend添加个标题（最终版）总结 前言 本文将渐进式的介绍一下echarts的常用图标及一些组件。关于echarts的学习方式，本人推荐先echarts了解有哪些组件和功能，对应的
转载
2024-05-16 13:36:18
85阅读
因为每次使用配置太麻烦，所以记录一下，下次如有相同图，就可以拿过来用，哈哈1、line折线图效果图setPieCharts (id, name, xName, yName, x, y, data) {
let $echartsDOM = document.getElementById(id)
let myEcharts = echarts.init($echartsDOM
转载
2024-10-14 11:09:27
311阅读
option = {
backgroundColor: '#fff', // 背景颜色
title: { //标题
text: '折线图示例', //主
subtext: '', // 副
textStyle: { //标题样式
color: '#00F6FF',
fon
转载
2024-06-19 05:16:55
517阅读
Echarts 常用各类图表模板配置 注意： 这里主要就是基于各类图表，更多的使用 Echarts 的各类配置项；以下代码都可以复制到 Echarts 官网，直接预览； 图标模板目录Echarts 常用各类图表模板配置一、简洁折线图二、环形图三、k 线图四、折线图五、横向柱状图六、折线图 + 柱状图七、3D 柱状图八、工程项目可视化九、雷达图十、象形柱图十一、环形占比图十二、圆环动画 一、简洁折线
1、下载插件 npm i
echarts 2、components/ColorLine.vue <template> <div class="color-line" :id="id"></div> </template> <script> const
echarts = require('echar
原创
2022-01-13 17:39:31
275阅读
Echarts 折线图是图表中最常用的显示形式之一。使用 Echarts 做出基本的折线图很简单，但要是想把多组数据放在一张图表中，展示的漂亮又直观就不容易了。本文将带领大家从最基本的折线图，一步步完善，最终做出可读性很高的可视化图表。跟随本教程你将学到1.折线外观属性折线增加弧线平滑过渡折线图变为散状圆点实线改为虚线折线指定颜色增加数据显示表格外观属性鼠标滑过时，显示数据提示框鼠标滑过时，显示十
Echarts 图标样式个性化设置，如 x 轴间距，y 轴样式，图例自定义，提示框自定义，数据列悬浮高亮，坐标指示器背景渐变色等等，解决折磨人的细节样式问题。基础配置title 标题组件let title = {
text: "累计消费趋势", // 标题
subtext: "同比上年同期，累计消费增加200元", // 副标题
top: -5, // 定位
left: -5, /
转载
2024-01-08 13:46:16
264阅读
1、去掉刻度线放在X轴 与 Y轴 的属性配置里面axisTick: { show: false}
原创
2023-02-24 11:35:30
1279阅读
