ECharts学习-柱状图
按照官方文档写了一个柱状图的例子。
第一种方式使用网络js:
主要代码如下：
<body>
<div id="main" style="height:400px">div>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js">script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById("main"));
var option={
tooltip:{
show:true
},
legend:{
data:["销量"]
},
xAxis:[{
type:'category',//默认为类目
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}],
yAxis : [
{
type : 'value'//默认为值类型
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
script>
body>在option内设置图表的类型和相关参数：
tooltip:{
show:true
}设置是否显示工具栏目
legend:{
data:["销量"]
}设置表述数据和图形的关联 描述
xAxis:[{
type:'category',//默认为类目
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}],
yAxis : [
{
type : 'value'//默认为值类型
}
]xAxis，yAxis分别为x轴和y轴的值和类型,x轴类型默认为‘category’和y轴类型默认为‘value’。
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]series为数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据，设置内容为工具条显示的具体内容。
总体效果图：
第二种方式使用本地js:
<html>
<head lang="en">
<meta charset="utf-8">
<title>EChartstitle>
head>
<body>
<div id="main" style="height:400px;width: 400px">div>
<script src="../Vendor/echarts/build/dist/echarts-all.js">script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById("main"));
var option={
tooltip:{
show:true
},
legend:{
data:["销量"]
},
xAxis:[{
type:'category',//默认为类目
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}],
yAxis : [
{
type : 'value'//默认为值类型
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
script>
body>
html>