数据可视化学习

最新推荐文章于 2023-06-26 10:43:36 发布

xwzj的小白

最新推荐文章于 2023-06-26 10:43:36 发布

阅读量183

点赞数

分类专栏：数据可视化文章标签：可视化数据可视化

本文链接：https://blog.csdn.net/qq_43607916/article/details/110367669

版权

数据可视化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

数据可视化学习第三节

echarts图表开发步骤
十大常见图表之柱状图和折线图

ercharts 图表开发步骤

在这里插入图片描述

开发模板可以在博客上查找或者对自己的学习过程中制作图表进行总结，后续将给出一套通用的echart开发模板。

十大常见图表制作

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!--第一步引入echart.js-->
        <script src="js/echarts.js"></script>
	</head>
	<body>
        <!--第二步DOM中准备一个div用来渲染echarts图表-->
        <div id="main" style="width: 900px;height: 600px;"></div>
        
	</body>
    <script >
		//基于准备好的dom，初始化echarts实例
        //第三步：初始化echarts图表
		var myChart =echarts.init(document.getElementById('main'));
		//第四步：指定图表的配置项和数据
		var option = {
			title: {
                text: "某地区蒸发量和降水量",
                backgroundColor:"#000000",
                textAlign:"center",
                textStyle:{
                    color:"#ffffff"
                },
                left:500
                
            
            
            
            },
			tooltip: {
                trigger:"axis"
                //还有item，放在轴上可以显示提示
            },
			legend: {
                data:["蒸发量","降水量"],
                left:"left"
            },
            toolbox:{
                show:true,
                feature:{
                    mark:{
                        show:true
                    },
                    dataView:{
                        show:true,
                        readOnly:true//数据不可修改
                    },
                    magicType:{
                          show:true,//设置为折线图
                        type:["line","bar"]
                    },
                    restore:{
                        show:true
                    },
                    saveAsImage:{
                        show:true
                    }
                }
            },
            calculable:true,//能够实现拖拽重新计算
            xAxis:[
             {
                type:"category",
                data:["1月","2月","3月","4月","五月","六月","7月","8月","9月","10月","11月","12月"]
             }
			],
			yAxis:[
            {
                type:"value"
                //echart智能间隔判断最大值和最小值，当然也可以自己手动 设置
            }
            ],
			series: [
                {
				name: '蒸发量',//要跟上面的legend内的data保持一致，要不然会出错
				type: 'bar',//设置图表类型
				data: [2,4.9,7,23.2,25.6,76.7,135.6,162.2,32.6,20,6.4,3.3]
			     },
                {
				name: '降水量',
				type: 'bar',
				data: [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]
			     },
                
            ]
		};
        //第五步：将实例化的echarts图表设置图表配置项，同时在DOM中渲染图表
		myChart.setOption(option);
			
	</script>
</html>

在这里插入图片描述

