echarts的使用

Echarts介绍

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

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

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

4， ECharts兼容性，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）

5，ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

Echarts使用

1、首先去官网下载需要的js文件，在html中引入js文件

2、为图形准备容器

就是在html中添加一个div给定id，指定宽度高度，图就会显示在div中

3、基于准备好的容器，初始化echarts图表

var myChart = echarts.init(document.getElementById('main'));

4、添加显示的数据

option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series: [ { name:'访问来源', type:'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] };

5、把要显示的option添加到echarts对象

myChart.setOption(option);

运行显示结果如下：

Echarts 基本属性

各种图的基本属性可以去http://blog.csdn.net/she_lover/article/details/51448967博客上看到