Echarts 饼状图与柱状图数据关联

最新推荐文章于 2024-05-22 10:05:28 发布

前端-文龙刚

最新推荐文章于 2024-05-22 10:05:28 发布

阅读量1k

点赞数

分类专栏： eCharts Javascript 文章标签： echarts javascript elementui

本文链接：https://blog.csdn.net/qq_17211063/article/details/123320497

版权

Javascript 同时被 2 个专栏收录

84 篇文章 1 订阅

订阅专栏

eCharts

14 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图与饼状图数据联动</title>
</head>
<body>
    <div id="APP" style="height:900px;"></div>
</body>
</html>
<script src="../echarts.min.js"></script>
<script>
var chartDom = document.getElementById('APP');
var myChart = echarts.init(chartDom);
var option;

option = {
    legend: {},
    dataset: {
      source: [
        ['国家', '2012', '2013', '2014', '2015', '2016', '2017'],
        ['中国', 56, 82, 88, 70, 53, 85],
        ['俄罗斯', 51, 52, 55, 53, 73, 68],
        ['美国', 40, 62, 69, 36, 45, 32],
        ['巴基斯坦', 25, 37, 41, 18, 33, 49],
        ['塞尔维亚', 35, 15, 66, 20, 48, 88]
      ]
    },
    
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: { top: '50%' },
    series: [
      {
        type: 'bar',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'bar',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'bar',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'bar',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'bar',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@2012} ({d}%)'
        },
      }
    ]

};

option && myChart.setOption(option);

</script>

前端-文龙刚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echarts 饼状图与柱状图数据关联

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>柱状.
复制链接

扫一扫