注：echarts配置可参考echarts2.0文档来进行相关配置

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!--第一步引入echart.js-->
        <script src="js/echarts.js"></script>
	</head>
	<body>
        <!--第二步DOM中准备一个div用来渲染echarts图表-->
        <div id="main" style="width: 900px;height: 600px;"></div>
        
	</body>
    <script >
		//基于准备好的dom，初始化echarts实例
        //第三步：初始化echarts图表
		var myChart =echarts.init(document.getElementById('main'));
		//第四步：指定图表的配置项和数据
		var option = {
			title: {
                text: "未来一周气温变化",
                subtext:"纯属虚构"
               // backgroundColor:"#000000",
                //textAlign:"center",
                //textStyle:{
                  //  color:"#ffffff"
                },
                //left:500
                
            
            
            
            
			tooltip: {
                trigger:"axis"
                //还有item，放在轴上可以显示提示
            },
			legend: {
                data:["最高","最低"],
               // left:"left"//图例放在左边
            },
            toolbox:{
                show:true,
                orient:'horizontal',//布局方式，默认为水平布局，可选为：horizontal，
                left:'right',
                top:'top',
                color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
                //工具箱颜色序列
                backgroundColor:'rgba(0,0,0,0)',//工具箱背景颜色
                borderColor:'#ccc',//工具箱边框颜色
                borderWidth:0,//工具箱边框线宽，单位为px，默认为0无边框
                padding:5,//工具箱内边距，单位为px，默认各方向内边距为5
                showTitle:true,//工具箱文字提示
                feature:{
                    mark:{
                        show:true,
                        title:{
                            mark:'辅助线-开关',
                            markUndo:'辅助线-删除',
                            markColor:'辅助线-清空0  '
                        },
                        linkStyle:{
                        width:1,
                        color:'#1e90ff',
                        type:'dashed'
                        }
                    },
                    
                    
                    dataView:{
                        show:true,
                        //readOnly:true,//数据不可修改
                        title:'数据视图',
                        lang:['数据视图','关闭','刷新'],
                     optionToContent: function(opt){//自主编排数据视图的显示内容
                        console.log(opt);
                        var axisData=opt.xAxis[0].data;
                        var series= opt.series;
                        var table ='<table style="width:100%;text-align:center"><tbody><tr>'
                                    + '<td>时间</td>'
                                    + '<td>'+ series[0].name + '</td>'
                                    + '<td>'+ series[1].name + '</td>'
                                    + '</tr>';
                        for(var i=0,l=axisdata.length;i<l;i++)
                        {
                        table += '<tr>'
                              + '<td>'+ axisData[i] + '</td>'
                              + '<td>'+ series[0].data[i] + '</td>'
                              + '<td>'+ series[1].data[i] + '</td>'
                              + '</tr>'
                         }
                         table += '</tbody></table>';
                         return table;

                      }
                    },
                    magicType:{
                          show:true,//设置为折线图
                          title:{
                              line:'动态类型切换-折线图',
                              bar:'动态类型切换-柱状图',
                              stack:'动态类型切换-堆积',
                              tiled:'动态类型切换-平铺'
                          },
                        type:['line','bar','stack','tiled']
                    },
                    restore:{
                        show:true,
                        title:'还原',
                        color:'black'
                    },
                    saveAsImage:{
                        show:true,
                        title:'保存为图片',
                        type:'jpeg',
                        lang:['点击本地保存']
                    }
                }
            },
            calculable:true,//能够实现拖拽重新计算
            dataZoom:{//区域缩放 
                show:true,//是否显示数据区域缩放
                realtime:true,//缩放变化是否实时显示
                start:20,//选择起始比例，默认0
                end:80,//选择结束比例，默认100
                title:{
                    dataZoom:'区域缩放',
                    dataZoomReset:'区域缩放-后退'
                }
            },
            xAxis:[
             {
                type:"category",//四种选择，
                boundaryGap:true,//类目起始和结束 两端空白策略
                
                data:function(){
                    var list =[];
                    for(var i=1;i<=30;i++)
                        {
                            list.push('2013-03-'+i);
                        }
                    return list;
                }()
             }
			],
			yAxis:[
            {
                type:"value"
                //echart智能间隔判断最大值和最小值，当然也可以自己手动 设置
            }
            ],
			series: [
            {
				name: '最高',//要跟上面的legend内的data保持一致，要不然会出错
				type: 'line',//设置图表类型
				data: function(){
                    var list =[];
                    for(var i=1;i<=30;i++)
                        {
                            list.push(Math.round(Math.random()*30));
                        }
                    return list;
                }()
             },
            {
				name: '最低',//要跟上面的legend内的data保持一致，要不然会出错
				type: 'line',//设置图表类型
				data: function(){
                    var list =[];
                    for(var i=1;i<=30;i++)
                        {
                            list.push(Math.round(Math.random()*10));
                        }
                    return list;
                }()
             }
            
		   ]
        };
        //第五步：将实例化的echarts图表设置图表配置项，同时在DOM中渲染图表
		myChart.setOption(option);
        
	</script>
</html>