刚学的插件，以柱状图和饼状图为例：
柱状图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts.js案例</title>
//自己进行下载插件 echarts.js插件
<script type="text/javascript" src='echarts.js'></script></head>
<body>
<div id="chart" style="width:500px;height:400px;"></div>
</body>
<script type="text/javascript">
// 初始化图表标签
var echart=echarts.init(document.getElementById('chart'));
var option={
baseOption:{
title:{
text:'商店一周销售'
},
legend:{
data:['购买金额','销售金额']
},
//横轴
xAxis:{
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
},
//鼠标放上显示的内容
tooltip:{
show:true,
formatter:'系列名:{a}<br>类目:{b}<br>数值:{c}'
},
series:[{
name:'购买金额',
type:'bar',
data:[200,312,431,241,175,275,369],
//显示最大最小值
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
//平均值显示
markLine:{
data:[
{type:'average',name:'平均值',itemStyle:{
normal:{
color:'green'
}
}}
]
}
},{
name:'销售金额',
type:'line',
data:[321,432,543,376,286,298,400],
//曲线
smooth:true,
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
markLine:{
data:[
{type:'average',name:'平均值',itemStyle:{
normal:{
color:'red'
}
}}
]
}
}]
}
};
window.onresize = echart.resize;
echart.setOption(option);
</script>
</html>
饼状图：原文链接
</!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QQ部
星座分布图</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:800px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name:'星座',
type:'pie',
selectedMode: 'single',
radius: ['75%', '96%'],
label: {
normal: {
position: 'inside',
fontSize: 20,
color:'',
fontFamily:'Microsoft Yahei'
}
},
data:[
{value:4, name:'双子座'},
{value:3, name:'白羊座'},
{value:3, name:'金牛座'},
{value:2, name:'天蝎座'},
{value:2, name:'双鱼座'},
{value:2, name:'处女座'},
{value:2, name:'射手座'},
{value:1, name:'摩羯座'},
{value:1, name:'天秤座'},
{value:1, name:'水瓶座'},
{value:1, name:'狮子座'}
]
},
{
name:'姓名',
type:'pie',
radius: ['30%', '70%'],
label: {
normal: {
position:'inside',
align:'right',
fontSize: 18,
fontFamily:'Microsoft YaHei',
color:"#FFEFE0"
}
},
data:[
{value:1, name:'X1'},
{value:1, name:'X2'},
{value:1, name:'X3'},
{value:1, name:'X4'},
{value:1, name:'M1'},
{value:1, name:'M2'},
{value:1, name:'M3'},
{value:1, name:'N1'},
{value:1, name:'N2'},
{value:1, name:'N3'},
{value:1, name:'D1'},
{value:1, name:'D2'},
{value:1, name:'D3'},
{value:1, name:'F1'},
{value:1, name:'F2'},
{value:1, name:'F3'},
{value:1, name:'G1'},
{value:1, name:'A1'},
{value:1, name:'W1'},
{value:1, name:'E1'},
{value:1, name:'E2'},
{value:1, name:'E3'}
]
},
{
name:'部门',
type:'pie',
radius: ['0%', '25%'],
label: {
normal: {
position: 'center',
fontSize: 22,
fontFamily:'Microsoft YaHei',
color:'#80F0E3'
}
},
data:[
{value:22, name:'QQ部'}
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>