其实require无非就是一个模块化加载借用其回调函数去创建图表对象。
所以只要我们能够将创建多个图表对象的方法进行统一封装形成一个方法放入require()的回调函数内即可。
一个页面内创建多个ECharts图表示例效果图呈现
想要在一个页面创建多个图表对象需要准备如下几个条件，也可以说是注意事项：
1、想要创建几个图表对象就需要预先设置多少个图表容器
图表容器作为图表的载体，所以是必须的，且必须指定每一个容器的width和height为非零，否则会产生图表无法呈现的结果。
<div id="main" style="height: 400pxwidth: 500pxfloat: leftborder: 1px solid #ccc
padding: 10px">
</div>
<div id="mainLine" style="height: 400pxwidth: 500pxfloat: leftborder: 1px solid #ccc
padding: 10px">
</div>
这里准备了两个容器。
2、引入相关的js文件
<script src="js/esl.js" charset="utf-8" type="text/javascript"></script>
<script src="js/echarts.js" charset="utf-8" type="text/javascript"></script>
3、编写好创建不同图表对象的方法
1）、创建一个柱状图的函数
//创建ECharts柱状图图表
function DrawColumnEChart(ec) {
//--- 柱状图 ---
var myChart = ec.init(document.getElementById('main'))
//图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
})
myChart.hideLoading()
myChart.setOption({
title: {
text: "柱状图"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['stepday.com', 'tuiwosa.com']
},
toolbox: {
show: false
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [
{
name: 'stepday.com',
type: 'bar', //序列展现类型为柱状图
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: 'tuiwosa.com',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
})
var ecConfig = require('echarts/config')
//ECharts图表的click事件监听
myChart.on("click", function () {
alert("你点击我了!")
})
}
2）、创建折线图的函数
//创建ECharts折线图图表
function DrawLineEChart(ec) {
//--- 折线图 ---
var myLineChart = ec.init(document.getElementById('mainLine'))
//图表显示提示信息
myLineChart.showLoading({
text: "图表数据正在努力加载..."
})
myLineChart.hideLoading()
myLineChart.setOption({
title: {
text: "折线图"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['stepday.com', 'tuiwosa.com']
},
toolbox: {
show: false
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [
{
name: 'stepday.com',
type: 'line', //序列展现类型为折线图
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: 'tuiwosa.com',
type: 'line',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
})
var ecConfig = require('echarts/config')
//ECharts图表的click事件监听
myLineChart.on("click", function () {
alert("你点击我了!")
})
}
4、封装一个统一调用创建不同图表的函数
///将画多个图表的进行函数封装
function DrawCharts(ec) {
DrawColumnEChart(ec)
DrawLineEChart(ec)
}
5、结合模块加载函数require(requireArr,callbackFunction)创建图表对象
require(
[
'echarts',
'echarts/chart/bar', //按需加载图表关于bar图的部分
'echarts/chart/line' //按需加载图表关于线性图的部分
],
DrawCharts
)
6、特别提醒
1）、创建不同图表对象的时候需要注意方法内部关于init()初始化图表方法的时候其id要与需要状态当前图表容器id保持一致。
7、完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>ECharts-基本线性图</title>
<script src="js/esl.js" charset="utf-8" type="text/javascript"></script>
<script src="js/echarts.js" charset="utf-8" type="text/javascript"></script>
</head>
<body>
<div id="main" style="height: 400pxwidth: 500pxfloat: leftborder: 1px solid #ccc
padding: 10px">
</div>
<div id="mainLine" style="height: 400pxwidth: 500pxfloat: leftborder: 1px solid #ccc
padding: 10px">
</div>
<div style="clear: both">
<h3>
STEP DAY</h3>
<p>
我们只提供最直接、最具价值的信息，旨在：<a href="" target="_blank"></a>
</p>
</div>
<script type="text/javascript" language="javascript">
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar', //按需加载图表关于bar图的部分
'echarts/chart/line' //按需加载图表关于线性图的部分
],
DrawCharts
)
///将画多个图表的进行函数封装
function DrawCharts(ec) {
DrawColumnEChart(ec)
DrawLineEChart(ec)
}
//创建ECharts柱状图图表
function DrawColumnEChart(ec) {
//--- 柱状图 ---
var myChart = ec.init(document.getElementById('main'))
//图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
})
myChart.hideLoading()
myChart.setOption({
title: {
text: "柱状图"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['stepday.com', 'tuiwosa.com']
},
toolbox: {
show: false
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [
{
name: 'stepday.com',
type: 'bar', //序列展现类型为柱状图
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: 'tuiwosa.com',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
})
var ecConfig = require('echarts/config')
//ECharts图表的click事件监听
myChart.on("click", function () {
alert("你点击我了!")
})
}
//创建ECharts折线图图表
function DrawLineEChart(ec) {
//--- 折线图 ---
var myLineChart = ec.init(document.getElementById('mainLine'))
//图表显示提示信息
myLineChart.showLoading({
text: "图表数据正在努力加载..."
})
myLineChart.hideLoading()
myLineChart.setOption({
title: {
text: "折线图"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['stepday.com', 'tuiwosa.com']
},
toolbox: {
show: false
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [
{
name: 'stepday.com',
type: 'line', //序列展现类型为折线图
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: 'tuiwosa.com',
type: 'line',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
})
var ecConfig = require('echarts/config')
//ECharts图表的click事件监听
myLineChart.on("click", function () {
alert("你点击我了!")
})
}
</script>
</body>
</html>
转载
望采纳！
eCharts总体架构：
eCharts的底层库 Zrender，用面向对象的方式把实体抽象成为图形元素，调用 Canvas API设置样式，然后构建路径，进行图形元素渲染。
M - 数据管理层（storage），负责存储元素，进行增删改查。
C – 控制层（handle），负责事件处理，重要是是监听事件的作用坐标。
V – 视图层（painter），负责绘图 *** 作，canvas元素生命周期管理，视图渲染，更新控制。
eCharts前端初始化流程：
1、为eCharts准备一个具备大小（宽高）的Dom
<div id="main" style="width: 600pxheight:400px"></div>
2、基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')，‘null’，{renderer：‘svg’})
3、指定图表的配置项和数据
var option = { … }
4、使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
eCharts初始化底层实现关键步骤：
1.获取并记录dom成全局变量：__DEV__。
2.校验当前dom上是否存在Echarts图表实例： getInstanceByDom(dom)
3.创建一个图表实例 ：new ECharts(dom, theme, opts)
1)调用载ZRender绘图引擎，创建一个实例zr：zrender.init（）
a)根据参数选用canvas或GVG渲染器：renderer
b)根据参数配置图表分辨比：devicePixelRatio
c)根据参数配置图表尺寸：width、height
2)做一个事件监听（信息中心）：new EventProcessor（）
3)准备图表和组件的视图实例 ：prepareView（）
a)根据系列类型选择模型：doPrepare（）
b)创建视图实例：new Clazz( )
4)根据配置项注册图表项
a)注册主题：registerTheme（）
b)注册选项预处理器：registerPreprocessor（）
c)注册处理器：registerProcessor（）
d)注册坐标系统：registerCoordinateSystem（）
e)注册图表布局：registerLayout（）
f)注册图表行为：registerAction（）
g)注册视图：registerVisual（）
5)渲染组件：renderComponents（）
6)渲染每个图表：renderSeries（）
a)数据渲染：zr.storage.getDisplayList()
b)更新覆盖层状态updateHoverLayerStatus（）
7)为实例初始化鼠标事件：initEvents（）
8)启用连接，进行状态设置等：enableConnect(chart)
说明：本文仅为个人解读，欢迎指正
可以这样试一下先写成这样：
myCharts.on('click',function(params){
console.log(params)
})
然后谷歌浏览器，F12 打开开发者工具。
点击地图，看开发者工具控制台输出，params 里面有没有跟省市有关的属性。。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）