1.Echart的使用的简单配置(标签单文件的引入)
第一步:引用echart.js文件
<script src="echarts/echarts.js"></script>下载地址
第二步:添加图表容器(采用的是本地引用js文件)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echart的简单配置
</title>
<script src="echarts/echarts.js"></script>
</head>
<body>
<div id="chartmain" style="width:600px; height: 400px;"></div>
</body>
</html>
也可采用在线引用的方式,将引用的文件改为
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
第三步:设置图表参数,进行初始化,可在echart的使用的实例粘贴改造
<script type="text/javascript">
// 初始化图表标签
var myChart = echarts.init(document.getElementById('chartmain'));
var options={
//定义一个标题
title:{
text:'测试成绩'
},
legend:{
data:['销量']
},
//X轴设置
xAxis:{
data:['60分','70分','80分','90分','100分']
},
yAxis:{
},
//name=legend.data的时候才能显示图例
series:[{
name:'销量',
type:'bar',
data:['12','32','45','21','1']
}]
};
myChart.setOption(options);
</script>