ECharts 在同一個頁面添加多個圖表 並 給圖表綁定事件
阿新 • • 發佈：2017-12-28
document syntax word average 添加多個 -- adding ado conf
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!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事件）
?| 1 2 3 4 5 6 |
/* 給柱狀圖綁定click事件 */
var ecConfig = require(‘echarts/config‘);
function eConsole(param) {
alert(param.value); // 彈出當前柱子的數值
}
myBarChart.on(ecConfig.EVENT.CLICK, eConsole);
|
這段代碼加在 myBarChart.setOption(option,true); //當setOption第二個參數為true時，會阻止數據合並，這行代碼上面。
-----------------------------------------------------------------------------------------------------------------------------------------------
如下：
ECharts 在同一個頁面添加多個圖表 並 給圖表綁定事件