官方bilibiliWindows破解入门Android逆向入门
【网络诊断修复工具】切换到窄版

吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步，快速开始

吾爱破解 - 52pojie.cn»网站 › 【 软件安全 】 › 『编程语言区』 › 『编程语言讨论求助区』 › echarts单容器，多图表的问题
返回列表 发新帖
查看: 1493|回复: 6
收起左侧

[求助] echarts单容器，多图表的问题

[复制链接]
cqwcns
cqwcns 发表于 2022-7-5 10:32
庖丁解牛
https://echarts.apache.org/examples/zh/editor.html?c=geo-beef-cuts


有没有大佬用过echart，帮忙看看，感谢。
我参照这个官方demo，自制了一个地图图表。
但我希望在左侧加一个水平柱形图，呈现数据值（数据复用地图的数据）。
大概效果如下图：
微信图片_20220705102913.png

我研究了一天，都没有实现。
有会的大佬指教一下，感谢。
提醒：可在官方deom中修改、调试。
庖丁解牛
https://echarts.apache.org/examples/zh/editor.html?c=geo-beef-cuts


[JavaScript] 纯文本查看 复制代码
import * as echarts from 'echarts';

var ROOT_PATH = 'https://echarts.apache.org/examples';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

$.get(ROOT_PATH + '/data/asset/geo/Beef_cuts_France.svg', function (svg) {
  echarts.registerMap('Beef_cuts_France', { svg: svg });
  option = {
    tooltip: {},
    visualMap: {
      left: 'center',
      bottom: '10%',
      min: 5,
      max: 100,
      orient: 'horizontal',
      text: ['', 'Price'],
      realtime: true,
      calculable: true,
      inRange: {
        color: ['#dbac00', '#db6e00', '#cf0000']
      }
    },
    series: [
      {
        name: 'French Beef Cuts',
        type: 'map',
        map: 'Beef_cuts_France',
        roam: true,
        emphasis: {
          label: {
            show: false
          }
        },
        selectedMode: false,
        data: [
          { name: 'Queue', value: 15 },
          { name: 'Langue', value: 35 },
          { name: 'Plat de joue', value: 15 },
          { name: 'Gros bout de poitrine', value: 25 },
          { name: 'Jumeau à pot-au-feu', value: 45 },
          { name: 'Onglet', value: 85 },
          { name: 'Plat de tranche', value: 25 },
          { name: 'Araignée', value: 15 },
          { name: 'Gîte à la noix', value: 55 },
          { name: "Bavette d'aloyau", value: 25 },
          { name: 'Tende de tranche', value: 65 },
          { name: 'Rond de gîte', value: 45 },
          { name: 'Bavettede de flanchet', value: 85 },
          { name: 'Flanchet', value: 35 },
          { name: 'Hampe', value: 75 },
          { name: 'Plat de côtes', value: 65 },
          { name: 'Tendron Milieu de poitrine', value: 65 },
          { name: 'Macreuse à pot-au-feu', value: 85 },
          { name: 'Rumsteck', value: 75 },
          { name: 'Faux-filet', value: 65 },
          { name: 'Côtes Entrecôtes', value: 55 },
          { name: 'Basses côtes', value: 45 },
          { name: 'Collier', value: 85 },
          { name: 'Jumeau à biftek', value: 15 },
          { name: 'Paleron', value: 65 },
          { name: 'Macreuse à bifteck', value: 45 },
          { name: 'Gîte', value: 85 },
          { name: 'Aiguillette baronne', value: 65 },
          { name: 'Filet', value: 95 }
        ]
      }
    ]
  };
  myChart.setOption(option);
});

option && myChart.setOption(option);



发帖前要善用【论坛搜索】功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。
回复

举报

