很多时候我们会用到一些视图统计的功能，订单统计，数据统计等等。就会用到echarts，今天就给大家介绍一个简单使用的小例子。
首先大家可以自行去下载echarts,下载后引入即可。此例中的 echarts.common.min.js
代码如下：
<body>
<div id="one">
<div id="left1">
</div>
<div id="right1">
</div>
<div style="clear:both"></div>
</div>
<script src="js/echarts.common.min.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('left1'));
// 指定图表的配置项和数据
var option = {
title: {
text: '订单统计柱形图'
},
tooltip: {},
legend: {
data:['销量','销售金额']
},
xAxis: {
data: ["北京","广东","河南","山东","河北","上海"]
},
yAxis: {},
series: [
{
name:'销量',
type:'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name:'销售金额',
type:'bar',
data:[220, 182, 191, 234, 290, 330]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//调整屏幕大小自适应
window.onresize = myChart.resize;
// 绘制饼图
echarts.init(document.getElementById('right1')).setOption({
series: {
type: 'pie',
data: [
{name: 'A', value: 1314},
{name: 'B', value: 2121},
{name: 'C', value: 7758}
]
}
});
</script>
</body>
上面就是一个简单的小事例，我们自己的数据可以直接转成json付给data即可。上面有两一个是柱形，一个饼形，还可以设置type为line是线形，线形和柱形是通用的，可以互换。 还可以到官网自己查看更多事例（http://echarts.baidu.com/examples/），代码都有，很简单。希望对大家有有帮助。
作者：吾林爱分享
本文暂时没有评论，来添加一个吧(●'◡'●)