echarts.js使用方法

1.首先下载echarts工具包，可以在官网下载，图中为下载后的echarts工具包的目录结构

2.测试echarts，新建文件夹test，将echarts-2.2.2\doc\example\www\下的js拷贝到test下，并新建test.html文件，如图

3编辑test.html文件。首先导入echarts文件，因为我们只是测试柱状图所以只需要引入esl.js和echarts.js文件即可，如图

4.
// 路径配置

var date=[{'name':'zhangsan',value:100},{'name':'zhangsan',value:200}]

require.config({

paths: {

echarts: 'http://echarts.baidu.com/build/dist'

}

});

// 使用

require(

[

'echarts',

'echarts/chart/pie',// 使用柱状图就加载bar模块，按需加载

'echarts/chart/funnel'

],

function (ec) {

// 基于准备好的dom，初始化echarts图表

var myChart = ec.init(document.getElementById('payaccunts'));

option = {

title : {

text: '账户金额',

/* subtext: '纯属虚构',*/

x:'center'

},

tooltip : {

trigger: 'item',

formatter: "{a} <br/>{b} : {c} ({d}%)"

},

legend: {

orient : 'vertical',

x : 'left',

data:arr

},

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {

show: true,

type: ['pie', 'funnel'],

option: {

funnel: {

x: '25%',

width: '50%',

funnelAlign: 'left',

/* max: 1548*/

}

}

},

restore : {show: true},

saveAsImage : {show: true}

}

},

calculable : true,

series : [

{

name:'访问来源',

type:'pie',

radius : '55%',

center: ['50%', '60%'],

data:date

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);