echarts快速入门

浏览器画图的原理
* 1，Canvas 基于像素点
* 2,SVG 基于对象模型

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echarts</title>
<style>
#myCanvas {
400px;
height: 300px;
}
</style>
</head>
<body>
<div id="myCanvas">

</div>
<script>

</script>
<script src="echarts.min.js"></script>
</body>
<script>
//基于准备好的dom，初始化echarts实例
var myChart= echarts.init(document.getElementById('myCanvas'));
//指定图标的配置项和数据
var option = {
//标题
title:{ //具体参数看文档
show:true,
text:'一级标题',
subtext:'二级标题',
left:0 , //标题位置 center right
borderColor:'red',//标题框
borderWidth:1 //边框
},
//工具栏组件
toolbox :{
show:true,//是否显示
feature :{//需要的功能
saveAsImage:{
show:true
},
dataView: {
show:true
},
dataZoom :{
show:true
},
magicType:{
type:['line','bar']
}
}
},
// 弹窗组件
tooltip:{
show:true,//是否展示
trigger:'axis' //x轴出发
},
//图例
legend :{
data:['销量']
},
//x轴
xAxis :{
data : ['衬衫1','衬衫2','衬衫3','衬衫4','衬衫5','衬衫6','衬衫7']
},
yAxis :{},
//数据
series:[
{
name:'销量',
type:'bar',
data:[5,20,17,10,10,23,55],
markPoint:{ //标记
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
}
},
{
name:'产量',
type:'line',
data:[5,20,17,10,10,23,55],
markPoint:{
data:[
{type:'average',name:'平均值'},
]
}
}

]
};
myChart.setOption(option);
</script>
</html>