cqwcns 发表于 2022-7-5 10:32

echarts单容器，多图表的问题

庖丁解牛
https://echarts.apache.org/examples/zh/editor.html?c=geo-beef-cuts


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


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


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 发表于 2022-7-5 11:11

$.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:
      }
      ]
};
myChart.setOption(option);
});



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

cqwcns 发表于 2022-7-5 12:55

你好，不知道为什么map中的tooltip无效。

$.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:
      }
      ]
};
myChart.setOption(option);
});

zpy2 发表于 2022-7-5 14:57

cqwcns 发表于 2022-7-5 12:55
你好，不知道为什么map中的tooltip无效。

$.get(ROOT_PATH + '/data/asse ...

import

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

zpy2 发表于 2022-7-5 15:10

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

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

<!--
        THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=geo-beef-cuts
-->
<!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î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);
});

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

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


帖子里，官网上下载的都本地不显示，奇怪

xiao24 发表于 2022-7-5 15:29

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î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 }
    ];

    $.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: ,
                  data: source
                }
            ]
      };
      myChart.setOption(option);
    });

zpy2 发表于 2022-7-5 17:39

zpy2 发表于 2022-7-5 15:10


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

有大佬路过，帮忙看看。
页: [1]
查看完整版本: echarts单容器，多图表的问题


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

Mail To:Service@52pojie.cn