<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/echarts.js"></script>
//echarts的api legend ：图例
// dataZoom : 数据区域绽放相关组件
// visualMap ：视觉映射组件
// toolbox ：工具箱
// tooltip ：提示框相关的行为
//echarts<!--全局echarts对象的方法：1、 init 初始化 参数可以使dom元素或者theme应用主题或者附加参数（比如设置像素比等）-->
<!-- 2、connect 多图表联动 参数group group的ID或者图标示例数组-->
<!--chart1.group = 'group1';-->
<!--chart2.group = 'group1';-->
<!--echarts.connect('group1');-->
<!-- 或者可以直接传入需要联动的实例数组-->
<!--echarts.connect([chart1, chart2]);-->
<!-- 3、disconnect 解除联动-->
<!-- 4、dispose 销毁实例-->
<!-- 5、getInstanceByDom 获取dom容器上的实例-->
//instance<!--通过 echarts.init 创建的实例的方法/1、group 图标的分组，用于联动-->
<!-- 2、setOption 设置图标参数 比如：chart.setOption(option, notMerge, lazyUpdate);-->
<!--chart.setOption(option, {
notMerge: ...,（合并）
lazyUpdate: ...,（热部署）
silent: ... （抛出事件）
});-->
<!-- 345、getWidth ，getHeight ，getDom，getOption ，resize -->
//actions<!--ECharts 中支持的图表行为，通过 dispatchAction 触发：legend 、highlight 、dataZoom、visualMap、timeline、pie -->
//event<!--在 ECharts 中主要通过 on 方法添加事件处理函数，该文档描述了所有 ECharts 的事件列表。-->
</head>
<body>
<div id="main" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title:{
text: 'EChart 入门示例'
},
tooltip:{},
legend:{
data:['销量']
},
xAxis:{
data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis:{},
series:[{
name:'销量',
type:'bar',
data:[5,20,36,10,10,20]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
http://echarts.baidu.com/api.html#echarts
网友评论