认识Echarts(网址:http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D) - 敬畏之心+持之以恒
认识Echarts(网址:http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D)
first.html:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>First ECharts</title>
<script type=”text/javascript” src=”../js/echarts.min.js”></script>
</head>
<body>
<div id=”charts” style=”width: 600px;height: 400px”></div>
</body>
<script type=”text/javascript”>
var charts = echarts.init(document.getElementById(“charts”));
var config = {
title: {
text:\’销量信息\’,
show:true,
textStyle:{
color:\’red\’
},
left:”center”
},
tooltip: {
triggerOn:\’mousemove\’,
formatter:\'{b}的销量为：{c}\’
},
legend: {
left:\’left\’,
orient:\’vertical\’,
data: [“衬衫”,”羊毛衫”,”雪纺衫”,”裤子”,”高跟鞋”,”袜子”]
},
series: [{
name: \’销量\’,
type: \’pie\’,
radius:[\’30%\’,\’60%\’],
data:[
{value:0,name:\’衬衫\’},
{value:10,name:\’羊毛衫\’},
{value:50,name:\’雪纺衫\’},
{value:5,name:\’裤子\’},
{value:30,name:\’高跟鞋\’},
{value:12,name:\’袜子\’}
]
}]
};
charts.setOption(config);
charts.on(\’click\’,function(data){
console.log(data.name);
console.log(data.value);
});
</script>
</html>
pie.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>First ECharts</title>
<script type=”text/javascript” src=”../js/echarts.min.js”></script>
</head>
<body>
<div id=”charts” style=”width: 400px;height: 300px”></div>
<input type=”button” onclick=”test()” value=”Click”>
</body>
<script type=”text/javascript”>
var charts = echarts.init(document.getElementById(“charts”));
var config = {
title: {
text:\’销量信息\’,
show:true,
textStyle:{
color:\’red\’
},
left:”50px”
},
tooltip: {},
legend: {
data:[\’销量\’]
},
xAxis: {
data: [“衬衫”,”羊毛衫”,”雪纺衫”,”裤子”,”高跟鞋”,”袜子”]
},
yAxis: {},
series: [{
name: \’销量\’,
type: \’bar\’,
data: [0, 0, 0, 0, 0, 0]
}]
};
charts.showLoading();
charts.setOption(config);
function test(){
charts.hideLoading();
charts.setOption({
series:[{
data : [5, 20, 36, 10, 10, 20]
}]
})
}
</script>
</html>