简单应用ECharts绘制可视化图表
来源:互联网 发布:阿里云 黑洞中 编辑:程序博客网 时间:2024/05/15 21:04
1.在ECharts官网,网址是:http://echarts.baidu.com/index.html,下载Echarts3.5.4的源码和示例文件。
2.解压缩下载下来的Echars压缩包,找到doc\example\www\js目录,将里面的js文件全部取出来,在web项目的WebRoot下新建JS目录,将之前的文件复制进去。
3.为ECharts准备一个具备大小的Dom。
<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px"></div>
4.在页面的顶端引入模块加载器echarts.js。
<!-- ECharts单文件引入 --> <script src="./js/echarts.js"></script>
5.为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径。
<script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: './js/js' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ],
6.动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
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); } );
7.效果图
8.注意事项
在实际项目中,ECharts图标的横坐标和纵坐标,均是在后台返回的数据中的得到的。在前端动态设置data数值时,data的类型必须是数组,EChars才能展现出图标的效果来。
9.附完整代码:
<!DOCTYPE html><head> <meta charset="utf-8"> <title>ECharts</title></head><body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts单文件引入 --> <script src="./js/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: './js/js' } }); // 使用 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>
0 0
- 简单应用ECharts绘制可视化图表
- 如何快速使用ECharts绘制可视化图表
- ECharts 绘制图表
- echarts 绘制动态图表
- Echarts 绘制简单的图表柱状图、折线图
- 怎样用ECharts绘制一个简单的柱形图表
- 数据可视化图表插件--Echarts
- Echarts图表简单使用
- 二次封装快捷实现Echarts可视化图表
- Echarts 数据可视化图表库 Overview
- echarts统计图表与工具关系可视化
- eCharts使用图表简单示例
- eCharts使用图表简单示例
- Echarts图表的简单实现
- 百度Echarts图表简单使用
- 使用echarts图表库绘制地图
- 【echarts】绘制带有点击事件的图表
- [Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区
- ElasticsearchCRUD使用(七)【Elasticsearch中的实时重建索引】
- 题解:循环小数(UVa 202)
- ubuntu安装搜狗输入法
- OC中instancetype与id的区别
- JavaScript多物体运动及函数封装
- 简单应用ECharts绘制可视化图表
- 如何用win32的函数调节设置Unity的窗口
- IPv4数据报的封装与解封装
- fedora 下python安装
- easyui js 必输项
- vb.net 教程 3-5 窗体编程 对话框1 OpenFileDialog & SaveFileDialog
- c++类型转化
- ADABOOSt
- 老生常谈-从输入url到页面展示到底发生了什么