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

发布网友发布时间：2022-04-20 15:41

共3个回答

懂视网时间：2022-05-12 05:53

这次给大家带来用H5的WebGL如何在同一个界面做出json和echarts图表，用H5的WebGL在同一个界面做出json和echarts图表的注意事项有哪些，下面就是实战案例，一起来看一下。

突然有个想法，如果能把一些用到不同的知识点放到同一个界面上，并且放到一个盒子里，这样我如果要看什么东西就可以很直接显示出来，而且这个盒子一定要能打开。我用HT实现了我的想法，代码一百多行，这么少的代码能实现这种效果我觉得还是牛的。

这个例子最基础的就是最外层的盒子了，所以我们先来看看如何实现它：

var box = new ht.CSGBox();
dataModel.add(box);

用HT可以很轻易地实现这个盒子，在HT中封装了很多基础图元类型，我们经常用到的ht.Node也是其中一个，这样我们可以不用反复地写相同的代码来完成基础的实现。

这个例子中用的封装好的基础图元是ht.CSGBox，一个盒子模型，可以参考HT for Web 建模手册，我们在手册中可以看到，在CSGBox中我们只能操作这个盒子的各个面，如果你想要自己设置一些特殊的功能，只需要操作ht.Style（HT for Web 风格手册）即可。

要想实现在盒子上的一个面上添加贴图，我能想到的只有HT封装的ht.Default.setImage函数了。

这边我实现的方法是参考HT的editor来运作的，重新声明一个graphview组件和一个datamodel数据模型，然后通过ht.Default.xhrLoad方法调用json，在方法中用ht.Default.parse将text转成json格式，然后反序列化将json里面的内容展现成可视化的界面，再设置动画，再立即刷新用到这个json的界面，否则就算设置了动画，画面也不会改变。

ht.Default.xhrLoad('displays/demo/pump.json', function(text){
 const json = ht.Default.parse(text);
 pumpDM.deserialize(json);
 var currentRotation = 0;
 var lastTime = new Date().getTime();
 setInterval(function(){
 var time = new Date().getTime();
 var deltaTime = time - lastTime;
 currentRotation += deltaTime * Math.PI / 180 * 0.3;
 lastTime = time;
 pumpDM.getDataByTag('fan1').setRotation(currentRotation);
 pumpDM.getDataByTag('fan2').setRotation(currentRotation);
 box.iv();
 // g3d.iv();这边也可以刷新g3d，但是局部刷新更省
 pumpGV.validateImpl();
 }, 10);
}, 10);

这个时候我不能把pumpGV和g3d都加到底层div上，并且我的意图是把pumpGV加到g3d中的CSGBox中的一面上，所以为了让pumpGV显示出来必须设置pumpGV的宽高，而这个宽高必须比我json画出来的图占的面积要大，不然显示不完整。如果想看这个宽高对显示的影响，可以自己改改看来玩玩。

pumpGV.getWidth = function() { return 600;}
pumpGV.getHeight = function(){ return 600;}
pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示

echarts图表的显示也是很基础的，只要再加上 canvas.dynamic = true，并且实时刷新gv即可。

最后，只需要将这两个回传的canvas传入ht.Default.setImage中即可：

ht.Default.setImage('echart', charts(option));
ht.Default.setImage('pump', pumpGV.getCanvas());

ht.Default.drawImage函数生成新的图实际上就是在canvas上画图，所以我们只要把我们已经画好的canvas传到ht.Default.setImage就可以生成图片了。

有一点需要改进的，我们可以看到盒子上的线段，图形，文字周边都有一圈的锯齿，因为我们在设置字体时，同时设置了半透明，在处于半透明的情况下“blend”样式会被关闭，这个时候我们就没法控制样式了，一般有透明度的时候需要将“all.transparent”设置为true，

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

如何用html的title属性实现鼠标悬停显示文字

怎样使用a标签的href属性与onclick事件

input输入框中的光标大小显示不一致应该怎么解决

热心网友时间：2022-05-12 03:01

　　最近有个朋友问了这样一个关于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>
转载

热心网友时间：2022-05-12 04:19