ECharts可视化基础——柱状图

ECharts可视化基础2
ECharts可视化基础3
ECharts可视化基础4

1．ECharts可视化步骤

ECharts可视化分为5步，分别为：

①步骤1：引入echarts.js文件

需在head标签内引入js文件，我们需要通过script标签中的scr属性来给外部脚本文件规定一个路径。

②准备容器

我们需要准备一个呈现图表的盒子，通常我们是在div标签内规定一个区域来呈现图表。

③初始化ECharts实例对象

我们在script标签内，通过echarts.init的方法实例化echarts对象，使用init中的document.getElementById的方法将实例化的对象呈现在步骤二规定的容器内，上述方法需要div标签的id。还可以用document.querySelector获取页面中的div元素，该方法不需要有div标签的id值。用var定义一个变量名来命名此实例对象。

④准备配置项

Echarts呈现的效果主要由该部分决定。用var定义一个变量名来命名此配置项。
通过xAxis:{type:，data:}绘制横坐标，type详情可见https://echarts.apache.org/zh/option.html#xAxis.type，通过data传递x轴数据。
通过yAxis:{type，}绘制横坐标，type通xAxis，data通过series传递。
通过series:[]传递图形数据，通常一个对象为一组数据，如：{name:,type:,data:}，name为该组数据名称，type为图类型，data为y轴数据。

⑤将配置项设置给echarts实例对象

通过setOption方法将刚才配置项设置给实例对象。

2．基础柱状图的绘制。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {

            title:{
            	text:'成绩显示',
            	textStyle:{
            		color:'orange'
            	},
				borderWidth:5,
				borderColor:'orange',
				borderRadius:20,
				left:150
            },
            tooltip: {
				trigger:'item',
				triggerOn:'click',
				// formatter:'{b}:{c}',
				formatter:function(arg){
					console.log(arg)
					return arg.name + '的' + arg.data + '分数是：' + arg.data
				}
			},
            legend: {
                data:['语文','数学']
            },
            xAxis: {
				
                data: ["张三","李四","王五","闰土","小明","茅台","二妞","大强"]
            },
            yAxis: {},
            series: [{
                name: '语文',
                type: 'bar',
                data: [88,92,63,77,94,80,72,86],
				color:'red',
				
				
            }],
			
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

在这里插入图片描述

3．柱状图的标记与显示。

根据柱状图，标记出语文成绩的最高值和最低值，并标记出平均值线。
在series中使用markPoint标记点，其代码格式可在官网配置项手册中搜索‘series-line.markPoint.data. type’，使用markLine标记线，其代码格式可在官网配置项手册中搜索‘series-line.markLine.data.0. type’。
在该柱状图中显示每个柱子的数值，调整柱宽度为原柱的50%，尝试将竖柱状图调整为横柱状图。
在series中使用Label显示数值，在配置项手册中，可通过‘series- xxx. label’查询某图label配置项，柱状图详情见‘series-bar. Label’。
柱宽度通过barWidth设置，可点击网址后点击右边的试一试，‘https://echarts.apache.org/zh/option.html#series-bar.barWidth’
柱状图方向调整通过对xAxis和yAxis数据的调整实现。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {

            title:{
            	text:'成绩显示',
            	textStyle:{
            		color:'orange'
            	},
				borderWidth:5,
				borderColor:'orange',
				borderRadius:20,
				left:150
            },
			toolbox: {
			    show: true,
			    feature: {
			      dataZoom: {
			        yAxisIndex: "none"
			      },
			      dataView: {
			        readOnly: false
			      },
			      magicType: {
			        type: ["line", "bar"]
			      },
			      restore: {},
			      saveAsImage: {}
			    }
			},
			legend: {
			      type: "scroll"
			},
            tooltip: {
				trigger:'item',
				triggerOn:'mousemove',
				// formatter:'{b}:{c}',
				formatter:function(arg){
					console.log(arg)
					return arg.name + '的分数是：' + arg.data
				}
			},
            legend: {
                data:['语文']
            },
            yAxis: {
				
                data: ["张三","李四","王五","闰土","小明","茅台","二妞","大强"]
            },
            xAxis: {},
            series: [{
                name: '语文',
                type: 'bar',
                data: [88,92,63,77,94,80,72,86],
				color:'blue',
				
				markPoint:{
					
					data:[
						{
							type:'max',name:'最大值'
						},
						{
							type:'min',name:'最小值'
						}
					]
				},
				markLine:{
					data:[
						{
							type:'average',name:'平均值'
						}
					]
				},
				label:{
					show:true,
					rotate:60
				},
				barWidth: "50%"
            }],
			
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

在这里插入图片描述

4．通用配置的设置。

通用配置指的是其他图形都含有的配置，如标题title、提示框tooltip、工具栏toolbox、图例legend。
根据配置手册中title的属性，在柱状图的基础上将标题设置为‘成绩展示’，设置字体颜色为‘orange’，尝试更改字体风格等设置，设置合适的边框宽度，颜色和边框圆角半径，调整标题位置，并将echarts配置项手册网址设置为主标题的文本超链接。
请根据配置手册中tooltip的属性，设置鼠标移动到柱子后触发提示，提示该该同学的分数为多少分。
根据配置手册中toolbox.feature的属性，设置工具栏功能，需要由保存图片，数据视图工具，配置项还原，数据区域缩放，动态类型切换。并实验以上功能。
现在我们有该班同学的数学对应成绩96,52,72,25,85,58,83,73，请将数学成绩与语文成绩一同展示，并让老师可以根据自己的需要来单独查看某门课程的统计图。请用legend的功能实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {

            title:{
				link:'https://echarts.apache.org/zh/option.html#title',
            	text:'成绩显示',
            	textStyle:{
            		color:'orange'
            	},
				borderWidth:5,
				borderColor:'orange',
				borderRadius:20,
				left:150
            },
			toolbox: {
			    show: true,
			    feature: {
			      dataZoom: {
			        yAxisIndex: "none"
			      },
			      dataView: {
			        readOnly: false
			      },
			      magicType: {
			        type: ["line", "bar"]
			      },
			      restore: {},
			      saveAsImage: {}
			    }
			},
			legend: {
			      type: "scroll"
			},
            tooltip: {
				trigger:'item',
				triggerOn:'mousemove',
				// formatter:'{b}:{c}',
				formatter:function(arg){
					console.log(arg)
					return arg.name + '的成绩是：' + arg.data
				}
			},
			color: ["blue", "green"],
			dataset: {
			    source: [
			      ["姓名", "张三","李四","王五","闰土","小明","茅台","二妞","大强"],
			      ["语文", 88,92,63,77,94,80,72,86],
			      ["数学", 96,52,72,25,85,58,83,73],
			    ]
			  },
            legend: {},
            xAxis: {
                type: "category",
                axisTick: {
                  show: false
                }
              },
            yAxis: {},
            series: [{
                type: "bar",
                seriesLayoutBy: "row"
              }, {
                type: "bar",
                seriesLayoutBy: "row"
              }]
			
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

在这里插入图片描述

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生