<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="echarts.min.js"></script>
<style>
#main{
border: 1px solid black;
margin: 50px auto;
}
#left,#right{
width: 50%;
height: 100%;
float: left;
}
</style>
<title>Document</title>
</head>
<body>
<!-- 爲 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;">
<div id="left" ></div>
<div id="right" ></div>
</div>
<script type="text/javascript">
//數據部
let datas = [
{
name:'OOO',
value:1000,
nameChildren:[
{name:'AAA',value:300},
{name:'BBB',value:200},
{name:'CCC',value:600}
]
}
,
{
name:'PPP',
value:1500,
nameChildren:[
{name:'DDD',value:100},
{name:'EEE',value:900},
{name:'FFF',value:500}
]
}
,
{
name:'QQQ',
value:2000,
nameChildren:[
{name:'GGG',value:1300},
{name:'HHH',value:500},
{name:'III',value:200}
]
}
];
// let $ = document.querySelector.bind(document);
//1.獲取容器
// let oBox = $('.box');//document.querySelector('.box');
// 基於準備好的dom，初始化echarts實例
// var myChart = echarts.init(document.getElementById('main'));
var left = echarts.init(document.getElementById('left'));
// var right = echarts.init(document.getElementById('right'));
// 指定圖表的配置項和數據
var optionleft = {
title: {
text: 'ECharts 入門示例（左 大餅）',
subtext:'2018年度（單位：元）',
x:'center',
textStyle:{
fontSize:'20',
color:'black'
}
},
// tooltip: {},
legend: {
data:['OOO','PPP','QQQ'],
right:0,
top:'50%',
orient:'vertical'
},
series: [
{
name: 'OOO',
type: 'pie',
radius: '55%',
// center: ['40%', '50%'],
// [1,2,3].map(val=>val)
// [{},{},{}]
data: datas.map(json=>{
return {name:json.name,value:json.value}
})
}]
};
// 使用剛指定的配置項和數據顯示圖表。
left.setOption(optionleft);
left.on('mouseover',function(ev){
// console.log(ev);
let data = null;
datas.forEach(
(item,index)=>{
// console.log(item,index);
if(item.name == ev.data.name){
data = item.nameChildren;
// data = item;
}
}
);
console.log(data);
let optionright = {
title:{
text:ev.data.name + "（右 柱形）"
},
legend: {
data:data.map(val=>val.name),
right:0,
top:'50%',
orient:'vertical'
},
xAxis: {
type:'category',
data: data.map(val=>val.name)
},
yAxis: {
type:'value'
},
series:
// data.map(val=>val.value)
[
// name:ev.data.name,
// type:'bar'
{
name: ev.data.name,
type: 'bar',
data: data.map(val=>val.value)
}
]
};
let right = echarts.init(document.getElementById('right'));
right.setOption(optionright);
})
</script>
</body>
</html>
實行結果
