ECharts 简单的使用过程，完美的图形展示

最近开发项目时要做图形报表，网上找了些东西，还是觉得ECharts靠谱，具备诸多优点，功能强大，图表完美，兼容性也比较好，基于html5动画渲染。

官网的demo中是写得比较全了，但很多用不到的东西直接影响了代码质量，下面我就饼图为例给描述一下echarts的基本使用过程，部分代码是我从demo中裁剪之后的代码

echarts饼状图实现步骤：

1，在简单的html中引入js文件，该js文件可以去官网下载

  1. <head>
  2. <meta charset="utf-8">
  3. <title>Charts demo</title>
  4. <script src="js/esl.js"></script>
  5. </head>
  6. <body>
  7. </body>

2，为图形准备容器

  1. <head>
  2. <meta charset="utf-8">
  3. <title>Charts demo</title>
  4. <script src="js/esl.js"></script>
  5. </head>
  6. <body>
  7. <div id="picturePlace"></div>
  8. </body>

这也就是在html中添加一个div给定id，图表就会显示在该div中。

3，模块导入js，这点比较关键，它直接决定了出什么图形

  1. <head>
  2. <meta charset="utf-8">
  3. <title>Charts demo</title>
  4. <script src="js/esl.js"></script>
  5. </head>
  6. <body>
  7. <div id="picturePlace"></div>
  8. <script type="text/javascript">
  9. // 路径配置
  10. require.config({
  11. paths:{
  12. ‘echarts‘ : ‘js/echarts‘,
  13. ‘echarts/chart/pie‘ : ‘js/echarts‘
  14. }
  15. });
  16. </script>
  17. </body>