SpeII
SpeII 发表于 2022-7-5 11:11
[HTML] 纯文本查看 复制代码
$.get(ROOT_PATH + '/data/asset/geo/Beef_cuts_France.svg',
function (svg) {
  echarts.registerMap('Beef_cuts_France', { svg: svg });
  option = {
    tooltip: {},
    geo: [
      {
        name: 'French Beef Cuts',
        type: 'map',
        map: 'Beef_cuts_France',
        roam: true,
        emphasis: {
          label: {
            show: false
          }
        },
        selectedMode: false,
        data: [
          { name: 'Queue', value: 15 },
          { name: 'Langue', value: 35 },
          { name: 'Plat de joue', value: 15 },
          { name: 'Gros bout de poitrine', value: 25 },
          { name: 'Jumeau à pot-au-feu', value: 45 },
          { name: 'Onglet', value: 85 },
          { name: 'Plat de tranche', value: 25 },
          { name: 'Araignée', value: 15 },
          { name: 'Gîte à la noix', value: 55 },
          { name: "Bavette d'aloyau", value: 25 },
          { name: 'Tende de tranche', value: 65 },
          { name: 'Rond de gîte', value: 45 },
          { name: 'Bavettede de flanchet', value: 85 },
          { name: 'Flanchet', value: 35 },
          { name: 'Hampe', value: 75 },
          { name: 'Plat de côtes', value: 65 },
          { name: 'Tendron Milieu de poitrine', value: 65 },
          { name: 'Macreuse à pot-au-feu', value: 85 },
          { name: 'Rumsteck', value: 75 },
          { name: 'Faux-filet', value: 65 },
          { name: 'Côtes Entrecôtes', value: 55 },
          { name: 'Basses côtes', value: 45 },
          { name: 'Collier', value: 85 },
          { name: 'Jumeau à biftek', value: 15 },
          { name: 'Paleron', value: 65 },
          { name: 'Macreuse à bifteck', value: 45 },
          { name: 'Gîte', value: 85 },
          { name: 'Aiguillette baronne', value: 65 },
          { name: 'Filet', value: 95 }
        ]
      }
    ],
    grid: {
        left: '70%',
        top: '20%',
        bottom: '20%'
      },
      xAxis: {},
      yAxis: {
        data: [
          'heart',
          'large-intestine',
          'small-intestine',
          'spleen',
          'kidney',
          'lung',
          'liver'
        ]
      },
      series: [
        {
          type: 'bar',
          emphasis: {
            focus: 'self'
          },
          data: [121, 321, 141, 52, 198, 289, 139]
        }
      ]
  };
  myChart.setOption(option);
});



为啥不用两个容器呢，多看看官方文档吧，你说的应该也能实现
https://echarts.apache.org/zh/option.html#%2Fsearch%2Fgeo

免费评分

参与人数 1吾爱币 +1 热心值 +1 收起 理由
cqwcns + 1 + 1 谢谢@Thanks！

查看全部评分

【吾爱破解论坛总版规】 - [让你充分了解吾爱破解论坛行为规则]
回复 支持

举报

cqwcns
 楼主| cqwcns 发表于 2022-7-5 12:55
吾爱破解论坛没有任何官方QQ群，禁止留联系方式，禁止任何商业交易。
你好，不知道为什么map中的tooltip无效。

