首先echarts是一个可以提供给用户体验效果更好的一个图形界面， Canvas 类库 ZRender。
1、下载echarts的js，可以在官方网址进行下载echarts.min.js
2、将下载下来的echarts.min.js放到新建一个js文件夹
3、创建一个html页面
项目文件摆放路径如图所示
4、进行编码
- 首先在html中引入echarts.min.js
- <script src="js/echarts.min.js"/>
2.设置一个存放饼形图的DOM，需要设置DOM的width，height，这样echarts就不需要设置了,需要echarts重新设置
- <div id="main" style="width : 1000px ; height : 400 px ;"/>
3.初始化echarts，创建echarts的实例
- var myecharts=echarts.init(document.getElementById("main"));
4.设置数据项和图标
1. var option={...}(见代码)
5.将数据项和图标显示到饼形图上
1. myecharts.setOption(option);
表现形式见下图，鼠标点击会出现效果
代码见下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>echars map</title> <!-- 引入echarts.js的js --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 创建一个DOM --> <div id="div" style="1000px;height:400px;"></div> <script type="text/javascript"> //获取DOM var myecharts=echarts.init(document.getElementById("div")); var option=({ title:{ text:'饼形图',//主标题文本，支持 换行 subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',//副文本 sublink : 'http://esa.un.org/wpp/Excel-Data/population.htm',//副文本链接 left:'center',//离容器左侧的距离 top:'top'//距离容器上测的距离 }, backgroundColor: '#2c343c',//背景颜色 textStyle: { color: 'rgba(255, 255, 255, 0.3)'//文字的颜色 }, series : [ { name: '访问来源', type: 'pie',//每个系列，通过type决定自己的系列型号 radius: '55%', data:[ {value:400, name:'搜索引擎'}, {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:274, name:'联盟广告'}, {value:235, name:'视频广告'} ], roseType: 'angle', itemStyle: {//图形样式 normal，emphasis emphasis: { shadowBlur: 200, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, label: {//饼形图上的文本标签 normal: { textStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, labelLine: {//标签的视觉引导线 normal: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } } } } ] }); myecharts.setOption(option); </script> <!-- 1.引入echarts.min.js 2.准备DOM 3.初始化echars实例 4.准备数据项 5.调用setOption方法将数据和图标显示在图表上 --> </body> </html>