Echarts
2018-08-25 本文已影响16人
秋天de童话
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 (){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init($(".box")[0]);
// 指定图表的配置项和数据
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]
}]
};
// 使用刚指定的配置项和数据显示图表。
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 (){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init($(".box")[0]);
// 指定图表的配置项和数据
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},
]
}]
};
// 使用刚指定的配置项和数据显示图表。
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 (){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init($(".box")[0]);
// 指定图表的配置项和数据
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},
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
</head>
<body>
<div class="box"></div>
</body>
image.png
结合展示：
<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 (){
// 基于准备好的dom，初始化echarts实例
let oLeft=$('.left')[0];
let oRight=$('.right')[0];
let datas=[
{
name: '湖南',
value: 1675,
citys: [
{name: '长沙', value: 816},
{name: '潭州', value: 435},
{name: '桃园', value: 424},
]
},
{
name: '山东',
value: 1354,
citys: [
{name: '济南', 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: '省份数据'
},
series: [
{
name: '省数据',
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
