echarts图表(可视化)的简单使用(推荐)
1. 新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的节点（Dom）。
<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts</title>
</head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div>
</body>
新建<script>标签引入模块化单文件echarts.js
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见引入ECharts2
<!DOCTYPE html><head><meta charset="utf-8"><title>ECharts</title></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">// 路径配置require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}});</script></body>
<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，option见API & Doc
<!DOCTYPE html><head><meta charset="utf-8"><title>ECharts</title></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">// 路径配置require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}});// 使用require(['echarts','echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载],function (ec) {// 基于准备好的dom，初始化echarts图表var myChart = ec.init(document.getElementById('main')); var option = {tooltip: {show: true},legend: {data:['销量']},xAxis : [{type : 'category',data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]}],yAxis : [{type : 'value'}],series : [{"name":"销量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 为echarts对象加载数据 myChart.setOption(option); });</script></body>
运行在浏览器即可看到效果!
echarts图表(可视化)的简单使用(推荐)相关推荐
- 转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
- Echarts图表可视化
开发工具与关键技术: MVC 撰写时间:2021/10/8 下面我们讲Echarts图表可视化是如何实现的: 首先我们需要到Echarts官方网站下载echarts.js文件: 在前端代码中引用ech ...
- echarts 图表案例社区
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 UI设计师设计的图表绚丽多彩,实现的我头大如斗 ,迷茫的我偶然发现了一个新大陆,一个echarts案例社区,图表类型是跟echa ...
- Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍 二.环境搭建 三.使 ...
- Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理 目录 Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理 一.简单介绍 二. ...
- Echarts数据可视化图表的简单配置
Echarts图表相关配置 先来看看一个例子的整体效果 下面是实现上方图示的相关配置 var option = {// 图表的标题title: {text: '一个简单的例子'},// 全局的颜色可以 ...
- 动态更改echarts 高度_EasyShu地图可视化新突破，ECharts图表完美集成
EasyShu作为一款领军级Excel图表插件,在地图可视化这一领域,必须有所建树,一直在思考如何有所突破. 在一般性的以形状填色为代表的地图可视化,存在一些难以避免的小缺点,交互性存在较大的缺陷,就 ...
- java——插件echarts数据可视化图表库
插件echarts数据可视化图表库 一.使用idea创建javaWeb工程 二.下载echarts导入js文件 三.使用echarts. 特别鸣谢:感谢林老师传授 嘿嘿嘿 -------- 创作不易, ...
- 数据分析可视化04 图表组件：Echarts数据可视化图表基础
本课时是课程的第二个模块,环境部署篇的第一个课时.在第一部分的基础理论篇,我向你介绍了数据可视化分析的概念定义.方法体系和关键技术.接下来,我会带你了解基于开源框架,如何部署数据可视化分析的开发环境, ...
最新文章
- Exchange 2007 安裝（-）
- C#类、接口、虚方法和抽象方法-抽象类与接口的区别与联系
- 陶晶驰stm32_陶晶驰串口屏学习日记（1）
- BaseAdapter的ArrayIndexOutOfBoundsException
- JavaScript通过变量设置对象键[重复]
- Java 笔记（二）
- webservice测试工具
- Xcode在 release 模式下断点调试
- 深度学习在时空大数据分析中的应用
- 离散求边缘密度_求一把能退烧的机械键盘？——机械键盘购买“指北”
- 「游戏建模」3DMAX节点材质编辑器详解
- Unity 之游戏特效
- 离散实验 判断集合之间是单射，满射还是双射
- Ceres库运行，模板内报内存冲突问题。（已解决）
- 【MineCraft】-- 学习我的世界Mod制作引雷附魔书与事件
- Docker 的数据持久化项目实战
- 关于chrome、edge浏览器f12开发者模式的application中无法添加参数的问题
- linux音频文件格式转换,在Ubuntu @ Linux 中音频和音乐文件的格式转换
- yarn安装依赖速度太慢的解决办法
- python计算长方体体积最简单代码_C语言编程简单的小程序，计算长方体体积！...