echarts官网 提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件。
官网上的demo中夹杂着很多我们用不到的东西,想使用饼状图就得从demo中把不用的去掉,劈植斩叶留下最原始的功能实现。这样毕竟比较费时,我就在裁剪后的代码中加以总结于是乎新的使用教程如下所示:
echarts饼状图实现步骤:
1,在简单的html中引入js文件
[html] view plaincopyprint?
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
- </body>
2,为图形准备容器
[html] view plaincopyprint?
- <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
[html] view plaincopyprint?
- <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,添加显示数据
[html] view plaincopyprint?
- <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'
- }
- });
- // 使用
- require(
- [
- 'echarts',
- 'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
- ],
- function (ec) {
- // 基于准备好的dom,初始化echarts图表
- var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>));
- option = {
- title : {
- text: '某站点用户访问来源',
- subtext: '纯属虚构',
- x:'center'
- },
- tooltip : {
- trigger: 'item',
- formatter: "{a} <br/>{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里面的数据不同,程序的架子是一样的。。