码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-12-28 13:58:30      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:gic   als   alert   技术   document   format   axis   param   eve   

 
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 在同一个页面添加多个图表 并 给图表绑定事件

标签:gic   als   alert   技术   document   format   axis   param   eve   

原文地址:https://www.cnblogs.com/hellman/p/8135071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!