在大数据的学习过程中，后台数据分析、输出很重要，但最终是将其表现在图表上，使用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">
    <script src="JS/echart.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="main" style="width:800px;height:600px;"></div>
</body>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    setTimeout(function(){
        option = {
<!--关键点①-->
            tooltip: {
                trigger: 'axis',
                showContent:false
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            dataset:{
                source:[
                    ['date', '100', '101', '102', '103', '104', '105', '106'],
                    ['tea', 120, 200, 150, 80, 70, 110, 130],
                    ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7,90.5],
                    ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5,40.5],
                ]
            },
            xAxis:{type:'category'},
            yAxis:{fridIndex: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:'pie',
                    id:'pie',
                    radius:'30%',
                    center:['50%','25%'],
                    emphasis:{
                        focus:'self'
                    },
                    label:{
                        formatter:'{b}:{@100} ({d}%)'
                    },
                    encode:{
                        itemName:'date',
                        value:'100',
                        tooltip:'100'
                    }
                }
            ]
        };
<!--关键点②-->
        myChart.on('updateAxisPointer',function(event){
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });
        myChart.setOption(option);
    });
    
</script>
</html>

 

实现效果：

 

原文地址：http://www.cnblogs.com/jzz-111jy/p/16793591.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性