• 所有问题

    • echarts 怎样在一个页面显示多张图表

    如题所述

    举报该问题
    推荐答案   2015-02-08
    　　最近有个朋友问了这样一个关于ECharts图表组件的问题，他想在一个页面内创建多个图表，不知道该如何做。最大的问题可能是受到了require([],function(){});的阻碍吧。
    　　其实require无非就是一个模块化加载借用其回调函数去创建图表对象。
    　　所以只要我们能够将创建多个图表对象的方法进行统一封装形成一个方法放入require()的回调函数内即可。
    　　一个页面内创建多个ECharts图表示例效果图呈现
    　　想要在一个页面创建多个图表对象需要准备如下几个条件，也可以说是注意事项：
    　　1、想要创建几个图表对象就需要预先设置多少个图表容器
    　　图表容器作为图表的载体，所以是必须的，且必须指定每一个容器的width和height为非零，否则会产生图表无法呈现的结果。

    　　<div id="main" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
    　　padding: 10px;">
    　　</div>
    　　<div id="mainLine" style="height: 400px; width: 500px; float: left; border: 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: 400px; width: 500px; float: left; border: 1px solid #ccc;
    　　padding: 10px;">
    　　</div>
    　　<div id="mainLine" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
    　　padding: 10px;">
    　　</div>
    　　<div style="clear: both;">
    　　<h3>
    　　STEP DAY</h3>
    　　<p>
    　　我们只提供最直接、最具价值的信息，旨在：<a href="http://www.stepday.com/myblog/?echarts" target="_blank">www.stepday.com</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>
    转载
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2015-09-13
    最近有个朋友问了这样一个关于ECharts图表组件的问题，他想在一个页面内创建多个图表，不知道该如何做。最大的问题可能是受到了require([],function(){});的阻碍吧。
    　　其实require无非就是一个模块化加载借用其回调函数去创建图表对象。
    　　所以只要我们能够将创建多个图表对象的方法进行统一封装形成一个方法放入require()的回调函数内即可。
    　　一个页面内创建多个ECharts图表示例效果图呈现
    　　想要在一个页面创建多个图表对象需要准备如下几个条件，也可以说是注意事项：
    　　1、想要创建几个图表对象就需要预先设置多少个图表容器
    　　图表容器作为图表的载体，所以是必须的，且必须指定每一个容器的width和height为非零，否则会产生图表无法呈现的结果。

    　　<div id="main" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
    　　padding: 10px;">
    　　</div>
    　　<div id="mainLine" style="height: 400px; width: 500px; float: left; border: 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: 400px; width: 500px; float: left; border: 1px solid #ccc;
    　　padding: 10px;">
    　　</div>
    　　<div id="mainLine" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
    　　padding: 10px;">
    　　</div>
    　　<div style="clear: both;">
    　　<h3>
    　　STEP DAY</h3>
    　　<p>
    　　我们只提供最直接、最具价值的信息，旨在：<a href="http://www.stepday.com/myblog/?echarts" target="_blank">www.stepday.com</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.js一个页面如何加载多个图表?答：1、找打文件，下载到本机。2、把文件名改为echarts（也可以不用改，我是方便自己用才改的），然后放到自己项目里的js文件里（这里也可以和js平级，看自已的喜好）。3、在html文件里用script引用echarts文件，html里引用成功后，打开js文件或script标签配置文件路径：注意这个路径要和刚刚引入的echarts...
    EChartsr能否实现一个DIV放多个图表?答：你直接通过三个div就可以实现啊，div的宽度变化可以直接用echarts里面的方法进行重新渲染
    微信小程序中--使用ECharts实现多个图表展示答：在一个页面显示多个图表 –wxml––js–
    echarts图表自适应问题如何解决答：echarts图表可以通过调整大小来适应不同大小的屏幕。在一个页面中，可能会有多个图表，如果想让所有图表都自适应，可以使用以下代码：```javascript window.onresize = function(){ for(var i=0;i echarts[i].resize();} } ```其中，echarts是一个包含所有图表的数组。通过遍历数组，对每个图表...
    大家正在搜
    java生成echarts图表echarts多个柱状图排序excel两张图表合成一张excel两张图片怎么合成一张把多张图合并为一张图echarts有哪些图表echarts图表echarts图表边框echarts调整图表大小
    相关问题
    E-charts怎么让一个页面里面的多个图表自适应？
    echarts 一个页面多个节点共用一个图表实例
    echarts.js 一个页面如何加载多个表 我想加载两个饼...
    EChartsr能否实现一个DIV放多个图表？
    echarts.js一个页面如何加载多个图表？
    一个页面中既有echarts2的图表也有echarts3的图...
    echarts 一个页面同时加载两个饼图，只显示一个，是什么...
    在一个课切换tab页面中怎么放多个echarts