<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
$.getJSON('path/to/your/data.json', function (data) {
myChart.hideLoading();
myChart.setOption(option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2012', '2013', '2014', '2015', '2016', '2017']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [
{
name: '2012',
type: 'bar',
data: data.data2012
},
{
name: '2013',
type: 'bar',
data: data.data2013
},
{
name: '2014',
type: 'bar',
data: data.data2014
},
{
name: '2015',
type: 'bar',
data: data.data2015
},
{
name: '2016',
type: 'bar',
data: data.data2016
},
{
name: '2017',
type: 'bar',
data:
评论已关闭