您的位置：首页 > Web前端 > JavaScript

百度Echarts图表JS插件的使用

2016-04-28 16:49 711 查看

看到一个H5的图表，忍不住想自己做一下。

刚开始的时候用了iChart.js这个插件，后来发现这个插件并不支持H5，哭~

后来网上找了百度的这个Echarts插件，真的觉得挺不错的，以后做图表的话就用它了！

1. https://codeload.github.com/ecomfe/echarts/zip/master 在这里下载整个echarts包；

2. 将包中的 esl.js 和 echarts.js 放在js文件夹下，然后就开始编写代码啦；

3.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Echarts Demo</title>
<script src="js/esl.js"></script>
</head>
<body>
<div>
<div id="main" style="height:400px"></div>
</div>
</body>
<script>
// 路径配置
require.config({
paths: {
'echarts': 'js/echarts',
'echarts/chart/bar': 'js/echarts',
'echarts/chart/line': 'js/echarts'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line'
],
function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
option = {
title: {
text: '环球集团公司（合并）',
subtext: '2012年07月',
x: 'center'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
dataView: {
show: false,
readOnly: false
},
magicType: {
show: false,
type: ['line', 'bar']
},
restore: {
show: false
},
saveAsImage: {
show: false
}
}
},
legend: {
orient: 'horizontal',
y: 'bottom',
data: ['销售收入', '利润', '利润率']
},
xAxis: [{
type: 'category',
data: ['2012年05月', '2012年06月', '2012年07月']
}],
yAxis: [{
type: 'value',
name: '',
min: 0,
max: 1900,
interval: 380,
axisLabel: {
formatter: '{value}'
}
}, {
type: 'value',
name: '单位：万元',
min: 0,
max: 50,
interval: 10,
axisLabel: {
formatter: '{value} %'
}
}],
series: [{
name: '销售收入',
type: 'bar',
data: [945, 1445, 1845]
}, {
name: '利润',
type: 'bar',
data: [245, 645, 791]
}, {
name: '利润率',
type: 'line',
yAxisIndex: 1,
data: [26, 45, 43]
}]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>

</html>

出来的效果233

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航