http://echarts.baidu.com/api.html#echarts
柱狀圖：
<script src="echarts.js" charset="utf-8"></script>
<script type="text/javascript">
const $=document.querySelectorAll.bind(document);
window.onload=function (){
// 基于準(zhǔn)備好的dom扁誓，初始化echarts實(shí)例
var myChart = echarts.init($(".box")[0]);
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: '北京人口分布',
subtext: '2017年度(單位: 萬)',
x: 'center'
},
tooltip: {},
legend: {
data: ['男', '女'],
right: 0,
top: '50%',
orient: 'vertical'
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月']
},
yAxis: {
type: 'value'
},
series: [{
name: '男',
type: 'bar',
data: [785, 23, 815, 945, 1120]
},
{
name: '女',
type: 'bar',
data: [635, 13, 715, 1045, 1320]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表正压。
myChart.setOption(option);
}
</script>
</head>
<body>
<div class="box"></div>
</body>
image.png
餅狀圖：
<script src="echarts.js" charset="utf-8"></script>
<script type="text/javascript">
const $=document.querySelectorAll.bind(document);
window.onload=function (){
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init($(".box")[0]);
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: '北京人口分布',
subtext: '2017年度(單位: 萬)',
x: 'center'
},
tooltip: {},
series: [
{
name: '性別比例',
type: 'pie',
radius: '20%',
center: ['30%', '50%'],
data: [
{name:'男',value: 3500},
{name:'女',value: 2750}
]
},
{
name: '年齡比例',
type: 'pie',
radius: '40%',
center: ['70%', '50%'],
data: [
{name: '18歲及更小', value: 876},
{name: '18~28歲', value: 1236},
{name: '28~38歲', value: 567},
{name: '38~50歲', value: 684},
{name: '50歲以上', value: 1350},
]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表怜珍。
myChart.setOption(option);
}
</script>
</head>
<body>
<div class="box"></div>
</body>
image.png
餅狀圖2：
<script src="echarts.js" charset="utf-8"></script>
<script type="text/javascript">
const $=document.querySelectorAll.bind(document);
window.onload=function (){
// 基于準(zhǔn)備好的dom渡紫，初始化echarts實(shí)例
var myChart = echarts.init($(".box")[0]);
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: '北京人口分布',
subtext: '2017年度(單位: 萬)',
x: 'center'
},
tooltip: {},
series: [
{
name: '性別比例',
type: 'pie',
radius: ['80%','60%'],
data: [
{name:'男',value: 3500},
{name:'女',value: 2750}
]
},
{
name: '年齡比例',
type: 'pie',
radius: '40%',
data: [
{name: '18歲及更小', value: 876},
{name: '18~28歲', value: 1236},
{name: '28~38歲', value: 567},
{name: '38~50歲', value: 684},
{name: '50歲以上', value: 1350},
]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表到推。
myChart.setOption(option);
}
</script>
</head>
<body>
<div class="box"></div>
</body>
image.png
結(jié)合展示：
<style media="screen">
.box {width:800px; height:600px; border:1px solid black; margin:10px auto 0}
.box .left, .box .right {width:50%; height:100%; float: left}
</style>
<script src="echarts.js" charset="utf-8"></script>
<script type="text/javascript">
const $=document.querySelectorAll.bind(document);
window.onload=function (){
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
let oLeft=$('.left')[0];
let oRight=$('.right')[0];
let datas=[
{
name: '湖南',
value: 1675,
citys: [
{name: '長(zhǎng)沙', value: 816},
{name: '潭州', value: 435},
{name: '桃園', value: 424},
]
},
{
name: '山東',
value: 1354,
citys: [
{name: '濟(jì)南', value: 615},
{name: '臨沂', value: 443},
{name: '德州', value: 296},
]
},
{
name: '東北',
value: 374,
citys: [
{name: '黑龍江', value: 112},
{name: '牡丹江', value: 65},
{name: '漠河', value: 197},
]
}
]
//左邊——省份
let option={
title: {
text: '省份數(shù)據(jù)'
},
series: [
{
name: '省數(shù)據(jù)',
type: 'pie',
radius: '50%',
data: datas.map(json=>({name: json.name, value: json.value}))
}
]
};
let chart=echarts.init(oLeft);
chart.setOption(option);
let chart2=echarts.init(oRight);
chart.on('mouseover', function (ev){
setCity(ev.name);
});
setCity(datas[0].name);
function setCity(name){
let data=null;
datas.forEach(json=>{
if(json.name==name){
data=json;
}
});
let option={
title: {
text: `${name}省`
},
xAxis: [
{
type: 'category',
data: data.citys.map(city=>city.name)
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'city',
//type: 'pie',
//data: data.citys
type: 'bar',
data: data.citys.map(city=>city.value)
}
]
};
chart2.setOption(option);
}
}
</script>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
image.png
