ercharts一个页面能放几个_echarts 怎样在一个页面显示多张图表

展开全部

最近有个朋友问了这样一个关于ECharts图表组件的问题，他想在一个页面内创建e69da5e887aa62616964757a686964616f31333337613831多个图表，不知道该如何做。最大的问题可能是受到了require([],function(){});的阻碍吧。

其实require无非就是一个模块化加载借用其回调函数去创建图表对象。

所以只要我们能够将创建多个图表对象的方法进行统一封装形成一个方法放入require()的回调函数内即可。

一个页面内创建多个ECharts图表示例效果图呈现

想要在一个页面创建多个图表对象需要准备如下几个条件，也可以说是注意事项：

1、想要创建几个图表对象就需要预先设置多少个图表容器

图表容器作为图表的载体，所以是必须的，且必须指定每一个容器的width和height为非零，否则会产生图表无法呈现的结果。

这里准备了两个容器。

2、引入相关的js文件

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',