ECharts 在同一个页面添加多个图表并给图表绑定事件-白红宇

ECharts 在同一个页面添加多个图表并给图表绑定事件

阅读量：7091 次

发布时间：2019-06-28

本文共 3651 字，大约阅读时间需要 12 分钟。

                               
<!DOCTYPE html>
<head>
<meta charset=
"utf-8"
>
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id=
"barMain"
style=
"height:400px"
></div>
<div id=
"lineMain"
style=
"height:400px"
></div>
<!-- ECharts单文件引入 -->
<script src=
"http://echarts.baidu.com/build/dist/echarts.js"
></script>
<script type=
"text/javascript"
>
// 路径配置
require.config({ 
　　paths: { 
　　　　echarts: 
'http://echarts.baidu.com/build/dist'
　　}
});
// 使用
require(
　　　　　　[
　　　　　　　　
'echarts'
,
　　　　　　　　
'echarts/chart/bar'
, 
　　　　　　　　
'echarts/chart/line'
　　　　　　],
　　　　　　drawEcharts
);
function
drawEcharts(ec){ 
　　drawBar(ec);
　　drawLine(ec);
}
function
drawBar(ec){ 
　　
var
myBarChart = ec.init(document.getElementById(
'barMain'
)); 
　　
var
option = { 
　　　　tooltip: { 
　　　　show: 
true
　　},
　　legend: { 
　　　　data:[
'销量'
]
　　},
　　xAxis : [
　　　　{ 
　　　　　　type : 
'category'
,
　　　　　　data : [
"衬衫"
,
"羊毛衫"
,
"雪纺衫"
,
"裤子"
,
"高跟鞋"
,
"袜子"
]
　　　　}
　　],
　　yAxis : [
　　　　{ 
　　　　　　type : 
'value'
　　　　}
　　],
　　series : [
　　　　{ 
　　　　　　
"name"
:
"销量"
,
　　　　　　
"type"
:
"bar"
,
　　　　　　
"data"
:[5, 20, 40, 10, 10, 20]
　　　　}
　　]
};
myBarChart.setOption(option,
true
); 
//当setOption第二个参数为true时，会阻止数据合并
}
function
drawLine(ec){ 
　　
var
myLineChart = ec.init(document.getElementById(
'lineMain'
)); 
　　
var
option2 = { 
　　　　title : { 
　　　　text: 
'未来一周气温变化'
,
　　　　subtext: 
'纯属虚构'
　　},
　　tooltip : { 
　　　　trigger: 
'axis'
　　},
　　legend: { 
　　　　data:[
'最高气温'
,
'最低气温'
]
　　},
　　toolbox: { 
　　　　show : 
true
,
　　　　feature : { 
　　　　　　mark : {show: 
true
},
　　　　　　dataView : {show: 
true
, readOnly: 
false
},
　　　　　　magicType : {show: 
true
, type: [
'line'
, 
'bar'
]},
　　　　　　restore : {show: 
true
},
　　　　　　saveAsImage : {show: 
true
}
　　　　}
　　},
　　calculable : 
true
,
　　xAxis : [
　　　　{ 
　　　　　　type : 
'category'
,
　　　　　　boundaryGap : 
false
,
　　　　　　data : [
'周一'
,
'周二'
,
'周三'
,
'周四'
,
'周五'
,
'周六'
,
'周日'
]
　　　　}
　　],
　　yAxis : [
　　　　{ 
　　　　　　type : 
'value'
,
　　　　　　axisLabel : { 
　　　　　　　　formatter: 
'{value} °C'
　　　　　　}
　　　　}
　　],
　　series : [
　　　　{ 
　　　　　　name:
'最高气温'
,
　　　　　　type:
'line'
,
　　　　　　data:[11, 11, 15, 13, 12, 13, 10],
　　　　　　markPoint : { 
　　　　　　　　data : [
　　　　　　　　　　{type : 
'max'
, name: 
'最大值'
},
　　　　　　　　　　{type : 
'min'
, name: 
'最小值'
}
　　　　　　　　]
　　　　　　},
　　　　　　markLine : { 
　　　　　　　　data : [
　　　　　　　　　　{type : 
'average'
, name: 
'平均值'
}
　　　　　　　　]
　　　　　　}
　　　　},
　　　　{ 
　　　　　　name:
'最低气温'
,
　　　　　　type:
'line'
,
　　　　　　data:[1, -2, 2, 5, 3, 2, 0],
　　　　　　markPoint : { 
　　　　　　　　data : [
　　　　　　　　　　{name : 
'周最低'
, value : -2, xAxis: 1, yAxis: -1.5}
　　　　　　　　]
　　　　　　},
　　　　　　markLine : { 
　　　　　　　　data : [
　　　　　　　　　　{type : 
'average'
, name : 
'平均值'
}
　　　　　　　　]
　　　　　　}
　　　　}
　　] 
};
myLineChart.setOption(option2,
true
); 
}
</script>
</body>
          
        

补充：给图表绑定事件（以上面柱状图为例，绑定click事件）

                               
/* 给柱状图绑定click事件 */
　
var
ecConfig = require(
'echarts/config'
); 
　
function
eConsole(param) { 
　　　alert(param.value); 　　 
// 弹出当前柱子的数值
　} 
　myBarChart.on(ecConfig.EVENT.CLICK, eConsole);
          
        