4，添加显示数据

  1. <head>
  2. <meta charset="utf-8">
  3. <title>Charts demo</title>
  4. <script src="js/esl.js"></script>
  5. </head>
  6. <body>
  7. <div id="picturePlace"></div>
  8. <script type="text/javascript">
  9. // 路径配置
  10. require.config({
  11. paths:{
  12. ‘echarts‘ : ‘js/echarts‘,
  13. ‘echarts/chart/pie‘ : ‘js/echarts‘
  14. }
  15. });
  16. // 使用
  17. require(
  18. [
  19. ‘echarts‘,
  20. ‘echarts/chart/pie‘ // 使用柱状图就加载bar模块，按需加载
  21. ],
  22. function (ec) {
  23. // 基于准备好的dom，初始化echarts图表
  24. var myChart = ec.init(document.getElementById(‘<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">‘</span>));
  25. option = {
  26. title : {
  27. text: ‘某站点用户访问来源‘,
  28. subtext: ‘纯属虚构‘,
  29. x:‘center‘
  30. },
  31. tooltip : {
  32. trigger: ‘item‘,
  33. formatter: "{a} <br/>{b} : {c} ({d}%)"
  34. },
  35. legend: {
  36. orient : ‘vertical‘,
  37. x : ‘left‘,
  38. data:[‘直接访问‘,‘邮件营销‘,‘联盟广告‘,‘视频广告‘,‘搜索引擎‘]
  39. },
  40. toolbox: {
  41. show : true,
  42. feature : {
  43. mark : {show: true},
  44. dataView : {show: true, readOnly: false},
  45. restore : {show: true},
  46. saveAsImage : {show: true}
  47. }
  48. },
  49. calculable : true,
  50. series : [
  51. {
  52. name:‘访问来源‘,
  53. type:‘pie‘,
  54. radius : ‘55%‘,
  55. center: [‘50%‘, ‘60%‘],
  56. data:[
  57. {value:335, name:‘直接访问‘},
  58. {value:310, name:‘邮件营销‘},
  59. {value:234, name:‘联盟广告‘},
  60. {value:135, name:‘视频广告‘},
  61. {value:1548, name:‘搜索引擎‘}
  62. ]
  63. }
  64. ]
  65. };
  66. // 为echarts对象加载数据
  67. myChart.setOption(option);
  68. }
  69. );
  70. </script>
  71. </body>

5，运行程序显示结果

以上是饼状图的实现步骤，其他图形可以以此案例去官网参考即可，其中的option尤为关键。。。

时间： 2024-10-16 12:25:41

ECharts 简单的使用过程，完美的图形展示的相关文章

java运用echart进行图形展示

前段时间项目中要做一个根据数据生成折线图的功能,并5分钟刷新一次,进行数据更新.由于之前是用echarts来进行中国地图展现的,所有这次也用echarts进行图形展示. 项目目录如下图所示: 1.pom.xml文件 1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocatio

check_mk自定义监控增加性能数据图形展示

在nagios中可以实现性能图形展示,利用的是PNP4Nagios,check_mk当然也可以,而且很简单. 这篇文章在前一篇文章<check_mk自定义监控实践之powershell>的基础之前,脚本稍作修改 1.客户端process_top5.ps1 $dp = (Get-Process) | select -First 5 $ops = Get-WmiObject -Class Win32_OperatingSystem echo `<`<`<process_top5`

zabbix自动发现使用中端口并图形展示各个端口连接数

zabbix自动发现当前服务器使用中的端口并图形展示各个端口连接数 1.修改配置文件 vi /data/server/zabbix_agent/conf/zabbix_agentd.conf UserParameter=tcp.port.discovery,/data/server/zabbix/bin/discover_tcp_port_count tcp_port_discovery UserParameter=tcp.port.count[*],/data/server/zabbix/bi

Echarts简单应用

在对比了HighCharts之后,因为版权问题,还是决定在项目中采用Echarts来做图表展示. Echarts更新速度很快,已经更新到Echarts3了,感觉3的表现更炫.更酷,据说性能更好,但考虑到项目的整体风格,还是采用Echarts2的版本.  在项目正式开始之前,做个一个简单的Demo,结合EasyUI的Grid呈现一个柱状图,后期再考虑对Echarts的js进行二次封装. Echarts的使用跟HighCharts很类似,之前基于HighCharts做了一个Demo之后,熟悉了这类框

echarts简单使用

最近在做一个项目,开始使用的是acharts,在电脑端访问的效果还真不错,但是放到手机端访问就惨了,尤其是iOS系统上,各种不兼容,后来准备换收费的hightcharsts,无意间发现有个免费的echarts,后来研究了一下,效果还可以,可是用使用.手机端访问也没问题.下面是一些简单的设置参数,仅供参考:在http://echarts.baidu.com/doc/example/pie1.html上可以直接执行. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

ECharts简单运行例子

echarts一个简单运行的小例子,可以直接运行: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="http://echarts.baidu.com

echarts简单使用案例

先上效果图: 1.引入js <script src="<%=request.getContextPath() %>/js/echarts/build/dist/echarts.js"></script> 网盘下载: https://yunpan.cn/cMCdXqfIJWRLq  访问密码 4880 2.echarts 前台显示需要一个div容器,并设置高度. 3.配置echarts的路径,和所需模块(可以只加载你需要的) 4.根据数据,显示成不同的

使用echarts简单制作中国地图

网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字,添加hover事件,将对应图片显示. 第二种方法: 使用图形插件echarts,轻松制作. http://echarts.baidu.com/doc/example.html在echarts网站上下载文件包 echarts使用方法查看页面 http://echarts.baidu.com/doc/d

React＋Echarts简单的封装套路

今天我们来介绍一下React中,对Echarts的一个简单的封装. 首先在我们的React项目中,想使用Echart包,首先需要先安装它,安装代码如下,任选一个就可以 cnpm install echarts --save npm install echarts --save yarn add echarts --save 安装好之后,新建一个JS文件,命名test.js,首先导入的是各种依赖(总代码在文章结尾) import React from 'react'; import echarts