第一步:下载echarts.js,将其解压到项目下
第二步:新建echarts.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
</body>
第三步:引入echarts.js
<script type="text/javascript" src="./echarts-2.2.7/build/source/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: './echarts-2.2.7/build/dist'
}
});
</script>
第四步 动态加载要使用的图表
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: './echarts-2.2.7/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
}
);
</script>
第五步:选择你要用什么图表
这里我选择了标准折线图
点进去可以看到它的实例option
把它的option拷贝到自己的html里,就可以用了
实际项目中,图表的属性和数据根据需求去设置就好了,可以参照它的实例去改,换成自己想要的就行了
不懂参数的话看Echarts参考手册