当前位置: 首页 > news >正文

ECharts 实例2

之前做过一个 ECharts 例子;再做一个看一下;

<!DOCTYPE html>
<html>
<head><meta charset="gb2312"><title> 多bar 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body><div id="jinbars" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('jinbars'));var option = {legend: {},tooltip: {},dataset: {source: [['product', '2050', '2051', '2052'],['金条', 50, 60, 70],['金砖', 50, 99, 55],['金元宝', 60, 95, 40],['银条', 80, 123, 79]]},// 默认情况类目轴对应到 dataset 第一列xAxis: {type: 'category'},// Y 轴,数值轴yAxis: {},// 声明多个 bar ,默认自动对应到 dataset 的每一列;series: [{type: 'bar'},{type: 'bar'},{type: 'bar'}]};myChart.setOption(option);</script>
</body>
</html>

图表是包含在series里面;之前的例子 series 里面包含一个图表,此例子在series里包含三个图表;并且为了提供数据,使用了dataset属性;

显示如下;


tooltip属性提供了鼠标移上去的提示;

legend 是顶部的三个;可以选中一个、多个、全部;

 

如果全部不选就是空的;

 

前面提过type属性是图表类型,上面的是bar;

换一个类型,比如pictorialBar看一下;显示如下;看上去不是需要的;

 

多数的时候还是在series里只有一个图表; 

相关文章:

  • ssm租房小程序-计算机毕设 附源码42196
  • 国科大数据挖掘期末复习——聚类分析
  • ModuleNotFoundError: No module named ‘unstructured‘
  • 易航网址引导系统 v1.9 源码:去除弹窗功能的易航网址引导页管理系统
  • [NISACTF 2022]join-us
  • 15 Go的并发
  • 02-微服务的拆分规则和基于RestTemplate的远程调用
  • DAY60 84.柱状图中最大的矩形
  • U4_1:图论之DFS/BFS/TS/Scc
  • 【鸿蒙应用ArkTS开发系列】- 灌水区,鸿蒙ArkTs开发有问题可以在该帖中反馈
  • 【深入理解Typescript】—— 第一章:为什么要使用Typescript
  • Me-and-My-Girlfriend-1
  • visionOS空间计算实战开发教程Day 1:环境安装和编写第一个程序
  • 自动驾驶相关
  • 【JavaEE初阶】计算机是如何工作的
  • JS 中的深拷贝与浅拷贝
  • 时间复杂度分析经典问题——最大子序列和
  • ES学习笔记(10)--ES6中的函数和数组补漏
  • Fastjson的基本使用方法大全
  • gulp 教程
  • Java编程基础24——递归练习
  • Java-详解HashMap
  • Koa2 之文件上传下载
  • php ci框架整合银盛支付
  • Python代码面试必读 - Data Structures and Algorithms in Python
  • Redux 中间件分析
  • tab.js分享及浏览器兼容性问题汇总
  • TiDB 源码阅读系列文章(十)Chunk 和执行框架简介
  • Web设计流程优化:网页效果图设计新思路
  • 七牛云 DV OV EV SSL 证书上线,限时折扣低至 6.75 折!
  • 小程序button引导用户授权
  • # SpringBoot 如何让指定的Bean先加载
  • #include到底该写在哪
  • #LLM入门|Prompt#1.7_文本拓展_Expanding
  • #LLM入门|Prompt#1.8_聊天机器人_Chatbot
  • $(function(){})与(function($){....})(jQuery)的区别
  • (01)ORB-SLAM2源码无死角解析-(56) 闭环线程→计算Sim3:理论推导(1)求解s,t
  • (pytorch进阶之路)CLIP模型 实现图像多模态检索任务
  • (ZT) 理解系统底层的概念是多么重要(by趋势科技邹飞)
  • (草履虫都可以看懂的)PyQt子窗口向主窗口传递参数,主窗口接收子窗口信号、参数。
  • (精确度,召回率,真阳性,假阳性)ACC、敏感性、特异性等 ROC指标
  • (四)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (一)kafka实战——kafka源码编译启动
  • (原創) 如何刪除Windows Live Writer留在本機的文章? (Web) (Windows Live Writer)
  • (转)h264中avc和flv数据的解析
  • (转)树状数组
  • .[hudsonL@cock.li].mkp勒索加密数据库完美恢复---惜分飞
  • .gitignore文件忽略的内容不生效问题解决
  • .gitignore文件---让git自动忽略指定文件
  • .htaccess 强制https 单独排除某个目录
  • .net core IResultFilter 的 OnResultExecuted和OnResultExecuting的区别
  • .NET开发不可不知、不可不用的辅助类(三)(报表导出---终结版)
  • .NET开发不可不知、不可不用的辅助类(一)
  • .NET连接MongoDB数据库实例教程
  • .net网站发布-允许更新此预编译站点