Echarts基本用法_动力节点Java学院整理

2020-11-27 来源：尚佳旅游分享网

echarts太完美了：

1，开源软件，无私的为我们提供漂亮的图形界面；

2，使用简单，默默的为我们封装了重要的js，只要会引用就会使用echarts；

3，种类多，echarts为我们提供了各种图标，其中最具象征的就是地图了；

4，兼容性好，基于html5动画渲染超棒。

echarts官网提供了源码和说明文档，使用echarts需要先到官网下载需要的js源文件。

官网上的demo中夹杂着很多我们用不到的东西，想使用饼状图就得从demo中把不用的去掉，劈植斩叶留下最原始的功能实现。这样毕竟比较费时，我就在裁剪后的代码中加以总结于是乎新的使用教程如下所示：

echarts饼状图实现步骤：

1，在简单的html中引入js文件

<head> 
 <meta charset="utf-8"> 
 <title>Charts demo</title> 
 <script src="js/esl.js"></script> 
</head> 
<body> 
</body>

2，为图形准备容器

<head> 
 <meta charset="utf-8"> 
 <title>Charts demo</title> 
 <script src="js/esl.js"></script> 
</head> 
<body> 
 
 <div id="picturePlace"></div> 
 
</body>

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

3，模块导入js

<head> 
 <meta charset="utf-8"> 
 <title>Charts demo</title> 
 <script src="js/esl.js"></script> 
</head> 
<body> 
 <div id="picturePlace"></div> 
 <script type="text/javascript"> 
 // 路径配置 
 require.config({ 
 paths:{ 
 'echarts' : 'js/echarts', 
 'echarts/chart/pie' : 'js/echarts' 
 } 
 }); 
 </script> 
</body>

4，添加显示数据

<head> 
 <meta charset="utf-8"> 
 <title>Charts demo</title> 
 <script src="js/esl.js"></script> 
</head> 
<body> 
 <div id="picturePlace"></div> 
 <script type="text/javascript"> 
 // 路径配置 
 requireconfig({ 
 paths:{ 
 'echarts' : 'js/echarts', 
 'echarts/chart/pie' : 'js/echarts' 
 } 
 }); 
 
 // 使用 
 require( 
 [ 
 'echarts', 
 'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载 
 ], 
 function (ec) { 
 // 基于准备好的dom，初始化echarts图表 
 var myChart = ec.init(document.getElementById('picturePlace')); 
 
 option = { 
 title : { 
 text: '某站点用户访问来源', 
 subtext: '纯属虚构', 
 x:'center' 
 }, 
 tooltip : { 
 trigger: 'item', 
 formatter: "{a} {b} : {c} ({d}%)" 
 }, 
 legend: { 
 orient : 'vertical', 
 x : 'left', 
 data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] 
 }, 
 toolbox: { 
 show : true, 
 feature : { 
 mark : {show: true}, 
 dataView : {show: true, readOnly: false}, 
 restore : {show: true}, 
 saveAsImage : {show: true} 
 } 
 }, 
 calculable : true, 
 series : [ 
 { 
 name:'访问来源', 
 type:'pie', 
 radius : '55%', 
 center: ['50%', '60%'], 
 data:[ 
 {value:335, name:'直接访问'}, 
 {value:310, name:'邮件营销'}, 
 {value:234, name:'联盟广告'}, 
 {value:135, name:'视频广告'}, 
 {value:1548, name:'搜索引擎'} 
 ] 
 } 
 ] 
 }; 
 
 // 为echarts对象加载数据 
 myChart.setOption(option); 
 } 
 ); 
 </script> 
</body>

5，运行程序显示结果

以上是饼状图的实现步骤，柱状图散点图跟这个类似就是引用js时饼状图是pie，柱状图是bar，对应的option里面的数据不同，程序的架子是一样的。

显示全文

全部栏目

Echarts基本用法_动力节点Java学院整理