您的位置：首页 > 其它

ECharts 简单的使用过程，完美的图形展示

2015-08-07 17:31 399 查看
最近开发项目时要做图形报表，网上找了些东西，还是觉得ECharts靠谱，具备诸多优点，功能强大，图表完美，兼容性也比较好，基于html5动画渲染。

官网的demo中是写得比较全了，但很多用不到的东西直接影响了代码质量，下面我就饼图为例给描述一下echarts的基本使用过程，部分代码是我从demo中裁剪之后的代码

echarts饼状图实现步骤：

1，在简单的html中引入js文件，该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">

// 路径配置

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，运行程序显示结果

以上是饼状图的实现步骤，其他图形可以以此案例去官网参考即可，其中的option尤为关键。。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航