[JavaScript] 纯文本查看 复制代码
$.get(ROOT_PATH + '/data/asset/geo/Beef_cuts_France.svg',
function (svg) {
  echarts.registerMap('Beef_cuts_France', { svg: svg });
  option = {
    tooltip: {},
    geo: [
      {
        name: 'French Beef Cuts',
        type: 'map',
        map: 'Beef_cuts_France',
        roam: true,
        emphasis: {
          label: {
            show: false
          }
        },
        selectedMode: false,
        tooltip: {formatter:()=>{'测试'}},
        data: [
          { name: 'Queue', value: 15 },
          { name: 'Langue', value: 35 },
          { name: 'Plat de joue', value: 15 },
          { name: 'Gros bout de poitrine', value: 25 },
          { name: 'Jumeau à pot-au-feu', value: 45 },
          { name: 'Onglet', value: 85 },
          { name: 'Plat de tranche', value: 25 },
          { name: 'Araignée', value: 15 },
          { name: 'Gîte à la noix', value: 55 },
          { name: "Bavette d'aloyau", value: 25 },
          { name: 'Tende de tranche', value: 65 },
          { name: 'Rond de gîte', value: 45 },
          { name: 'Bavettede de flanchet', value: 85 },
          { name: 'Flanchet', value: 35 },
          { name: 'Hampe', value: 75 },
          { name: 'Plat de côtes', value: 65 },
          { name: 'Tendron Milieu de poitrine', value: 65 },
          { name: 'Macreuse à pot-au-feu', value: 85 },
          { name: 'Rumsteck', value: 75 },
          { name: 'Faux-filet', value: 65 },
          { name: 'Côtes Entrecôtes', value: 55 },
          { name: 'Basses côtes', value: 45 },
          { name: 'Collier', value: 85 },
          { name: 'Jumeau à biftek', value: 15 },
          { name: 'Paleron', value: 65 },
          { name: 'Macreuse à bifteck', value: 45 },
          { name: 'Gîte', value: 85 },
          { name: 'Aiguillette baronne', value: 65 },
          { name: 'Filet', value: 95 }
        ]
      }
    ],
    grid: {
        left: '70%',
        top: '20%',
        bottom: '20%'
      },
      xAxis: {},
      yAxis: {
        data: [
          'heart',
          'large-intestine',
          'small-intestine',
          'spleen',
          'kidney',
          'lung',
          'liver'
        ]
      },
      series: [
        {
          type: 'bar',
          emphasis: {
            focus: 'self'
          },
          data: [121, 321, 141, 52, 198, 289, 139]
        }
      ]
  };
  myChart.setOption(option);
});
如何升级？如何获得积分？积分对应解释说明！
回复 支持

举报

zpy2
zpy2 发表于 2022-7-5 14:57
《站点帮助文档》有什么问题来这里看看吧，这里有你想知道的内容！
cqwcns 发表于 2022-7-5 12:55
你好，不知道为什么map中的tooltip无效。

