echarts进阶一

最新推荐文章于 2024-03-25 10:15:00 发布
VIP文章 最新推荐文章于 2024-03-25 10:15:00 发布
阅读量558 收藏
点赞数
分类专栏： 前端 文章标签： Echarts 前端 html css javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37010686/article/details/86616267
版权

echarts进阶一

博主简介

毕业于武汉工商，有着两年开发经验，从事全栈工作，从系统需求设计，开发，测试，部署一整套开发体系，熟悉常用的关系型数据库，MySQL、Oracle、SqlServer等 ，也了解部分NoSQL，包括Redis、MongoDB等。实习的时候从事Java开发，熟悉基本的前端框架。现在转型学python，力求做一些自己的小产品，目前把自己学的经验积累给大家。
如果愿意跟着我一起学习可以加入
QQ群 534893126
个人QQ 365926403
如遇个人技术问题可联系我哦

1.echarts图表

昨天说了如何创建第一个图表，那么条形图肯定是不满足我们的业务需求，在业务系统中，我们遇到的问题是复杂的。可能是条形图，折线图，饼图，K线图等等。那么我们如何创建各种不同的图？

2.开始

那么本文就来带你学习如何创建各种不同类型的图表。学习的主要目的不是学会这一种东西而是学会一种学习的思维和方法。

  1. 打开Ecahrts官网
    打开Ecahrts官网找到实例，，找到你需要的图，我这里以饼图为例。
    echarts3.0官网
  2. 打开一个饼图例子
    我这里以自己的心情为准，随意打开了一个，各位同学们可以先按照我的步骤来，或者看自己心情也可以的。
    echarts3.0饼图的实例
  3. 找到昨天的demo
  4. copy饼图实例的左侧配置项的代码（从第三行开始copy哦)
  5. 替换原有的demo实例中的option变量
  6. 附上完整代码

<!DOCTYPE html>
<html>
<head>
   <title>echarts</title>
   <script type="text/javascript" src="../echarts.js"></script>
</head>
<body>
这是echarts的一个测试
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
   <div id="main" style="width: 600px;height:400px;"></div>
   <script type="text/javascript">
       // 基于准备好的dom，初始化echarts实例
