1.使用
1.引入:只需要像普通的 JavaScript 库一样用 script 标签引入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
2.绘制简单表格
2.1准备一个具备宽高的DOM容器
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
2.2通过echart.init方法初始化容器,通过setOption生成一个柱状图
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
//获取容器并初始化容器
var myChart = echart.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title:{
text:"标题"
},
tooltip:{},
legend:{['数量','价格']},//该柱状图拥有的类型
xAisx:{
data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] //数组,显示的数据
},
yAisx:{
data:[] //数组,y轴显示
},
series:[{
name:'数量',
type:'par',//显示类型为柱状图
data:[5, 20, 36, 10, 10, 20]//数据量
},{
name:'价格',
type:'par',//显示类型为柱状图
data:[5, 20, 36, 10, 10, 20]//数据量
}]
}
//使用刚指定的配置项和数据显示图表
myChart。setOption(option);
</script>
</body>