<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>ECharts</title>
<script src='https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js'></script>
</head>
<body>
<div class="draggable resizable vdr" id="draggable_0" style="width: 550px; height: 350px;">
<div id="echarts_0" style="width: 100%; height: 100%;">
</div>
</div>
<script type='text/javascript'>
function fnEcharts() {
var myChart = echarts.init(document.getElementById('draggable_0'));
var option = {
"color": ["red", "black"],
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"grid": {
"top": "7%",
"left": "1%",
"right": "0%",
"bottom": "0%",
"containLabel": true
},
"xAxis": [{
"type": "category",
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
"axisTick": {
"alignWithLabel": true
}
}],
"yAxis": [{
"type": "value"
}],
"series": [{
"name": "直接访问",
"type": "bar",
"barWidth": "60%",
"data": [10, 52, 200, 334, 390, 330, 220]
}]
};
myChart.setOption(option);
};
fnEcharts();
</script>
</body>
</html>