最低0.47元/天 解锁文章
零域零
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts入门到精通
12-03
ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
pyecharts x轴字体大小调整_更高级的数据可视化，使用pyecharts制作精美图表
weixin_39788969的博客
11-22 1714
作者：刘早起早起来源：早起Python更高级的数据可视化，使用pyecharts制作精美图表提到用python进行数据可视化，那么大多数人选择都是matplotlib，但是生成的图表不能进行交互操作，比如时间轴拖动、交互式图例等，那么本文将对pyecharts进行详细讲解。前言目前pyecharts已经更新到1.x版本，而1.x版本与0.5.x版本在构图语法上有很大的不一样，1.x的版本...
Echarts 技术学习指南：从入门到精通
最新发布
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
03-25 2254
掌握 Echarts 技术不仅要求扎实的基础知识，更需要结合实际应用场景深入探索和实践。希望这份指南能为您的 Echarts 学习之旅提供清晰的方向和实用的指导，祝您早日成为 Echarts 高手！
ECharts常用图表 饼图
黑马程序员官方博客
12-08 6419
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可。另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~，表示外半径为可视区尺寸（容器高宽中较小一项）的 20%南丁格尔图指的是每一个扇形的半径随着数据的大小而不同。饼图可以很好地帮助用户快速了解不同分类的数据的。选 'single'：数组的第一项是内半径，第二项是外半径。下一篇：ECharts。组成的字典所形成的数组。，分别表示单选还是多选。可以将饼图设置为圆环图。是一个空空如也的对象。：直接指定外半径值。
【高级课程笔记】—— Echarts高级应用（二）
柳柳66的博客
10-20 1452
一、视觉映射 注：visualMap 以前叫dataRange，如果你看到了比较老的教程或博客，里面有dataRange，要知道那就是视觉映射 visualMap <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>视觉映射&...
1.Echarts饼状图详解及示例
热门推荐
笨小孩
12-19 6万+
1、基本饼状图示例 2、内嵌图示例及绑定点击事件 3、未能实现的饼状图形
echarts学习 高级使用
lin_fightin的博客
06-08 756
1显示相关 2 动画的使用 3交互api 显示相关
Echarts饼图的使用
weixin_43837268的博客
12-05 448
1.【template】 &lt;div class="chart" id="hp-chartOne" :style="{width: '100px', height: '100px'}"&gt;&lt;/div&gt; 2.【methods】 let chartThree = echarts.init($('#hp-chartThree')[0]); chartThree.setOp...
Echarts数据可视化 第11章 Echarts高级功能 11.4 事件与行为
谢谢你们的关注
03-19 145
Echarts数据可视化 第11章 Echarts高级功能 11.4 事件与行为
echart进阶
weixin_42371812的博客
06-28 375
这几天的工作都是跟echart打交道。可以说对echart有一些简单的基本认识了。不多说，来点干货吧。
sampling降采样策略.zip
10-12
Echarts高级进阶教程(1)：异步加载大量数据导致dataZoom组件拖动缩放时间轴卡顿的sampling降采样策略解决方案
ASP.NET绑定sql数据库采用echarts显示数据图表
04-23
ASP.NET绑定sql数据库采用echarts显示数据图表，已封装成类文件
Echarts+Asp.Net+Sql Server报表开发视频教程
06-15
本套教程采用vs2012+sql2012开发，以销售明细表为例，讲解了常见报表的开发过程，既包含了传统的表格形式的报表、又包含了柱状图（条形图）、饼状图、环形图、南丁格尔图、曲线图、折线图、面积图等，前端使用ajax请求数据，后端使用.net操作数据库并做http响应,返回json格式数据，前端解析json数据并完成数据渲染。共28集 时长：3小时50分。
echarts实现多维坐标轴
09-17
在开发过程中可能会遇到把数据显示在同一个坐标轴中，但是x，y轴的数据单位不一样
linux配置详解 linux配置详解
09-23
如果不值十分，我立刻删除此分享；包含各种linux下服务器的相关配置以及linux的常用命令等！还有中兴华为等linux面试题！等等。。。
Echarts从入门到上手实战视频教程 70课(完整)
11-03
ECharts，一个使用 JavaScript 实现的开源可视化库。上手简单、实用，是你在工作可视化的利器，值得学习
基于Flask+Echarts开发可视化大屏数据展示项目.zip
02-17
适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究...
Java后端以及web前端及echarts框架
12-11
词云分析进阶版
基于Echarts实现的数据中心超大屏幕监控.zip
01-25
适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究...
echarts数据可视化实验报告
05-26
好的，我可以为你提供一份 ECharts 数据可视化实验报告的模板，你可以根据你的实验内容进行修改和完善。 # 实验报告：ECharts 数据可视化实验 ## 1. 实验目的 本实验旨在探究 ECharts 数据可视化工具的使用方法，以及如何使用 ECharts 制作各种类型的图表。 ## 2. 实验环境 - ECharts 4.9.0 版本 - HTML、CSS、JavaScript ## 3. 实验内容 本次实验分为两个部分： ### 3.1 ECharts 基础 在本部分，我们将学习如何使用 ECharts 基础功能，如如何引入 ECharts、如何创建图表等。 #### 3.1.1 引入 ECharts 首先，我们需要在 HTML 文件中引入 ECharts 的 JavaScript 文件，代码如下： ```html <!-- 引入 ECharts --> <script src="echarts.min.js"></script> ``` #### 3.1.2 创建图表 在引入 ECharts 后，我们就可以在页面中创建图表了。以下是一个简单的示例代码： ```html <!-- 在 HTML 中创建一个容器 --> <div id="chart-container" style="width: 600px; height: 400px;"></div> <!-- 在 JavaScript 中创建图表 --> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart-container')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例', }, tooltip: {}, legend: { data: ['销量'], }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20], }, ], }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> ``` #### 3.1.3 图表类型 ECharts 支持多种类型的图表，包括折线图、柱状图、饼图、散点图等。我们可以通过修改 option 对象中的 type 属性来设置图表类型，例如： ```javascript // 折线图 { type: 'line', // ... } // 柱状图 { type: 'bar', // ... } // 饼图 { type: 'pie', // ... } // 散点图 { type: 'scatter', // ... } ``` ### 3.2 ECharts 进阶 在本部分，我们将学习如何使用 ECharts 进阶功能，如如何自定义图表样式、如何使用数据驱动等。 #### 3.2.1 自定义样式 除了修改图表类型外，我们还可以通过修改 option 对象中的其他属性来自定义图表样式，例如修改背景色、字体大小、图例位置等。 以下示例代码演示了如何修改背景色和字体大小： ```javascript var option = { backgroundColor: '#f7f7f7', // 修改背景色 textStyle: { fontSize: 16, // 修改字体大小 }, // ... }; ``` #### 3.2.2 数据驱动 ECharts 支持通过 JavaScript 动态生成图表，这意味着我们可以通过 AJAX 请求等方式获取数据，然后动态生成图表。 以下示例代码演示了如何使用 AJAX 请求获取数据，并动态生成柱状图： ```javascript // 发送 AJAX 请求获取数据 $.get('data.json', function (data) { // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('chart-container')); // 动态生成图表 myChart.setOption({ xAxis: { data: data.categories, }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: data.series, }, ], }); }); ``` ## 4. 实验结论 通过本次实验，我们学习了 ECharts 数据可视化工具的基础和进阶用法，掌握了如何创建各种类型的图表，以及如何自定义样式和使用数据驱动。这些技能可以帮助我们更好地展示和分析数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值