[mw_shl_code=javascript,true]$.get(ROOT_PATH + '/data/asse ...

import

这个是不是还要webpack打包运行，复制粘贴到html文件，不显示啊。
呼吁大家发布原创作品添加吾爱破解论坛标识！
回复 支持

举报

zpy2
zpy2 发表于 2022-7-5 15:10
zpy2 发表于 2022-7-5 14:57
import

这个是不是还要webpack打包运行，复制粘贴到html文件，不显示啊。

[HTML] 纯文本查看 复制代码
<!--
	THIS EXAMPLE WAS DOWNLOADED FROM [url]https://echarts.apache.org/examples/zh/editor.html?c=geo-beef-cuts[/url]
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/extension/bmap.min.js"></script>
  -->

  <script src="/js/onerror.js">
  </script">
  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var ROOT_PATH = 'https://echarts.apache.org/examples';
    var option;

    $.get(ROOT_PATH + '/data/asset/geo/Beef_cuts_France.svg', function (svg) {
  echarts.registerMap('Beef_cuts_France', { svg: svg });
  option = {
    tooltip: {},
    visualMap: {
      left: 'center',
      bottom: '10%',
      min: 5,
      max: 100,
      orient: 'horizontal',
      text: ['', 'Price'],
      realtime: true,
      calculable: true,
      inRange: {
        color: ['#dbac00', '#db6e00', '#cf0000']
      }
    },
    series: [
      {
        name: 'French Beef Cuts',
        type: 'map',
        map: 'Beef_cuts_France',
        roam: true,
        emphasis: {
          label: {
            show: false
          }
        },
        selectedMode: false,
        data: [
          { name: 'Queue', value: 15 },
          { name: 'Langue', value: 35 },
          { name: 'Plat de joue', value: 15 },
          { name: 'Gros bout de poitrine', value: 25 },
          { name: 'Jumeau à pot-au-feu', value: 45 },
          { name: 'Onglet', value: 85 },
          { name: 'Plat de tranche', value: 25 },
          { name: 'Araignée', value: 15 },
          { name: 'G&#238;te à la noix', value: 55 },
          { name: "Bavette d'aloyau", value: 25 },
          { name: 'Tende de tranche', value: 65 },
          { name: 'Rond de g&#238;te', value: 45 },
          { name: 'Bavettede de flanchet', value: 85 },
          { name: 'Flanchet', value: 35 },
          { name: 'Hampe', value: 75 },
          { name: 'Plat de c&#244;tes', value: 65 },
          { name: 'Tendron Milieu de poitrine', value: 65 },
          { name: 'Macreuse à pot-au-feu', value: 85 },
          { name: 'Rumsteck', value: 75 },
          { name: 'Faux-filet', value: 65 },
          { name: 'C&#244;tes Entrec&#244;tes', value: 55 },
          { name: 'Basses c&#244;tes', value: 45 },
          { name: 'Collier', value: 85 },
          { name: 'Jumeau à biftek', value: 15 },
          { name: 'Paleron', value: 65 },
          { name: 'Macreuse à bifteck', value: 45 },
          { name: 'G&#238;te', value: 85 },
          { name: 'Aiguillette baronne', value: 65 },
          { name: 'Filet', value: 95 }
        ]
      }
    ]
  };
  myChart.setOption(option);
});

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>


帖子里，官网上下载的都本地不显示，奇怪
如何快速判断一个文件是否为病毒！
回复 支持

举报

xiao24
xiao24 发表于 2022-7-5 15:29
[JavaScript] 纯文本查看 复制代码
 const source = [
        { name: 'Queue', value: 15 },
        { name: 'Langue', value: 35 },
        { name: 'Plat de joue', value: 15 },
        { name: 'Gros bout de poitrine', value: 25 },
        { name: 'Jumeau à pot-au-feu', value: 45 },
        { name: 'Onglet', value: 85 },
        { name: 'Plat de tranche', value: 25 },
        { name: 'Araignée', value: 15 },
        { name: 'G&#238;te à la noix', value: 55 },
        { name: "Bavette d'aloyau", value: 25 },
        { name: 'Tende de tranche', value: 65 },
        { name: 'Rond de g&#238;te', value: 45 },
        { name: 'Bavettede de flanchet', value: 85 },
        { name: 'Flanchet', value: 35 },
        { name: 'Hampe', value: 75 },
        { name: 'Plat de c&#244;tes', value: 65 },
        { name: 'Tendron Milieu de poitrine', value: 65 },
        { name: 'Macreuse à pot-au-feu', value: 85 },
        { name: 'Rumsteck', value: 75 },
        { name: 'Faux-filet', value: 65 },
        { name: 'C&#244;tes Entrec&#244;tes', value: 55 },
        { name: 'Basses c&#244;tes', value: 45 },
        { name: 'Collier', value: 85 },
        { name: 'Jumeau à biftek', value: 15 },
        { name: 'Paleron', value: 65 },
        { name: 'Macreuse à bifteck', value: 45 },
        { name: 'G&#238;te', value: 85 },
        { name: 'Aiguillette baronne', value: 65 },
        { name: 'Filet', value: 95 }
    ];

    $.get(ROOT_PATH + '/data/asset/geo/Beef_cuts_France.svg', function (svg) {
        echarts.registerMap('Beef_cuts_France', { svg: svg });
        option = {
            tooltip: {},
            visualMap: {
                left: '15%',
                bottom: '10%',
                width: '30%',
                min: 5,
                max: 100,
                orient: 'horizontal',
                text: ['', 'Price'],
                realtime: true,
                calculable: true,
                inRange: {
                    color: ['#dbac00', '#db6e00', '#cf0000']
                }
            },
            grid: [
                {
                    bottom: '10%',
                    width: '40%',
                    right: 0,
                    containLabel: true
                }
            ],
            yAxis: {
                type: 'category',
                data: source.map(t => t.name)
            },
            xAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'French Beef Cuts',
                    type: 'map',
                    left: 10,
                    width: '60%',
                    map: 'Beef_cuts_France',
                    roam: true,
                    emphasis: {
                        label: {
                            show: false
                        }
                    },
                    selectedMode: false,
                    data: source
                },
                {
                    type: 'bar',
                    radius: 50,
                    position: [10, 10],
                    data: source
                }
            ]
        };
        myChart.setOption(option);
    });
回复 支持

举报

zpy2
zpy2 发表于 2022-7-5 17:39
zpy2 发表于 2022-7-5 15:10
[mw_shl_code=html,true]

https://www.52pojie.cn/thread-1657921-1-1.html

有大佬路过，帮忙看看。
回复 支持

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则


免责声明：
吾爱破解所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:Service@52pojie.cn

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-25 10:31

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表