<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="echarts.min.js"></script>
<script src="jquery.min.js"></script>
<script src="json/china.json"></script>
</head>
<body>
<div style="width: 400px;height: 600px"></div>
<div style="width: 400px;height: 600px" id="div1"></div>
</body>
</html>
<script>
var mCharts=echarts.init(document.querySelector('div'))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: yDataArr,
markPoint: {
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true,
rotate: 60
},
barWidth: '30%'
}
]
}
mCharts.setOption(option)
var mCharts2 = echarts.init(document.querySelector('#div1'))
$.get('json/china.json', function(ret){
echarts.registerMap('aa', ret)
var option2 = {
geo: {
type: 'map',
map: 'aa'
}
}
mCharts2.setOption(option2)
echarts.connect([mCharts, mCharts2]) // 将柱状图和地图关联起来
})
</script>