第一步：下載相應的js文件：echarts.min.js和macarons.js，其中macarons.js文件時主題文件。
第二步：編寫index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id = "d1" style = "margin:20px auto;width:600px;height:400px;"></div>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="macarons.js"></script>
<script type="text/javascript">
//其中第二個參數是動態設置主題
var myChart = echarts.init(document.getElementById("d1"),'macarons');//初始化畫布
var option = {
title:{
text:"echarts實例"
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['新增關注量','取消關注量','淨增長量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
//雙y軸
yAxis : [
{
type : 'value',
minInterval: 50,
name : '新增關注量',
splitNumber: 5,
axisLabel : {
formatter: '{value} 人' //控制輸出格式
},
max: function(value){
return value.max+5;
}
},
{
type : 'value',
name : '增長量',
splitNumber: 10,
minInterval: 20,
axisLabel : {
formatter: '{value} 人' //控制輸出格式
},
max: function(value){
return value.max+5;
}
}
],
series : [
{
name:'新增關注量',
type:'bar',
itemStyle:{
normal:{
barBorderRadius:5
},
emphasis: {
barBorderRadius: 5
}
},
data:[-20, 149, 70, 23, 25, 76, -13, 116, 32, 20, 64, 33],
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'取消關注量',
type:'bar',
itemStyle:{
normal:{
barBorderRadius:5
},
emphasis: {
barBorderRadius: 5
}
},
data:[26, 59, 90, 64, 128, 70, 17, 12, 48, 118, 60, 23],
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
},
{
name:'淨增長量',
yAxisIndex: 1,
type:'line',
data:[-12, -59, 90, 26, 28, 70, 16, 82, 48, 18, 60, 23]
}
]
}
myChart.setOption(option);
</script>
</body>
</html>第三步：運行效果
