echarts 多维数组在一个表格展示

段天涯在 发布于 06/11 16:15
阅读 229
收藏 0

demo 来源:https://echarts.baidu.com/examples/editor.html?c=bar-stack

在上面的demo是  周一到周日 每一天这个网站各个渠道的访问流量,
现在比如说我有5个网站呢,我想增加一个维度,
点击其中某个网站,可以只显示这个网站的访问流量,
点击某三个就可以显示三个网站的 访问流量情况

 

下面我做了个草图

加载中
0
tcxu
tcxu

修改你的代码如下:
现有5个网站,增加一个维度, 最后一个柱子取名:'添加成5维'。
余下的任务: 别制成每类数据的Echarts图,以便点击对应柱子,生成有关Echarts图。
目前用户点击某个柱子,便会弹出对应柱子的名称。

<html> 
<head>
    <meta charset="utf-8">
    <title>ECharts</title>

<style>

#main{
	border:groove #0F3;
}

</style>

</head>
<body>

    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px   "></div>

<!-- ECharts单文件引入 -->
 <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script type="text/javascript">
	  var myChart = echarts.init(document.getElementById('main'));
		


option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
	color:['#F00','#0F0','#00F','#FF0','#000','#7fffd4','#8a2be2','#ff7f50','#7fff00','#8b0000'],
    legend: {
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他','添加成5维']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'邮件营销',
            type:'bar',
            stack: '广告',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'bar',
            stack: '广告',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'bar',
            stack: '广告',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'搜索引擎',
            type:'bar',
            data:[862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine : {
                lineStyle: {
                    normal: {
                        type: 'dashed'
                    }
                },
                data : [
                    [{type : 'min'}, {type : 'max'}]
                ]
            }
        },
        {
            name:'百度',
            type:'bar',
            barWidth : 5,
            stack: '搜索引擎',
            data:[620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name:'谷歌',
            type:'bar',
            stack: '搜索引擎',
            data:[120, 132, 101, 134, 290, 230, 220]
        },
        {
            name:'必应',
            type:'bar',
            stack: '搜索引擎',
            data:[60, 72, 71, 74, 190, 130, 110]
        },
        {
            name:'其他',
            type:'bar',
            stack: '搜索引擎',
            data:[62, 82, 91, 84, 109, 110, 120]
        },
        {
            name:'添加成5维',
            type:'bar',
			barWidth : 8,
            data:[220, 232, 599, 134, 690, 230, 490]
        }
    ]
};


   // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		
		myChart.on('click', function (params) { 
		  alert(option.legend.data[params.seriesIndex])
        });
		
                    
    </script>
</body>
</html>

 

0
段天涯在
段天涯在

引用来自“tcxu”的评论

修改你的代码如下:
现有5个网站,增加一个维度, 最后一个柱子取名:'添加成5维'。
余下的任务: 别制成每类数据的Echarts图,以便点击对应柱子,生成有关Echarts图。
目前用户点击某个柱子,便会弹出对应柱子的名称。

<html> 
<head>
    <meta charset="utf-8">
    <title>ECharts</title>

<style>

#main{
	border:groove #0F3;
}

</style>

</head>
<body>

    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px   "></div>

<!-- ECharts单文件引入 -->
 <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script type="text/javascript">
	  var myChart = echarts.init(document.getElementById('main'));
		


option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
	color:['#F00','#0F0','#00F','#FF0','#000','#7fffd4','#8a2be2','#ff7f50','#7fff00','#8b0000'],
    legend: {
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他','添加成5维']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'邮件营销',
            type:'bar',
            stack: '广告',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'bar',
            stack: '广告',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'bar',
            stack: '广告',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'搜索引擎',
            type:'bar',
            data:[862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine : {
                lineStyle: {
                    normal: {
                        type: 'dashed'
                    }
                },
                data : [
                    [{type : 'min'}, {type : 'max'}]
                ]
            }
        },
        {
            name:'百度',
            type:'bar',
            barWidth : 5,
            stack: '搜索引擎',
            data:[620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name:'谷歌',
            type:'bar',
            stack: '搜索引擎',
            data:[120, 132, 101, 134, 290, 230, 220]
        },
        {
            name:'必应',
            type:'bar',
            stack: '搜索引擎',
            data:[60, 72, 71, 74, 190, 130, 110]
        },
        {
            name:'其他',
            type:'bar',
            stack: '搜索引擎',
            data:[62, 82, 91, 84, 109, 110, 120]
        },
        {
            name:'添加成5维',
            type:'bar',
			barWidth : 8,
            data:[220, 232, 599, 134, 690, 230, 490]
        }
    ]
};


   // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		
		myChart.on('click', function (params) { 
		  alert(option.legend.data[params.seriesIndex])
        });
		
                    
    </script>
</body>
</html>

 

谢谢您的回复,感谢!

  也许是我表达的不够清楚 我想换个方式表达一下。
demo:https://www.echartsjs.com/examples/editor.html?c=dataset-simple0  
官方这个demo 暂时理解为 点击上面时间 分别对应 下面四种饮料的产量  
下面有个需求:
比如说 工厂有四个组,我想实现 点击时间,然后点击A组 表示 这个时间段 A组的产品,点B组的话就显示B组的产量

根据选择时间 和组 来显示下面要展示的内容

段天涯在
段天涯在
回复 @tcxu : 以上
段天涯在
段天涯在
点击2015 点击A组表示 2015年A组的产量, 点击2015 点A 和B 表示 2015年 AB组分别产量;有点复杂 ,其实可以用三个表展示;比如A组 2015 2016 2017 四款产品的产量,B组 2015 2016 2017 四款产品的产量,C组 2015 2016 2017 四款产品的产量. 但是我想增加三个小按钮 来控制 展示哪个组在 某个时间内的产量,这样体验会更好
tcxu
tcxu
在你展示的"根据选择时间 和组 来显示下面要展示的内容" 的Echarts 图之中, 图例 (legend)有问题:A组、B组、C组 和 年份;2015、2016、2017 重叠了。似乎: A组就是 2015,B组就是 2016,C组就是 2017。我还是不明白你的用意。
0
黑暗豹子
黑暗豹子

澳洲幸运10择业能编码出来码?高境界啊 

0
tcxu
tcxu

楼主的愿望其实可以这样实现:事先分别创建好各种可能的 Echarts 直方 (histogram,bar)图,这样就可以通过HTML的复选框 (type="checkbox"), 来按用户的需求显示相应的图形。

段天涯在
段天涯在
谢谢了 我开始也是这么想的,这样体验就没有之前的那样好,会写很多重复代码,另外我准备 用checkbox 选择哪个 再触发重新加载 哪个数据
返回顶部
顶部