• 欢迎光临~

echarts多表联动初步

开发技术 开发技术 2022-10-15 次浏览

在大数据的学习过程中,后台数据分析、输出很重要,但最终是将其表现在图表上,使用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>

 

实现效果:

echarts多表联动初步

 

程序员灯塔
转载请注明原文链接:echarts多表联动初步
喜欢 (0)